Home/Libraries/Freehand free icons (Iconify)/smiley-in-trouble

Freehand free icons (Iconify)

SmileyInTrouble

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="M23.473 10.13a.34.34 0 0 0-.31.37q.072.672.07 1.35c0 .459 0 .909-.05 1.348c-.09.958-.308 1.9-.65 2.798a12.5 12.5 0 0 1-1.319 2.539a9.65 9.65 0 0 1-4.557 3.528c-1.834.71-3.808.983-5.766.799a12 12 0 0 1-3.158-.73a9.1 9.1 0 0 1-2.718-1.629a11.55 11.55 0 0 1-3.738-7.115c-.465-2.738.16-5.55 1.74-7.835a11.5 11.5 0 0 1 3.127-2.998a9.4 9.4 0 0 1 3.997-1.429c.71-.07 1.41-.13 2.12-.13q.702-.008 1.398.09a.303.303 0 0 0 .09-.6a11 11 0 0 0-1.489-.1c-.73 0-1.459 0-2.188.09a10.1 10.1 0 0 0-4.398 1.43a12.5 12.5 0 0 0-3.437 3.098a11.52 11.52 0 0 0-2.109 8.534a12.52 12.52 0 0 0 4.087 7.845c.927.772 1.978 1.38 3.108 1.799c1.12.406 2.29.659 3.478.75a13.65 13.65 0 0 0 6.206-.94a10.6 10.6 0 0 0 4.907-3.998c.549-.858.998-1.777 1.339-2.738c.35-.965.566-1.974.64-2.998V11.85a13 13 0 0 0-.1-1.409a.34.34 0 0 0-.32-.31"/><path fill="#818cf8" d="m14.599 1.306l2.518.7a.29.29 0 0 0 .4-.13a.31.31 0 0 0-.14-.41a6.7 6.7 0 0 0-1.3-.57a7 7 0 0 0-1.388-.26a.35.35 0 0 0-.39.29a.34.34 0 0 0 .3.38M9.062 10.16a1.79 1.79 0 0 0-.74-2.299a1.74 1.74 0 0 0-1.658.14c-1 .6-1.61 2.179-.46 2.998a2.07 2.07 0 0 0 2.858-.84m6.716.841a1.73 1.73 0 0 0 2.478-.88c.06-.34-.72-.41-1.389-.91c-.67-.5-.66-1.299-1.289-.999a1.68 1.68 0 0 0-.42 2.319c.17.2.382.36.62.47M5.325 18.994a.3.3 0 0 0 .34-.26a6.53 6.53 0 0 1 2.268-3.537a5.9 5.9 0 0 1 3.778-1.54a8.44 8.44 0 0 1 4.467 1.07a5.64 5.64 0 0 1 2.618 3.648a.34.34 0 1 0 .67-.13a6.37 6.37 0 0 0-2.759-4.347a9.26 9.26 0 0 0-4.997-1.39a5.6 5.6 0 0 0-2.438.58a7.5 7.5 0 0 0-1.999 1.41a7.2 7.2 0 0 0-2.238 4.166a.31.31 0 0 0 .29.33M17.527 7.921c.44.8 1.369 1.38 3.058 1.4s2.628-.55 3.078-1.32a3.85 3.85 0 0 0-.06-3.278a11.7 11.7 0 0 0-.91-1.798C20.545-.693 20.325.066 20.275.136c-.33.46-1.06 1.45-1.739 2.599a14.6 14.6 0 0 0-.94 1.899a4 4 0 0 0-.07 3.287m.999-2.998q.303-.945.76-1.828c.43-.87.909-1.65 1.239-2.18q.688.964 1.259 2c.4.676.734 1.389 1 2.128a2.88 2.88 0 0 1 0 2.389c-.32.5-1 .75-2.14.73c-1.139-.02-1.788-.29-2.098-.81a3 3 0 0 1-.06-2.409z"/></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. SmileyInTroubleIcon.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.