Snooze icon

Use the Snooze icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { Snooze24Regular, Snooze24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Snooze24Regular aria-label="Snooze" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_snooze_24_regular.svg" width="24" height="24" alt="Snooze">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.2441 13.0038C8.82228 13.0038 9.16967 13.6222 8.90567 14.1079L8.84892 14.1973L4.22659 20.4993L8.2441 20.4996C8.6238 20.4996 8.93759 20.7818 8.98726 21.1478L8.9941 21.2496C8.9941 21.6293 8.71195 21.9431 8.34587 21.9928L8.2441 21.9996H2.74744C2.16926 21.9996 1.82187 21.3812 2.08587 20.8954L2.14262 20.8061L6.76359 14.5033L2.74839 14.5038C2.36869 14.5038 2.0549 14.2216 2.00524 13.8555L1.99839 13.7538C1.99839 13.3741 2.28054 13.0603 2.64662 13.0106L2.74839 13.0038H8.2441ZM21.2518 2.00098C21.851 2.00098 22.1946 2.66002 21.8903 3.14521L21.8298 3.22886L13.3386 13.4973L21.2518 13.4974C21.6314 13.4974 21.9452 13.7795 21.9949 14.1456L22.0018 14.2474C22.0018 14.6271 21.7196 14.9408 21.3535 14.9905L21.2518 14.9974H11.7474C11.1482 14.9974 10.8046 14.3383 11.1089 13.8531L11.1694 13.7695L19.6586 3.50029L11.7474 3.50098C11.3677 3.50098 11.0539 3.21882 11.0043 2.85275L10.9974 2.75098C10.9974 2.37128 11.2796 2.05749 11.6457 2.00782L11.7474 2.00098H21.2518Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/snooze_24_regular.svg";

Details

Keywords

sleepzzztypelettertimealarmalert