Number Circle 9 icon
Used in generic scenarios that need number usage, points made, etc. The Number Circle 9 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 Number Circle 9 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 { NumberCircle924Regular, NumberCircle924Filled } from "@fluentui/react-icons";
export function Example() {
return <NumberCircle924Regular aria-label="Number Circle 9" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_number_circle_9_24_regular.svg" width="24" height="24" alt="Number Circle 9"> 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 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM12 12.5C13.2426 12.5 14.25 11.4926 14.25 10.25C14.25 9.00736 13.2426 8 12 8C10.7574 8 9.75 9.00736 9.75 10.25C9.75 11.5149 10.6455 12.5 12 12.5ZM12 6.5C13.1746 6.5 14.2707 6.96347 15.0575 7.93393C15.8316 8.88883 16.25 10.2629 16.25 12C16.25 13.3885 15.9883 14.7406 15.3151 15.7694C14.6136 16.8414 13.5022 17.5 12 17.5C10.7521 17.5 9.75808 17.0451 9.04847 16.2462C8.7734 15.9365 8.80145 15.4624 9.11114 15.1874C9.42082 14.9123 9.89487 14.9403 10.1699 15.25C10.5757 15.7069 11.151 16 12 16C12.9978 16 13.6364 15.5952 14.0599 14.9481C14.4044 14.4216 14.6248 13.7017 14.71 12.842C14.0273 13.5556 13.0656 14 12 14C9.77318 14 8.25 12.2988 8.25 10.25C8.25 8.17893 9.92893 6.5 12 6.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_9_24_regular.svg";Details
| Name | Number Circle 9 |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_number_circle_9_24_regular.svg |
| Filled file | ic_fluent_number_circle_9_24_filled.svg |
| React components | NumberCircle924Regular, NumberCircle924Filled |
| License | MIT (© Microsoft Corporation) |