The Phosphor grains slash icon visually represents the absence or removal of grains, often used to indicate a gluten-free option or to signify that a product does not contain wheat.
Common uses
- Labeling gluten-free food products
- Indicating 'no grains' in dietary filters
- Signifying a wheat-free status on packaging
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { GrainsSlash } from '@phosphor-icons/react';
<GrainsSlash size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<GrainsSlash size={24} />thin
<GrainsSlash size={24} weight="thin" />light
<GrainsSlash size={24} weight="light" />bold
<GrainsSlash size={24} weight="bold" />fill
<GrainsSlash size={24} weight="fill" />duotone
<GrainsSlash size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- commerce
- Keywords
- gluten-freewheatglutenfarmfarmingagriculturecommercegrainsslashno wheatwheat-freeno grains
FAQ
- What does the grains slash icon mean?
- It signifies the absence or prohibition of grains, commonly used for gluten-free or wheat-free indicators.
- How do I use the grains slash icon in React?
- Import it from the Phosphor library like so: `import { GrainsSlash } from '@phosphor-icons/react'` and use it as a component.
- What is the license for this icon?
- The Phosphor icon library, including the grains slash 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 →