Status icon

Used in message post scenarios. The Status icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 7 sizes from 12 to 48 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

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_status_24_regular.svg

Status icon in React

npm install @fluentui/react-icons

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

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

Status icon in SVG

npm install @fluentui/svg-icons

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

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

Status icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Status icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.status_24_regular)

Status 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="&#xF723;" FontSize="24" />

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

Status 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_status_24_regular"></i>

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

Status icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_status_24_regular

Status icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .status24Regular)

Status 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 Status 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 { Status24Regular, Status24Filled } from "@fluentui/react-icons";

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

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_status_24_regular.svg" width="24" height="24" alt="Status">

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="M17.0858 4.08571C17.8668 3.30466 19.1332 3.30466 19.9142 4.08571C20.6953 4.86676 20.6953 6.13309 19.9142 6.91414L13.8548 12.9736C13.6972 13.1312 13.5003 13.2438 13.2846 13.2997L9.7959 14.2041L10.7002 10.7154C10.7561 10.4997 10.8687 10.3028 11.0263 10.1452L17.0858 4.08571ZM20.9749 3.02505C19.608 1.65821 17.392 1.65821 16.0251 3.02505L9.96565 9.08453C9.61892 9.43126 9.3712 9.86439 9.24817 10.3391L8.02399 15.0618C7.95731 15.3191 8.03175 15.5924 8.21968 15.7803C8.4076 15.9683 8.68094 16.0427 8.9382 15.976L13.661 14.7517C14.1356 14.6286 14.5687 14.3809 14.9154 14.0342L20.9749 7.9748C22.3417 6.60796 22.3417 4.39189 20.9749 3.02505ZM12 3C12.8062 3 13.5876 3.106 14.3311 3.30483L13.0614 4.57453C12.7147 4.5254 12.3603 4.5 12 4.5C7.85786 4.5 4.5 7.85786 4.5 12C4.5 16.1421 7.85786 19.5 12 19.5C16.1421 19.5 19.5 16.1421 19.5 12C19.5 11.6396 19.4746 11.2852 19.4255 10.9384L20.6951 9.66874C20.894 10.4123 21 11.1938 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02943 7.02944 3 12 3Z" fill="currentColor"/></svg>

Details

NameStatus
StylesRegular (outlined), Filled
Sizes12 px, 16 px, 20 px, 24 px, 28 px, 32 px, 48 px
Regular (outlined) fileic_fluent_status_24_regular.svg
Filled fileic_fluent_status_24_filled.svg
React (Regular)Status12Regular, Status16Regular, Status20Regular, Status24Regular, Status28Regular, Status32Regular, Status48Regular
React (Filled)Status12Filled, Status16Filled, Status20Filled, Status24Filled, Status28Filled, Status32Filled, Status48Filled
LicenseMIT (© Microsoft Corporation)

Keywords

editpencilstatus

Related icons