Badge icon

Use the Badge 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 { Badge24Regular, Badge24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M16.338 2.99956C16.1215 3.45423 16.0003 3.96294 16 4.49994L5.75 4.50027C5.05964 4.50027 4.5 5.05991 4.5 5.75027V18.2503C4.5 18.9406 5.05964 19.5003 5.75 19.5003H18.25C18.9404 19.5003 19.5 18.9406 19.5 18.2503V8.00195C20.0372 8.00195 20.5461 7.88092 21.001 7.66464L21 18.2503C21 19.7691 19.7688 21.0003 18.25 21.0003H5.75C4.23122 21.0003 3 19.7691 3 18.2503V5.75027C3 4.23149 4.23122 3.00027 5.75 3.00027L16.338 2.99956ZM19.5 2.00195C20.8807 2.00195 22 3.12124 22 4.50195C22 5.88266 20.8807 7.00195 19.5 7.00195C18.1193 7.00195 17 5.88266 17 4.50195C17 3.12124 18.1193 2.00195 19.5 2.00195Z" 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/badge_24_regular.svg";

Details

Keywords

appsquarenotification