Home/Libraries/OpenMoji (Iconify)/foggy

OpenMoji (Iconify)

Foggy

License: CC-BY-SA-4.0

ICON SIZE

STROKE WEIGHT1.5px

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 72 72"><path fill="#fff" d="M3.9 4h64v64h-64z"/><path fill="#d0cfce" d="M44.9 12.6a5.1 5.1 0 0 1-5 5.1H18.7a6.614 6.614 0 0 1-.6-13.2V4h18a7.1 7.1 0 0 1 1.6 3.9a5.4 5.4 0 0 1 2.1-.5h.3a4.3 4.3 0 0 1 1.1.2a5.25 5.25 0 0 1 3.7 5"/><path fill="#fff" d="M68 14.8v15.5l-.1.1a9.6 9.6 0 0 1-5.4 1.7H31.2a7.334 7.334 0 1 1 1.4-14.6a10.6 10.6 0 0 1 2.4.6A9.57 9.57 0 0 1 44.9 9a10.6 10.6 0 0 1 4.3 1.2a7.34 7.34 0 0 1 9.7-3.9a7.44 7.44 0 0 1 4.5 6.8c.3 0 .5.1.8.1a4 4 0 0 1 .5.1h.1a.37.37 0 0 1 .3.1a6 6 0 0 0 .7.2c.2.1.5.2.7.3a6 6 0 0 1 1.5.9"/><path fill="#d0cfce" d="M40.7 25.8a8.5 8.5 0 0 1-.3 2.3a8.34 8.34 0 0 1-4.7 5.2c-.2.1-.4.1-.6.2a7.3 7.3 0 0 1-2.5.4L3.9 35.7V5.1a16 16 0 0 1 2.2-.2a8.19 8.19 0 0 1 7.5 5a10.49 10.49 0 0 1 14.3 3.9c.1.2.2.3.3.5a10.5 10.5 0 0 1 1.1 4.2a7.974 7.974 0 0 1 10.7 4a6.4 6.4 0 0 1 .6 1.8c.1.3.1.7.2 1a.75.75 0 0 0-.1.5"/><path fill="#d0cfce" d="M68 27.5V46a9 9 0 0 1-2.8.4h-31a6.3 6.3 0 0 1-1.9-.3A7.4 7.4 0 0 1 27 37a8 8 0 0 1 1.5-2.9l.3-.3a7.52 7.52 0 0 1 8.5-1.7a9.764 9.764 0 0 1 10.1-9.2a10.6 10.6 0 0 1 4.3 1.2A7.495 7.495 0 0 1 66.1 27a13 13 0 0 1 1.9.5"/><path fill="#fff" d="M3.9 40.2a10 10 0 0 0 5.3 1.6H40a7.6 7.6 0 0 0 1.5-.1a6.5 6.5 0 0 0 1.3-.4a7.64 7.64 0 0 0 3.5-2.9a8.5 8.5 0 0 0 1.1-2.6a7.24 7.24 0 0 0-.6-4.6a2.2 2.2 0 0 0-.3-.5a7.385 7.385 0 0 0-9.5-3a9.573 9.573 0 0 0-9.6-9.1a10.15 10.15 0 0 0-5.1 1a6.62 6.62 0 0 0-6.5-4.3a7.64 7.64 0 0 0-3.3.8a7.45 7.45 0 0 0-4.1 6.6A8.7 8.7 0 0 0 4 24.3c-.1-.1-.1 15.9-.1 15.9m60.2-7.7A5.8 5.8 0 0 1 68 34v18.9H45.5a5.2 5.2 0 0 1-2.7-.7l-.9-.6a5.8 5.8 0 0 1-2.1-4.4a3.8 3.8 0 0 1 .1-1.1a5.4 5.4 0 0 1 3-3.9a5.94 5.94 0 0 1 2.6-.7a3.4 3.4 0 0 1 1 .1a7.4 7.4 0 0 1 1.4.4a7.307 7.307 0 0 1 7.7-7a7.5 7.5 0 0 1 3.3 1a5.66 5.66 0 0 1 5.2-3.5"/><path fill="#ea5a47" d="M32.5 9.3h7.2v42.1h-7.2zm12.3 14.5h4v27.1h-4zM55 33h3.8v27.2H55z"/><path fill="#ea5a47" d="M68 39.2v7S54.9 35.5 50.9 31.5c-4.1-4.1-14.8-18.4-14.8-18.4l2.4-2.4s11 13.4 15 17.4C57.6 32.2 68 39.2 68 39.2M23.1 23.6h3.8v27.3h-3.8zm-9.9 9.6H17v26.6h-3.8z"/><path fill="#ea5a47" d="M3.9 39.9v6.9s13.2-11.6 17.2-15.6C25.2 27.1 35.9 13 35.9 13l-2.4-2.4S22.5 24 18.5 28C14.4 32.2 3.9 39.9 3.9 39.9"/><path fill="#d0cfce" d="M21.3 57.8a6.614 6.614 0 0 1-.6-13.2a5.12 5.12 0 0 1 5.1-5.1a5.02 5.02 0 0 1 4.7 3.1a6.575 6.575 0 0 1 9 2.5a7.5 7.5 0 0 1 .9 3a5.123 5.123 0 1 1 4.3 9.3a5.4 5.4 0 0 1-2.1.5Z"/><path fill="#d0cfce" d="M68 47.9V68H31l.1-6.5a6.96 6.96 0 0 1 1.1-3.7a1.4 1.4 0 0 1 .3-.4a7.43 7.43 0 0 1 3.8-2.7h.2c.1 0 .3-.1.4-.1a.6.6 0 0 0 .4-.1h.9a7.2 7.2 0 0 1 2.9.6a10 10 0 0 1 .4-2.4a4.2 4.2 0 0 1 .4-1a9.2 9.2 0 0 1 5.5-4.9a9.54 9.54 0 0 1 7.4.7a7.134 7.134 0 0 1 9.3-3.8a7.34 7.34 0 0 1 3.9 4.2"/><path fill="#fff" d="M3.9 51.2V68h27a6.5 6.5 0 0 0 2.1-1.6a6.45 6.45 0 0 0-.2-8.7a1.8 1.8 0 0 0-.5-.4a6.26 6.26 0 0 0-6.8-.9a8.8 8.8 0 0 0-1-3.6a8.16 8.16 0 0 0-7.2-4.2a8.7 8.7 0 0 0-4.1 1.1a6.32 6.32 0 0 0-5.9-3.9a6.06 6.06 0 0 0-3.5 1.1"/><path fill="none" stroke="#818cf8" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M66.4 13.9a10.9 10.9 0 0 0-3.1-.8h0a7.395 7.395 0 0 0-14.2-2.9A8.7 8.7 0 0 0 44.4 9M6.2 4.9a8.19 8.19 0 0 1 7.5 5a10.46 10.46 0 0 1 13.2 2.4m26.4 10.4a7.1 7.1 0 0 1 10-.4a6.82 6.82 0 0 1 2.3 5.2h0M33.4 38V9.3h5.3v30.1m7.1-14.7v18.5m14.4-4.6c-3.3-2.7-6.9-5.8-8.8-7.7c-2.8-2.8-8.9-10.1-12.5-14.4m-.2-5.6s10.8 13.2 14.8 17.2c4.1 4.1 13.3 11.5 13.3 11.5M24.1 36v-9M56 41.4v-6.2m-41.8 9.5v-7.6m-4.5 3.4c3.1-2.6 8.2-7 10.9-9.7c2.8-2.8 9-10.1 12.6-14.4m.1-5.4S22.5 24.1 18.5 28.2c-4.1 4-13.2 11.7-13.2 11.7m13 5.4a4.2 4.2 0 0 1 2.4-.7h0a5.12 5.12 0 0 1 5.1-5.1a5.02 5.02 0 0 1 4.7 3.1a6.575 6.575 0 0 1 9 2.5a7.5 7.5 0 0 1 .9 3m-7.3 18.3a6.45 6.45 0 0 0-.2-8.7a1.8 1.8 0 0 0-.5-.4a6.26 6.26 0 0 0-6.8-.9a8.8 8.8 0 0 0-1-3.6a8.16 8.16 0 0 0-7.2-4.2a8.7 8.7 0 0 0-4.1 1.1a6.32 6.32 0 0 0-5.9-3.9a5.9 5.9 0 0 0-2.3.4m31.2 8.5h.2c.1 0 .3-.1.4-.1a.6.6 0 0 0 .4-.1h.9a7.2 7.2 0 0 1 2.9.6a10 10 0 0 1 .4-2.4a4.2 4.2 0 0 1 .4-1a9.2 9.2 0 0 1 5.5-4.9a9.54 9.54 0 0 1 7.4.7a7.134 7.134 0 0 1 9.3-3.8a6.34 6.34 0 0 1 2.3 1.6M21.6 19.9a7.36 7.36 0 0 0-6.5-4.4a7 7 0 0 0-2.5.5h0A7.11 7.11 0 0 0 8 22.6h0a4.5 4.5 0 0 0-1.6.3a4.2 4.2 0 0 0-1.3.7"/></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. FoggyIcon.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-SA-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.