Flag Off icon

Use the Flag 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 { FlagOff24Regular, FlagOff24Filled } from "@fluentui/react-icons";

export function Example() {
  return <FlagOff24Regular aria-label="Flag Off" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_flag_off_24_regular.svg" width="24" height="24" alt="Flag 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="M2.50006 2.50092L20.5001 20.5009C20.793 20.7938 20.793 21.2687 20.5001 21.5616C20.2072 21.8545 19.7323 21.8545 19.4394 21.5616L14.3767 16.4992L4.50006 16.5005V21.2503C4.50006 21.63 4.2179 21.9438 3.85183 21.9935L3.75006 22.0003C3.37036 22.0003 3.05657 21.7182 3.0069 21.3521L3.00006 21.2503L2.99973 5.12225L1.4394 3.56158C1.1465 3.26869 1.1465 2.79381 1.4394 2.50092C1.73229 2.20803 2.20716 2.20803 2.50006 2.50092ZM5.11706 2.99792L20.2542 2.99847C20.8722 2.99847 21.225 3.70412 20.8541 4.19854L16.6898 9.7497L20.8541 15.3009C21.225 15.7953 20.8722 16.5009 20.2542 16.5009L18.6201 16.4999L17.1201 14.9999L18.754 15.0009L15.1523 10.1998C14.9522 9.93307 14.9522 9.56633 15.1523 9.29963L18.754 4.49847L6.61706 4.49792L5.11706 2.99792ZM4.49973 6.62225L4.50006 15.0009L12.8767 14.9993L4.49973 6.62225Z" 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/flag_off_24_regular.svg";

Details

Keywords

urgentimportantlook