Counter icon

Use the Counter 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 { Counter24Regular, Counter24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Counter24Regular aria-label="Counter" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_counter_24_regular.svg" width="24" height="24" alt="Counter">

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="M7.5 8C8.88071 8 10 9.11929 10 10.5V13.5C10 14.8807 8.88071 16 7.5 16C6.11929 16 5 14.8807 5 13.5V10.5C5 9.11929 6.11929 8 7.5 8ZM7.5 9.5C6.94772 9.5 6.5 9.94772 6.5 10.5V13.5C6.5 14.0523 6.94772 14.5 7.5 14.5C8.05228 14.5 8.5 14.0523 8.5 13.5V10.5C8.5 9.94772 8.05228 9.5 7.5 9.5ZM19 4C20.6569 4 22 5.34315 22 7V17C22 18.6051 20.7394 19.9158 19.1543 19.9961L19 20H5L4.8457 19.9961C3.26055 19.9158 2 18.6051 2 17V7C2 5.34315 3.34315 4 5 4H19ZM5 5.5C4.17157 5.5 3.5 6.17157 3.5 7V17C3.5 17.8284 4.17157 18.5 5 18.5H11.25V5.5H5ZM12.75 18.5H16.5V15.2783C16.3274 15.3561 16.1382 15.4259 15.9316 15.4775C15.53 15.5777 15.1229 15.3333 15.0225 14.9316C14.9223 14.53 15.1667 14.1229 15.5684 14.0225C15.9242 13.9335 16.1954 13.754 16.3809 13.5918C16.4728 13.5113 16.541 13.4375 16.583 13.3877C16.6036 13.3633 16.6177 13.3448 16.625 13.335L16.6328 13.3242C16.6367 13.3188 16.6413 13.3136 16.6455 13.3086C16.8327 13.0519 17.1618 12.9396 17.4678 13.0322C17.7839 13.1281 17.9999 13.4197 18 13.75V18.5H19C19.8284 18.5 20.5 17.8284 20.5 17V7C20.5 6.17157 19.8284 5.5 19 5.5V7.5C19 8.88071 17.8807 10 16.5 10C15.1193 10 14 8.88071 14 7.5V5.5H12.75V18.5ZM15.5 7.5C15.5 8.05228 15.9477 8.5 16.5 8.5C17.0523 8.5 17.5 8.05228 17.5 7.5V5.5H15.5V7.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/counter_24_regular.svg";

Details

Keywords

countnumbersquantity