Grain icon
material-symbols:grain
The Grain icon (material-symbols:grain) is a free SVG icon from the Material Symbols set by Google. It is drawn on a 24 × 24 grid. Material Symbols icons are released under the Apache 2.0 license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- Material Symbols
- Author
- Google
- License
- Apache-2.0
- Size
- 24 × 24
- Category
- Images
- Tags
- dots, edit, editing, effect, filter, image, images, photography, picture, pictures, grain sharp, grain outline, grain rounded, grain outline sharp, grain outline rounded
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M6 20q-.825 0-1.412-.587T4 18t.588-1.412T6 16t1.413.588T8 18t-.587 1.413T6 20m8 0q-.825 0-1.412-.587T12 18t.588-1.412T14 16t1.413.588T16 18t-.587 1.413T14 20m-4-4q-.825 0-1.412-.587T8 14t.588-1.412T10 12t1.413.588T12 14t-.587 1.413T10 16m8 0q-.825 0-1.412-.587T16 14t.588-1.412T18 12t1.413.588T20 14t-.587 1.413T18 16M6 12q-.825 0-1.412-.587T4 10t.588-1.412T6 8t1.413.588T8 10t-.587 1.413T6 12m8 0q-.825 0-1.412-.587T12 10t.588-1.412T14 8t1.413.588T16 10t-.587 1.413T14 12m-4-4q-.825 0-1.412-.587T8 6t.588-1.412T10 4t1.413.588T12 6t-.587 1.413T10 8m8 0q-.825 0-1.412-.587T16 6t.588-1.412T18 4t1.413.588T20 6t-.587 1.413T18 8"/></svg>
How to use the Grain icon
React
import { Icon } from "@iconify/react";
<Icon icon="material-symbols:grain" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="material-symbols:grain" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="material-symbols:grain" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[material-symbols--grain]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/material-symbols -->
<div class="i-material-symbols:grain"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="material-symbols:grain"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/material-symbols/grain.svg" alt="Grain icon" width="24" height="24">
Grain icon in other icon sets
Grain icon FAQ
Is the Grain icon free for commercial use?
Yes. Material Symbols icons are released under the Apache 2.0 license, which allows use in personal and commercial projects.
How do I use the Grain icon in React?
Install @iconify/react and render <Icon icon="material-symbols:grain" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Grain icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/material-symbols/grain.svg" alt="Grain icon">, or paste the SVG code inline to style it with CSS.
Browse all Material Symbols icons →
ICONYZ
