Sleep icon

Use the Sleep 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 { Sleep24Regular, Sleep24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M13.3781 3.02583C14.7798 3.10103 16.1492 3.50366 17.391 4.22061C21.6975 6.70697 23.173 12.2137 20.6866 16.5202C18.2003 20.8267 12.6936 22.3022 8.38707 19.8158C7.2143 19.1387 6.22702 18.2227 5.47506 17.1308C5.22365 16.7657 5.38627 16.2615 5.80362 16.1121C9.19524 14.8982 11.0118 13.4915 12.0659 11.4794C13.1756 9.36109 13.4623 7.04073 12.686 3.86014C12.5787 3.42034 12.9261 3.00158 13.3781 3.02583ZM14.3892 4.66344L14.454 5.05287C14.8713 7.75799 14.5191 10.0289 13.3946 12.1754C12.2527 14.3552 10.3943 15.8794 7.3787 17.1151C7.88685 17.6641 8.47755 18.136 9.13707 18.5168C12.7261 20.5889 17.3154 19.3592 19.3876 15.7702C21.4597 12.1811 20.23 7.59179 16.641 5.51965C16.1356 5.2279 15.6042 4.99793 15.0555 4.83188L14.7242 4.73994L14.3892 4.66344ZM10.9937 3.65277L11 3.75148V8.99956C11 10.1041 10.1046 10.9996 9 10.9996C7.89543 10.9996 7 10.1041 7 8.99956C7 7.89499 7.89543 6.99956 9 6.99956C9.17302 6.99956 9.3409 7.02153 9.50102 7.06283L9.5 4.76359L6 5.8284V9.99956C6 11.1041 5.10457 11.9996 4 11.9996C2.89543 11.9996 2 11.1041 2 9.99956C2 8.89499 2.89543 7.99956 4 7.99956C4.17302 7.99956 4.3409 8.02153 4.50102 8.06283L4.5 5.27264C4.5 4.97919 4.67056 4.71641 4.93029 4.59415L5.03171 4.55511L10.0317 3.03395C10.4493 2.90691 10.8704 3.16075 10.9752 3.55853L10.9937 3.65277Z" 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/sleep_24_regular.svg";

Details

Keywords

moonmusicwhitenoisesoundaudio