The Phosphor grains icon depicts a cluster of wheat stalks, commonly used in UI to represent concepts related to agriculture, food products, or the origin of ingredients.
Common uses
- Labeling a 'Farm Fresh' product category
- Indicating a 'gluten-free' filter option
- Representing a 'grain commodity' in a financial app
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { Grains } from '@phosphor-icons/react';
<Grains size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<Grains size={24} />thin
<Grains size={24} weight="thin" />light
<Grains size={24} weight="light" />bold
<Grains size={24} weight="bold" />fill
<Grains size={24} weight="fill" />duotone
<Grains size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- commerce
- Keywords
- wheatglutenfarmfarmingagriculturecommercenaturegrainscerealfoodharvest
FAQ
- What does the grains icon represent?
- The grains icon visually represents wheat or other cereal grains, often used in contexts related to farming, food, or agriculture.
- How do I use the grains icon in React?
- Import it from the Phosphor React library: `import { Grains } from '@phosphor-icons/react'`. Then use it as a component: `<Grains />`.
- What is the license for the Phosphor grains icon?
- The Phosphor icon library, including the grains icon, is available under the MIT license.
Related icons
The same idea in other libraries, and near matches in Phosphor.
Looking for something else? Search Phosphor and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →