Home/Libraries/IonIcons/ios-thunderstorm-outline

IonIcons

IosThunderstormOutline

License: MITCommercial Safe

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 512 512"><path d="M312 272h-40l16-48h-72l-15 80h52.3L224 400z" fill="#818cf8"/><path d="M328.4 172.7c-2.7 0-5.4 0-8 .3-7.9-35-39.1-61.4-76.4-61.4-43.3 0-78.3 35.2-78.3 78.5 0 2.6.1 5.2.4 7.8-26.4 2.3-47.1 25.7-47.1 52.8 0 28.6 23.2 53.3 51.7 53.3H182v-17h-11.3c-9.5 0-18.5-4.1-25.4-11-6.8-7-10.6-16.3-10.6-26 0-18.6 14.5-33.8 33.2-36.9 1.6-.3 8.8-1.3 14.2-1.8 0 0-.5-5.3-.6-9.6-.1-4.3-.1-9.4-.1-11.5 0-34.6 28.1-62.7 62.6-62.7 14.5 0 28.1 4.8 39.3 13.9 10.9 8.9 18.6 21.3 21.7 34.9l3.1 14 14.2-1.8c2.1-.3 4.1-.4 6.1-.4 26.9 0 48.8 22.3 48.8 49.4 0 27.1-21.9 49.4-48.8 49.4H320v17h8.4c35.7 0 64.6-30.1 64.6-65.9 0-35.6-28.9-65.3-64.6-65.3z" fill="#818cf8"/></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 react-ionicons) 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. IosThunderstormOutlineIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **MIT** 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.