Fluent Icons

Counter icon

The Counter icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 2 sizes from 20 to 24 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG
Xceed Toolkit Plus for WPF logoXceed Toolkit Plus for WPFSponsorUpgrade Your WPF UI with Xceed Toolkit Plus

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_counter_24_regular.svg

Counter icon in React

npm install @fluentui/react-icons

import { Counter24Regular } from "@fluentui/react-icons";

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

Counter icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/counter_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/counter_24_regular.svg" width="24" height="24" alt="Counter">

Counter icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.Counter())" />

Counter icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xF0ABB;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xF0ABB;" FontSize="24" />

Counter icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_counter_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\f0abb";
  font-size: 24px;
}

Counter icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_counter_24_regular" />

// Kotlin
R.drawable.ic_fluent_counter_24_regular

Counter icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .counter24Regular)

Counter icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

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" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

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>

Details

NameCounter
StylesRegular (outlined), Filled
Sizes20 px, 24 px
Regular (outlined) fileic_fluent_counter_24_regular.svg
Filled fileic_fluent_counter_24_filled.svg
React (Regular)Counter20Regular, Counter24Regular
React (Filled)Counter20Filled, Counter24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

count

Related icons

Document 100Number Circle 0Number Circle 1Number Circle 2Number Circle 3Number Circle 4Number Circle 5Number Circle 6Number Circle 7Number Circle 8Number Circle 9Couch