Skip to content
Cuelark UI

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

Grommet-Icons · GrToast

Toast icon

A free toast icon from Grommet-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
Apache License Version 2.0
Project
github.com
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/grommet/toast.json
components/icons/grommet-toast.tsx
import * as React from "react";

/**
 * Toast from Grommet-Icons (https://github.com/grommet/grommet-icons), Apache License Version 2.0.
 * Via Cuelark UI: ui.cuelark.com/icons/grommet/toast. Sized in em, colored by currentColor.
 */
export function GrToastIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 24 24"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        fill="none"
        strokeWidth="2"
        d="M8,2 C5.790861,2 4,3.790861 4,6 C4,7.48056471 4.80439726,8.77325238 6,9.46487122 L6,16 L18,16 L18,9.46487122 C19.1956027,8.77325238 20,7.48056471 20,6 C20,3.790861 18.209139,2 16,2 L8,2 Z M11.3212774,6.87413911 C11.600007,6.39136541 12.209917,6.22167659 12.700101,6.50468445 L14.4159244,7.49531555 C14.8986981,7.77404508 15.0683869,8.38395511 14.7853791,8.87413911 L13.794748,10.5899625 C13.5160184,11.0727362 12.9061084,11.242425 12.4159244,10.9594172 L10.700101,9.96878606 C10.2173273,9.69005654 10.0476385,9.0801465 10.3306463,8.58996251 L11.3212774,6.87413911 Z M8,18 L8,20 M12,18 L12,23 M16,18 L16,21"
      />
    </svg>
  );
}
With react-icons
import { GrToast } from "react-icons/gr";

export function Example() {
  return <GrToast className="size-5" />;
}
toast.svg
<svg
  viewBox="0 0 24 24"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    fill="none"
    stroke-width="2"
    d="M8,2 C5.790861,2 4,3.790861 4,6 C4,7.48056471 4.80439726,8.77325238 6,9.46487122 L6,16 L18,16 L18,9.46487122 C19.1956027,8.77325238 20,7.48056471 20,6 C20,3.790861 18.209139,2 16,2 L8,2 Z M11.3212774,6.87413911 C11.600007,6.39136541 12.209917,6.22167659 12.700101,6.50468445 L14.4159244,7.49531555 C14.8986981,7.77404508 15.0683869,8.38395511 14.7853791,8.87413911 L13.794748,10.5899625 C13.5160184,11.0727362 12.9061084,11.242425 12.4159244,10.9594172 L10.700101,9.96878606 C10.2173273,9.69005654 10.0476385,9.0801465 10.3306463,8.58996251 L11.3212774,6.87413911 Z M8,18 L8,20 M12,18 L12,23 M16,18 L16,21"
  />
</svg>
Attribution
"Toast" icon from Grommet-Icons (https://github.com/grommet/grommet-icons), licensed under Apache License Version 2.0.