Home/Libraries/Fluent UI System Icons (Iconify)/food-grains-24-filled

Fluent UI System Icons (Iconify)

FoodGrains24Filled

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 24 24"><path fill="#818cf8" d="M12.61 2.287a.93.93 0 0 0-1.22 0a7.2 7.2 0 0 0-2.487 5.282a.5.5 0 0 0 .278.449a9 9 0 0 1 1.7 1.146q.386.33.704.681c.22.242.61.242.83 0q.319-.351.704-.68a9 9 0 0 1 1.7-1.146a.5.5 0 0 0 .279-.449a7.2 7.2 0 0 0-2.487-5.283M12 18.043a8.16 8.16 0 0 1 8.17-4.06c.488.064.853.5.815 1.004A7.596 7.596 0 0 1 13.41 22h-2.82a7.596 7.596 0 0 1-7.574-7.013a.94.94 0 0 1 .815-1.004a8.16 8.16 0 0 1 8.17 4.06m7.646-5.113c-1.847-.102-3.654.38-5.126 1.165c-.882.47-1.69 1.075-2.322 1.771a.27.27 0 0 1-.396 0c-.63-.697-1.439-1.301-2.321-1.771c-1.469-.783-3.27-1.264-5.112-1.165c-.73-1.15-1.23-2.47-1.35-3.8a.96.96 0 0 1 .874-1.04c2.455-.205 4.504.28 6.342 1.837c.83.703 1.386 1.547 1.766 2.267c.379-.72.936-1.564 1.765-2.267c1.84-1.558 3.903-2.042 6.356-1.837a.96.96 0 0 1 .875 1.04c-.121 1.33-.621 2.651-1.35 3.8"/></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. FoodGrains24FilledIcon.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.