Home/Libraries/Freehand free icons (Iconify)/smiley-rich

Freehand free icons (Iconify)

SmileyRich

License: CC-BY-4.0

ICON SIZE

COLOR PICKER

Download SVG without fill color (CSS-styleable)

<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24"><path fill="#818cf8" d="M3.618 6.15c.465.23.982.33 1.499.29q1.302-.195 2.618-.23a1.31 1.31 0 0 1 1.119.47a1 1 0 0 1 .09 1a2.07 2.07 0 0 1-.92.959a4.1 4.1 0 0 1-2.088.5a5.6 5.6 0 0 1-2.178-.49a.35.35 0 0 0-.46.16a.35.35 0 0 0 .17.46c.76.385 1.589.616 2.438.679h.32q-.03.384 0 .77c0 .379.16.739.23 1.098a.34.34 0 0 0 .61.157a.35.35 0 0 0 .07-.247c0-.3 0-.61-.07-.909s-.04-.6-.14-.91a4.9 4.9 0 0 0 1.538-.419a3 3 0 0 0 1.56-1.709a2.07 2.07 0 0 0-.24-1.698a2.13 2.13 0 0 0-1.47-1a13.3 13.3 0 0 0-3.287.23a2 2 0 0 1-.81-.07a.59.59 0 0 1-.39-.33a.68.68 0 0 1 .08-.539a2.2 2.2 0 0 1 .5-.61a3.8 3.8 0 0 1 1.769-.749a3.7 3.7 0 0 1 1.999.18a.3.3 0 0 0 .36-.18a.29.29 0 0 0-.16-.39a4.34 4.34 0 0 0-2-.37v-.459a7 7 0 0 0-.139-.88a.35.35 0 0 0-.517-.245a.34.34 0 0 0-.162.346a7 7 0 0 0 0 .859q.027.219.09.43a4.6 4.6 0 0 0-1.83.769a2.8 2.8 0 0 0-.908 1a1.54 1.54 0 0 0-.1 1.098a1.52 1.52 0 0 0 .809.98m11.502-.72c.405.308.883.508 1.388.58q1.294.075 2.568.31a1.29 1.29 0 0 1 .94.689a1 1 0 0 1-.12 1a2.17 2.17 0 0 1-1.06.709c-.69.196-1.42.213-2.118.05a5.5 5.5 0 0 1-1.999-.91a.341.341 0 1 0-.42.54a6.4 6.4 0 0 0 2.22 1.15l.299.069a6 6 0 0 0-.12.75v1.099a.34.34 0 0 0 .32.36a.32.32 0 0 0 .36-.31c.05-.3.11-.59.13-.89s0-.6 0-.899a5.2 5.2 0 0 0 1.568-.1a2.93 2.93 0 0 0 1.939-1.339a2 2 0 0 0 .12-1.689a2.1 2.1 0 0 0-1.23-1.219a12.5 12.5 0 0 0-3.187-.49a2.1 2.1 0 0 1-.76-.23a.56.56 0 0 1-.33-.399a.64.64 0 0 1 .18-.49c.17-.198.378-.36.61-.48a3.8 3.8 0 0 1 3.707.15a.301.301 0 0 0 .35-.489a4.3 4.3 0 0 0-1.809-.76c0-.13.06-.28.08-.429q.03-.425 0-.85a.35.35 0 0 0-.32-.37a.34.34 0 0 0-.409.31q-.095.417-.14.84a3 3 0 0 0 0 .43a4.4 4.4 0 0 0-1.858.36a2.84 2.84 0 0 0-1.1.829c-.22.285-.333.639-.32 1a1.48 1.48 0 0 0 .52 1.118M9.823 1.284q.429-.102.87-.11h1.828a9.4 9.4 0 0 1 1.799 0a.3.3 0 0 0 .38-.2a.29.29 0 0 0-.2-.37a5.5 5.5 0 0 0-1.72-.588a5 5 0 0 0-.76 0q-.377.015-.749.09a6 6 0 0 0-1.699.54a.33.33 0 0 0-.19.44a.34.34 0 0 0 .44.2"/><path fill="#818cf8" d="M23.733 10.248a13.6 13.6 0 0 0-.72-2.938a.33.33 0 0 0-.298-.23a.35.35 0 0 0-.341.46a13 13 0 0 1 .6 2.798c.089.953.089 1.914 0 2.867a10.7 10.7 0 0 1-.61 2.798c-.35.876-.804 1.708-1.35 2.478A9.7 9.7 0 0 1 16.529 22a12.7 12.7 0 0 1-5.725.839a12 12 0 0 1-3.158-.7a9.5 9.5 0 0 1-2.788-1.578a11.22 11.22 0 0 1-3.587-5.996a12.3 12.3 0 0 1 .36-7.094a.31.31 0 0 0-.17-.46a.3.3 0 0 0-.43.21a13 13 0 0 0-.61 7.494a12.22 12.22 0 0 0 3.708 6.625c.914.78 1.955 1.399 3.077 1.829c1.11.422 2.274.684 3.458.78a13.45 13.45 0 0 0 6.285-.95A10.5 10.5 0 0 0 21.864 19a13.8 13.8 0 0 0 1.35-2.748a11.6 11.6 0 0 0 .629-2.998a15.4 15.4 0 0 0-.11-3.007"/><path fill="#818cf8" d="M18.956 13.845a5.7 5.7 0 0 0-.999 0c-1.399 0-4.417.18-7.115.34c-2.697.16-5.425.45-5.425.45a.76.76 0 0 0-.31.569a4.3 4.3 0 0 0 .26 1.609a6.9 6.9 0 0 0 1.429 2.578a7.17 7.17 0 0 0 5.286 2.228a8.13 8.13 0 0 0 5.325-2.278a7.1 7.1 0 0 0 1.91-3.338a3.2 3.2 0 0 0 .059-1.709a.74.74 0 0 0-.42-.45m-1.249 3.157a5.8 5.8 0 0 1-1.089 1.48a7.07 7.07 0 0 1-4.596 2.088a6.33 6.33 0 0 1-4.677-1.809a5.9 5.9 0 0 1-1.119-1.759a5.5 5.5 0 0 1-.42-1.449v-.37a36 36 0 0 1 3.747-.179c2.898-.06 6.595-.06 8.284-.06h.5a5 5 0 0 1-.63 2.058"/></svg>

Icons in Action

WEB APPLICATION HEADER & NAVIGATION

my-app.com/dashboard

Overview Dashboard

PROGRESS STEPPER

BUTTON UI ACTIONS

SCALABILITY & CLARITY

12px

16px

24px

32px

48px

“

Highly adaptable, clean vectors that scale perfectly across modern UI components, navigation bars, and mobile actions. Perfectly pre-vetted for production deployment.

IconSearch Presets

Frequently Asked Questions

Q.How do I use this icon in my React/Next.js project?

You have two choices: install the official package listed under the "REACT IMPORT" tab (e.g. npm install @iconify/react) and import the icon directly, or copy the complete React Component code from the "STANDALONE JSX" tab and paste it directly into a local file (e.g. SmileyRichIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **CC-BY-4.0** license. The license grants full permissions for personal and commercial usage (e.g., in SaaS platforms, client projects, or business landing pages). Attributing the icon creator is generally not required for MIT/ISC licenses, but check details on our dedicated License Guide.

Q.What is the "Download SVG without fill color" toggle?

Many SVGs ship with inline fill="..." attributes. By checking this toggle, we strip these attributes and enforce fill="none", making the SVG fully styleable via CSS classes or Tailwind utility classes like fill-current.