Warning icon

Use the Warning 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 { Warning24Regular, Warning24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M9.13848 3.70711C10.3664 1.43126 13.6315 1.43104 14.8592 3.70711L21.6024 16.209C22.7697 18.374 21.2016 21.0014 18.742 21.002H5.25469C2.79486 21.0017 1.22681 18.3742 2.39433 16.209L9.13848 3.70711ZM13.5389 4.41902C12.8779 3.1935 11.119 3.19371 10.4578 4.41902L3.71464 16.921C3.08599 18.0867 3.93027 19.5017 5.25469 19.502H18.742C20.0661 19.5014 20.9105 18.0866 20.2821 16.921L13.5389 4.41902ZM11.9998 15.0001C12.5521 15.0001 12.9998 15.4478 12.9998 16.0001C12.9998 16.5523 12.5521 17.0001 11.9998 17.0001C11.4477 16.9999 10.9999 16.5522 10.9998 16.0001C10.9998 15.4479 11.4476 15.0002 11.9998 15.0001ZM11.9998 7.50007C12.414 7.50007 12.7498 7.83586 12.7498 8.25007V12.7501C12.7498 13.1642 12.414 13.5001 11.9998 13.5001C11.5857 13.4999 11.2499 13.1642 11.2498 12.7501V8.25007C11.2498 7.83593 11.5857 7.5002 11.9998 7.50007Z" 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/warning_24_regular.svg";

Details

Keywords

alertexclamationtriangleissue