Status icon
Used in message post scenarios. The Status 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 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" />;
}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>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/status_24_regular.svg";Details
| Name | Status |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_status_24_regular.svg |
| Filled file | ic_fluent_status_24_filled.svg |
| React components | Status24Regular, Status24Filled |
| License | MIT (© Microsoft Corporation) |