Number Symbol icon
Used to represent a general number or in hashtag scenarios on social media. The Number Symbol 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 Symbol 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 { NumberSymbol24Regular, NumberSymbol24Filled } from "@fluentui/react-icons";
export function Example() {
return <NumberSymbol24Regular aria-label="Number Symbol" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_number_symbol_24_regular.svg" width="24" height="24" alt="Number Symbol"> 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="M10.9869 2.88953C11.0639 2.48254 10.7964 2.09019 10.3894 2.0132C9.98238 1.93622 9.59003 2.20374 9.51305 2.61074L8.49396 7.99815L3.74965 8.00037C3.33544 8.00056 2.99981 8.3365 3 8.75072C3.00019 9.16493 3.33614 9.50056 3.75035 9.50037L8.2102 9.49828L7.26445 14.498L2.74965 14.5001C2.33544 14.5003 1.99981 14.8363 2 15.2505C2.00019 15.6647 2.33614 16.0003 2.75035 16.0001L6.98068 15.9981L6.01302 21.1137C5.93603 21.5207 6.20356 21.9131 6.61055 21.99C7.01755 22.067 7.4099 21.7995 7.48688 21.3925L8.50742 15.9974L13.9814 15.9949L13.0131 21.1137C12.9361 21.5207 13.2036 21.9131 13.6106 21.99C14.0176 22.067 14.41 21.7995 14.4869 21.3925L15.5081 15.9942L20.2503 15.9919C20.6646 15.9917 21.0002 15.6558 21 15.2416C20.9998 14.8274 20.6639 14.4918 20.2496 14.4919L15.7919 14.494L16.7376 9.4943L21.2503 9.49219C21.6646 9.49199 22.0002 9.15605 22 8.74184C21.9998 8.32762 21.6639 7.99199 21.2496 7.99219L17.0214 7.99416L17.987 2.88953C18.064 2.48254 17.7964 2.09019 17.3894 2.0132C16.9824 1.93622 16.5901 2.20374 16.5131 2.61074L15.4946 7.99488L10.0207 7.99744L10.9869 2.88953ZM9.73693 9.49757L15.2109 9.49501L14.2651 14.4947L8.79118 14.4973L9.73693 9.49757Z" 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_symbol_24_regular.svg";Details
| Name | Number Symbol |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_number_symbol_24_regular.svg |
| Filled file | ic_fluent_number_symbol_24_filled.svg |
| React components | NumberSymbol24Regular, NumberSymbol24Filled |
| License | MIT (© Microsoft Corporation) |