grain icon

grain from Material Symbols Light by Google · Regular · Images · Apache-2.0 Free for personal and commercial use.

Name: grain
Set: Material Symbols Light
Style: Regular
Category: Images
Viewbox: 24×24
License: Apache 2.0
Aliases: grain-outline, grain-outline-rounded, grain-outline-sharp, grain-rounded, grain-sharp

The same icon in other sets

grainMaterial Icon Theme grainMaterial Symbols grainMaterial Design Icons grainTabler Icons grainWeb3 Icons grainWeb3 Icons Branded

More images icons from Material Symbols Light

10mp 11mp 12mp 13mp 14mp 15mp 16mp 17mp 18mp 19mp 20mp 21mp 22mp 23mp 24fps-select 24mp 2mp 30fps-select 3mp 4mp 50mp 5mp 60fps-select 6mp

Use the grain icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M6 19.616q-.69 0-1.153-.463T4.384 18t.463-1.153T6 16.385t1.153.462T7.616 18t-.463 1.153T6 19.616m8 0q-.69 0-1.153-.463T12.385 18t.462-1.153T14 16.385t1.153.462t.463 1.153t-.463 1.153t-1.153.463m-4-4q-.69 0-1.153-.463T8.385 14t.462-1.153T10 12.385t1.153.462t.463 1.153t-.463 1.153t-1.153.463m8 0q-.69 0-1.153-.463T16.384 14t.463-1.153T18 12.385t1.153.462t.462 1.153t-.462 1.153t-1.153.463m-12-4q-.69 0-1.153-.463T4.384 10t.463-1.153T6 8.385t1.153.462T7.616 10t-.463 1.153T6 11.616m8 0q-.69 0-1.153-.463T12.385 10t.462-1.153T14 8.385t1.153.462t.463 1.153t-.463 1.153t-1.153.463m-4-4q-.69 0-1.153-.463T8.385 6t.462-1.153T10 4.384t1.153.463T11.616 6t-.463 1.153T10 7.616m8 0q-.69 0-1.153-.463T16.384 6t.463-1.153T18 4.384t1.153.463T19.615 6t-.462 1.153T18 7.616"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsLightGrain(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M6 19.616q-.69 0-1.153-.463T4.384 18t.463-1.153T6 16.385t1.153.462T7.616 18t-.463 1.153T6 19.616m8 0q-.69 0-1.153-.463T12.385 18t.462-1.153T14 16.385t1.153.462t.463 1.153t-.463 1.153t-1.153.463m-4-4q-.69 0-1.153-.463T8.385 14t.462-1.153T10 12.385t1.153.462t.463 1.153t-.463 1.153t-1.153.463m8 0q-.69 0-1.153-.463T16.384 14t.463-1.153T18 12.385t1.153.462t.462 1.153t-.462 1.153t-1.153.463m-12-4q-.69 0-1.153-.463T4.384 10t.463-1.153T6 8.385t1.153.462T7.616 10t-.463 1.153T6 11.616m8 0q-.69 0-1.153-.463T12.385 10t.462-1.153T14 8.385t1.153.462t.463 1.153t-.463 1.153t-1.153.463m-4-4q-.69 0-1.153-.463T8.385 6t.462-1.153T10 4.384t1.153.463T11.616 6t-.463 1.153T10 7.616m8 0q-.69 0-1.153-.463T16.384 6t.463-1.153T18 4.384t1.153.463T19.615 6t-.462 1.153T18 7.616"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M6 19.616q-.69 0-1.153-.463T4.384 18t.463-1.153T6 16.385t1.153.462T7.616 18t-.463 1.153T6 19.616m8 0q-.69 0-1.153-.463T12.385 18t.462-1.153T14 16.385t1.153.462t.463 1.153t-.463 1.153t-1.153.463m-4-4q-.69 0-1.153-.463T8.385 14t.462-1.153T10 12.385t1.153.462t.463 1.153t-.463 1.153t-1.153.463m8 0q-.69 0-1.153-.463T16.384 14t.463-1.153T18 12.385t1.153.462t.462 1.153t-.462 1.153t-1.153.463m-12-4q-.69 0-1.153-.463T4.384 10t.463-1.153T6 8.385t1.153.462T7.616 10t-.463 1.153T6 11.616m8 0q-.69 0-1.153-.463T12.385 10t.462-1.153T14 8.385t1.153.462t.463 1.153t-.463 1.153t-1.153.463m-4-4q-.69 0-1.153-.463T8.385 6t.462-1.153T10 4.384t1.153.463T11.616 6t-.463 1.153T10 7.616m8 0q-.69 0-1.153-.463T16.384 6t.463-1.153T18 4.384t1.153.463T19.615 6t-.462 1.153T18 7.616"/></svg>
</template>

CSS

.icon-grain {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6%2019.616q-.69%200-1.153-.463T4.384%2018t.463-1.153T6%2016.385t1.153.462T7.616%2018t-.463%201.153T6%2019.616m8%200q-.69%200-1.153-.463T12.385%2018t.462-1.153T14%2016.385t1.153.462t.463%201.153t-.463%201.153t-1.153.463m-4-4q-.69%200-1.153-.463T8.385%2014t.462-1.153T10%2012.385t1.153.462t.463%201.153t-.463%201.153t-1.153.463m8%200q-.69%200-1.153-.463T16.384%2014t.463-1.153T18%2012.385t1.153.462t.462%201.153t-.462%201.153t-1.153.463m-12-4q-.69%200-1.153-.463T4.384%2010t.463-1.153T6%208.385t1.153.462T7.616%2010t-.463%201.153T6%2011.616m8%200q-.69%200-1.153-.463T12.385%2010t.462-1.153T14%208.385t1.153.462t.463%201.153t-.463%201.153t-1.153.463m-4-4q-.69%200-1.153-.463T8.385%206t.462-1.153T10%204.384t1.153.463T11.616%206t-.463%201.153T10%207.616m8%200q-.69%200-1.153-.463T16.384%206t.463-1.153T18%204.384t1.153.463T19.615%206t-.462%201.153T18%207.616%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6%2019.616q-.69%200-1.153-.463T4.384%2018t.463-1.153T6%2016.385t1.153.462T7.616%2018t-.463%201.153T6%2019.616m8%200q-.69%200-1.153-.463T12.385%2018t.462-1.153T14%2016.385t1.153.462t.463%201.153t-.463%201.153t-1.153.463m-4-4q-.69%200-1.153-.463T8.385%2014t.462-1.153T10%2012.385t1.153.462t.463%201.153t-.463%201.153t-1.153.463m8%200q-.69%200-1.153-.463T16.384%2014t.463-1.153T18%2012.385t1.153.462t.462%201.153t-.462%201.153t-1.153.463m-12-4q-.69%200-1.153-.463T4.384%2010t.463-1.153T6%208.385t1.153.462T7.616%2010t-.463%201.153T6%2011.616m8%200q-.69%200-1.153-.463T12.385%2010t.462-1.153T14%208.385t1.153.462t.463%201.153t-.463%201.153t-1.153.463m-4-4q-.69%200-1.153-.463T8.385%206t.462-1.153T10%204.384t1.153.463T11.616%206t-.463%201.153T10%207.616m8%200q-.69%200-1.153-.463T16.384%206t.463-1.153T18%204.384t1.153.463T19.615%206t-.462%201.153T18%207.616%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols-light/grain.svg?color=%231a73e8&size=48