Number Symbol Square icon
Used to represent a general number or in hashtag scenarios on social media. The Number Symbol Square 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 Square 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 { NumberSymbolSquare24Regular, NumberSymbolSquare24Filled } from "@fluentui/react-icons";
export function Example() {
return <NumberSymbolSquare24Regular aria-label="Number Symbol Square" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_number_symbol_square_24_regular.svg" width="24" height="24" alt="Number Symbol Square"> 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.8979 7.51472C11.304 7.59598 11.5674 7.99112 11.4861 8.39728L11.2655 9.5H13.7358L14.0153 8.10301C14.0966 7.69684 14.4917 7.43346 14.8979 7.51472C15.304 7.59598 15.5674 7.99112 15.4861 8.39728L15.2655 9.5H16.25C16.6642 9.5 17 9.83579 17 10.25C17 10.6642 16.6642 11 16.25 11H14.9654L14.5653 13H15.75C16.1642 13 16.5 13.3358 16.5 13.75C16.5 14.1642 16.1642 14.5 15.75 14.5H14.2652L13.9856 15.8975C13.9043 16.3037 13.5092 16.567 13.103 16.4858C12.6968 16.4045 12.4335 16.0094 12.5147 15.6032L12.7354 14.5H10.2652L9.98557 15.8975C9.90431 16.3037 9.50917 16.567 9.10301 16.4858C8.69684 16.4045 8.43346 16.0094 8.51472 15.6032L8.73544 14.5H7.75C7.33579 14.5 7 14.1642 7 13.75C7 13.3358 7.33579 13 7.75 13H9.03555L9.43569 11H8.25C7.83579 11 7.5 10.6642 7.5 10.25C7.5 9.83579 7.83579 9.5 8.25 9.5H9.73579L10.0153 8.10301C10.0966 7.69684 10.4917 7.43346 10.8979 7.51472ZM10.5653 13H13.0355L13.4357 11H10.9654L10.5653 13ZM3 6.25C3 4.45507 4.45507 3 6.25 3H17.75C19.5449 3 21 4.45507 21 6.25V17.75C21 19.5449 19.5449 21 17.75 21H6.25C4.45507 21 3 19.5449 3 17.75V6.25ZM6.25 4.5C5.2835 4.5 4.5 5.2835 4.5 6.25V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H17.75C18.7165 19.5 19.5 18.7165 19.5 17.75V6.25C19.5 5.2835 18.7165 4.5 17.75 4.5H6.25Z" 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_square_24_regular.svg";Details
| Name | Number Symbol Square |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_number_symbol_square_24_regular.svg |
| Filled file | ic_fluent_number_symbol_square_24_filled.svg |
| React components | NumberSymbolSquare24Regular, NumberSymbolSquare24Filled |
| License | MIT (© Microsoft Corporation) |