Alert Off icon
Used for alerts or notifications. The Alert Off icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Alert Off 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 { AlertOff24Regular, AlertOff24Filled } from "@fluentui/react-icons";
export function Example() {
return <AlertOff24Regular aria-label="Alert Off" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_alert_off_24_regular.svg" width="24" height="24" alt="Alert Off"> 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="M5.21938 6.27997L2.21966 3.28019C1.92677 2.9873 1.92678 2.51242 2.21968 2.21953C2.51257 1.92664 2.98745 1.92665 3.28034 2.21954L21.7801 20.7197C22.073 21.0126 22.073 21.4875 21.7801 21.7804C21.4872 22.0732 21.0123 22.0732 20.7194 21.7803L17.4398 18.5006L15.0001 18.5014C15.0001 20.1582 13.657 21.5014 12.0001 21.5014C10.4024 21.5014 9.09645 20.2524 9.0052 18.6776L8.99966 18.4991L4.27498 18.4999C4.10364 18.4999 3.93413 18.4646 3.77697 18.3964C3.14377 18.1213 2.85342 17.3851 3.12846 16.7519L4.50011 13.594V9.49599C4.50028 8.34367 4.7582 7.25363 5.21938 6.27997ZM15.9391 16.9999L6.36473 7.42534C6.1289 8.07014 6.00022 8.76748 6.00011 9.49609V13.9057L4.65613 16.9999H15.9391ZM13.4997 18.4991L10.5001 18.5014C10.5001 19.3298 11.1717 20.0014 12.0001 20.0014C12.7798 20.0014 13.4206 19.4065 13.4932 18.6458L13.4997 18.4991ZM18.0001 13.9067L18.7084 15.5266L20.8958 17.714C20.9532 17.5705 20.9848 17.4139 20.9848 17.2499C20.9848 17.0775 20.9492 16.907 20.8801 16.7491L19.5001 13.5931V9.49609L19.4959 9.24515C19.3568 5.19084 16.05 1.99609 12.0001 1.99609C10.0984 1.99609 8.36403 2.69926 7.0433 3.86123L8.10667 4.92462C9.15366 4.03291 10.5126 3.49609 12.0001 3.49609C15.2417 3.49609 17.8854 6.05027 17.9965 9.28375L18.0002 9.50895L18.0001 13.9067Z" 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_off_24_regular.svg";Details
| Name | Alert Off |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_alert_off_24_regular.svg |
| Filled file | ic_fluent_alert_off_24_filled.svg |
| React components | AlertOff24Regular, AlertOff24Filled |
| License | MIT (© Microsoft Corporation) |