Skip to content
Cuelark UI

Hover the icon or press Play. Suggested motion: float. Pick another to preview it and update the animated code:

Phosphor Icons · PiGrainsSlashBold

Grains Slash Bold icon

A free grains slash bold icon from Phosphor Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

License
MIT license
Project
github.com
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/phosphor/grains-slash-bold.json
components/icons/phosphor-grains-slash-bold.tsx
import * as React from "react";

/**
 * Grains Slash Bold from Phosphor Icons (https://github.com/phosphor-icons/core), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/phosphor/grains-slash-bold. Sized in em, colored by currentColor.
 */
export function PiGrainsSlashBoldIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 256 256"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M56.88,31.93A12,12,0,1,0,39.12,48.07l4.37,4.81A12,12,0,0,0,36,64v80a92,92,0,0,0,153,68.9l10.16,11.17a12,12,0,0,0,17.76-16.14Zm3.31,117.16a68.16,68.16,0,0,1,55.62,61.82A68.16,68.16,0,0,1,60.19,149.09ZM128,170.61a92.22,92.22,0,0,0-68-45.83V77.05a68.53,68.53,0,0,1,6.94,1.63l70.83,77.9A92.45,92.45,0,0,0,128,170.61Zm12.19,40.29a68.26,68.26,0,0,1,13.92-36.34l18.7,20.57A67.74,67.74,0,0,1,140.19,210.9ZM220,64v80a92.8,92.8,0,0,1-1,13.34,12,12,0,0,1-11.86,10.28,12.74,12.74,0,0,1-1.74-.13,12,12,0,0,1-10.15-13.6c.23-1.59.4-3.19.52-4.8-.76.14-1.53.29-2.29.45a12,12,0,1,1-5.08-23.45c2.49-.54,5-1,7.56-1.31V77.07a68,68,0,0,0-38.79,21.72,12,12,0,1,1-17.92-16A91.73,91.73,0,0,1,156.62,67.7c-8.2-14.93-21.31-25-28.63-29.76a97.84,97.84,0,0,0-15.56,12.6,12,12,0,0,1-17-16.95,116,116,0,0,1,27.19-20.32,12,12,0,0,1,10.74,0c1.33.66,29.36,15,44.74,43.74A91.83,91.83,0,0,1,208,52,12,12,0,0,1,220,64Z"
      />
    </svg>
  );
}
With react-icons
import { PiGrainsSlashBold } from "react-icons/pi";

export function Example() {
  return <PiGrainsSlashBold className="size-5" />;
}
grains-slash-bold.svg
<svg
  viewBox="0 0 256 256"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M56.88,31.93A12,12,0,1,0,39.12,48.07l4.37,4.81A12,12,0,0,0,36,64v80a92,92,0,0,0,153,68.9l10.16,11.17a12,12,0,0,0,17.76-16.14Zm3.31,117.16a68.16,68.16,0,0,1,55.62,61.82A68.16,68.16,0,0,1,60.19,149.09ZM128,170.61a92.22,92.22,0,0,0-68-45.83V77.05a68.53,68.53,0,0,1,6.94,1.63l70.83,77.9A92.45,92.45,0,0,0,128,170.61Zm12.19,40.29a68.26,68.26,0,0,1,13.92-36.34l18.7,20.57A67.74,67.74,0,0,1,140.19,210.9ZM220,64v80a92.8,92.8,0,0,1-1,13.34,12,12,0,0,1-11.86,10.28,12.74,12.74,0,0,1-1.74-.13,12,12,0,0,1-10.15-13.6c.23-1.59.4-3.19.52-4.8-.76.14-1.53.29-2.29.45a12,12,0,1,1-5.08-23.45c2.49-.54,5-1,7.56-1.31V77.07a68,68,0,0,0-38.79,21.72,12,12,0,1,1-17.92-16A91.73,91.73,0,0,1,156.62,67.7c-8.2-14.93-21.31-25-28.63-29.76a97.84,97.84,0,0,0-15.56,12.6,12,12,0,0,1-17-16.95,116,116,0,0,1,27.19-20.32,12,12,0,0,1,10.74,0c1.33.66,29.36,15,44.74,43.74A91.83,91.83,0,0,1,208,52,12,12,0,0,1,220,64Z"
  />
</svg>
Attribution
"Grains Slash Bold" icon from Phosphor Icons (https://github.com/phosphor-icons/core), licensed under MIT license.

Related icons: