Alert On icon

Use the Alert On 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 { AlertOn24Regular, AlertOn24Filled } from "@fluentui/react-icons";

export function Example() {
  return <AlertOn24Regular aria-label="Alert On" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_alert_on_24_regular.svg" width="24" height="24" alt="Alert On">

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="M12 1.99609C16.0499 1.99609 19.3567 5.19084 19.4958 9.24515L19.5 9.49609V13.5931L20.88 16.7491C20.9491 16.907 20.9847 17.0775 20.9847 17.2499C20.9847 17.9402 20.4251 18.4999 19.7347 18.4999L15 18.5014C15 20.1582 13.6569 21.5014 12 21.5014C10.4023 21.5014 9.09634 20.2524 9.00509 18.6776L8.99955 18.4991L4.27486 18.4999C4.10353 18.4999 3.93402 18.4646 3.77686 18.3964C3.14366 18.1213 2.85331 17.3851 3.12835 16.7519L4.5 13.594V9.49599C4.5006 5.3412 7.85209 1.99609 12 1.99609ZM13.4995 18.4991L10.5 18.5014C10.5 19.3298 11.1716 20.0014 12 20.0014C12.7797 20.0014 13.4204 19.4065 13.4931 18.6458L13.4995 18.4991ZM12 3.49609C8.67984 3.49609 6.00048 6.17035 6 9.49609V13.9057L4.65602 16.9999H19.3525L18 13.9067L18.0001 9.50895L17.9964 9.28375C17.8853 6.05027 15.2416 3.49609 12 3.49609ZM21 8.24987H23C23.4142 8.24987 23.75 8.58566 23.75 8.99987C23.75 9.37957 23.4678 9.69336 23.1018 9.74302L23 9.74987H21C20.5858 9.74987 20.25 9.41408 20.25 8.99987C20.25 8.62017 20.5322 8.30638 20.8982 8.25672L21 8.24987ZM1 8.24987H3C3.41421 8.24987 3.75 8.58566 3.75 8.99987C3.75 9.37957 3.46785 9.69336 3.10177 9.74302L3 9.74987H1C0.585786 9.74987 0.25 9.41408 0.25 8.99987C0.25 8.62017 0.532154 8.30638 0.898229 8.25672L1 8.24987ZM22.6 2.54987C22.8259 2.85112 22.791 3.26702 22.5338 3.52687L22.45 3.59987L20.45 5.09987C20.1186 5.3484 19.6485 5.28124 19.4 4.94987C19.1741 4.64862 19.209 4.23272 19.4662 3.97287L19.55 3.89987L21.55 2.39987C21.8814 2.15134 22.3515 2.2185 22.6 2.54987ZM2.45 2.39987L4.45 3.89987C4.78137 4.1484 4.84853 4.6185 4.6 4.94987C4.35147 5.28124 3.88137 5.3484 3.55 5.09987L1.55 3.59987C1.21863 3.35134 1.15147 2.88124 1.4 2.54987C1.64853 2.2185 2.11863 2.15134 2.45 2.39987Z" 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/alert_on_24_regular.svg";

Details

Keywords

bellalarmchimeonloud