Number Circle 6 icon
Used in generic scenarios that need number usage, points made, etc. The Number Circle 6 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 6 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 { NumberCircle624Regular, NumberCircle624Filled } from "@fluentui/react-icons";
export function Example() {
return <NumberCircle624Regular aria-label="Number Circle 6" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_number_circle_6_24_regular.svg" width="24" height="24" alt="Number Circle 6"> 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 11.5C10.7574 11.5 9.75 12.5074 9.75 13.75C9.75 14.9926 10.7574 16 12 16C13.2426 16 14.25 14.9926 14.25 13.75C14.25 12.4851 13.3545 11.5 12 11.5ZM12 17.5C10.8254 17.5 9.72931 17.0365 8.94253 16.0661C8.16838 15.1112 7.75 13.7371 7.75 12C7.75 10.6115 8.01167 9.2594 8.68493 8.23057C9.38643 7.15857 10.4978 6.5 12 6.5C13.2479 6.5 14.2419 6.95494 14.9515 7.75383C15.2266 8.06351 15.1985 8.53756 14.8889 8.81263C14.5792 9.08771 14.1051 9.05966 13.8301 8.74997C13.4243 8.29315 12.849 8 12 8C11.0022 8 10.3636 8.40476 9.94007 9.05192C9.59557 9.57837 9.37518 10.2983 9.28996 11.158C9.97266 10.4444 10.9344 10 12 10C14.2268 10 15.75 11.7012 15.75 13.75C15.75 15.8211 14.0711 17.5 12 17.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_6_24_regular.svg";Details
| Name | Number Circle 6 |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_number_circle_6_24_regular.svg |
| Filled file | ic_fluent_number_circle_6_24_filled.svg |
| React components | NumberCircle624Regular, NumberCircle624Filled |
| License | MIT (© Microsoft Corporation) |