Number Row icon

Use the Number Row 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 { NumberRow24Regular, NumberRow24Filled } from "@fluentui/react-icons";

export function Example() {
  return <NumberRow24Regular aria-label="Number Row" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_number_row_24_regular.svg" width="24" height="24" alt="Number Row">

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="M8.75 4C10.2688 4 11.5 5.23122 11.5 6.75V17.25C11.5 18.7688 10.2688 20 8.75 20H4.75C3.23122 20 2 18.7688 2 17.25V6.75C2 5.23122 3.23122 4 4.75 4H8.75ZM8.75 5.5H4.75C4.05964 5.5 3.5 6.05964 3.5 6.75V17.25C3.5 17.9404 4.05964 18.5 4.75 18.5H8.75C9.44036 18.5 10 17.9404 10 17.25V6.75C10 6.05964 9.44036 5.5 8.75 5.5ZM19.25 4C20.7688 4 22 5.23122 22 6.75V17.25C22 18.7688 20.7688 20 19.25 20H15.25C13.7312 20 12.5 18.7688 12.5 17.25V6.75C12.5 5.23122 13.7312 4 15.25 4H19.25ZM19.25 5.5H15.25C14.5596 5.5 14 6.05964 14 6.75V17.25C14 17.9404 14.5596 18.5 15.25 18.5H19.25C19.9404 18.5 20.5 17.9404 20.5 17.25V6.75C20.5 6.05964 19.9404 5.5 19.25 5.5ZM6 9V15C6 15.4142 6.33579 15.75 6.75 15.75C7.16421 15.75 7.5 15.4142 7.5 15V9C7.5 8.58579 7.16421 8.25 6.75 8.25C6.33579 8.25 6 8.58579 6 9ZM17.5 9.75V11.25H16.25C15.8358 11.25 15.5 11.5858 15.5 12V15C15.5 15.4142 15.8358 15.75 16.25 15.75H18.25C18.6642 15.75 19 15.4142 19 15C19 14.5858 18.6642 14.25 18.25 14.25H17V12.75H18.25C18.6642 12.75 19 12.4142 19 12V9C19 8.58579 18.6642 8.25 18.25 8.25H16.25C15.8358 8.25 15.5 8.58579 15.5 9C15.5 9.41421 15.8358 9.75 16.25 9.75H17.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_row_24_regular.svg";

Details

Keywords

onetwodigital