Number Circle 8 icon

Use the Number Circle 8 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 { NumberCircle824Regular, NumberCircle824Filled } from "@fluentui/react-icons";

export function Example() {
  return <NumberCircle824Regular aria-label="Number Circle 8" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_number_circle_8_24_regular.svg" width="24" height="24" alt="Number Circle 8">

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 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM12 8C13.0428 8 13.75 8.74395 13.75 9.5C13.75 10.2561 13.0428 11 12 11C10.9572 11 10.25 10.2561 10.25 9.5C10.25 8.74395 10.9572 8 12 8ZM14.1912 11.7161C14.8335 11.1789 15.25 10.4018 15.25 9.5C15.25 7.77077 13.7186 6.5 12 6.5C10.2814 6.5 8.75 7.77077 8.75 9.5C8.75 10.4018 9.16646 11.1789 9.80877 11.7161C9.02046 12.301 8.5 13.2005 8.5 14.25C8.5 16.1106 10.1359 17.5 12 17.5C13.8641 17.5 15.5 16.1106 15.5 14.25C15.5 13.2005 14.9795 12.301 14.1912 11.7161ZM12 12.5C13.1734 12.5 14 13.3492 14 14.25C14 15.1508 13.1734 16 12 16C10.8266 16 10 15.1508 10 14.25C10 13.3492 10.8266 12.5 12 12.5Z" 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/number_circle_8_24_regular.svg";

Details

Keywords

numbertexttypecount