Classification icon (Filled & Regular)

Used in classification scenarios (normal, private, confidential, etc) in mail. The Classification 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 Classification 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 { Classification24Regular, Classification24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M14.572 5.18437C15.0369 4.348 15.5663 3.48382 16.0251 3.025C17.3919 1.65817 19.608 1.65817 20.9748 3.025C22.3417 4.39184 22.3417 6.60792 20.9748 7.97475C20.516 8.43357 19.6518 8.96301 18.8154 9.42787C18.1514 9.79688 17.4448 10.1572 16.8429 10.4537L19.0506 12.6614C20.3198 13.9306 20.3198 15.9884 19.0506 17.2576L16.6719 19.6362C16.1837 20.1244 15.3923 20.1244 14.9041 19.6362L14.4984 19.2305L12.3865 21.3424C11.5079 22.221 10.0834 22.221 9.20468 21.3425L2.65914 14.7981C1.78034 13.9194 1.78028 12.4947 2.65901 11.6159L4.77142 9.50354L4.36612 9.09824C3.87797 8.61008 3.87797 7.81862 4.36612 7.33047L6.7448 4.95179C8.01401 3.68258 10.0718 3.68259 11.341 4.95179L13.5461 7.15694C13.8426 6.55502 14.203 5.84836 14.572 5.18437ZM5.83208 10.5642L3.71967 12.6766C3.42676 12.9695 3.42678 13.4444 3.71971 13.7373L10.2652 20.2817C10.5581 20.5746 11.033 20.5746 11.3259 20.2817L13.4377 18.1698L5.83208 10.5642ZM18.0867 8.11675C18.9466 7.63883 19.6262 7.20206 19.9142 6.91409C20.6952 6.13304 20.6952 4.86671 19.9142 4.08566C19.1331 3.30462 17.8668 3.30462 17.0858 4.08566C16.7978 4.37363 16.361 5.05319 15.8831 5.91307C15.4324 6.72398 14.99 7.61114 14.668 8.27882L15.721 9.33182C16.3887 9.0098 17.2758 8.56742 18.0867 8.11675ZM10.2803 6.01245C9.59692 5.32903 8.48888 5.32903 7.80546 6.01245L5.60356 8.21435L15.788 18.3988L17.9899 16.1969C18.6733 15.5135 18.6733 14.4054 17.9899 13.722L10.2803 6.01245Z" 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/classification_24_regular.svg";

Details

Name	Classification
Styles	Regular (outlined), Filled
Size	24 × 24 px (scalable SVG)
Regular (outlined) file	`ic_fluent_classification_24_regular.svg`
Filled file	`ic_fluent_classification_24_filled.svg`
React components	`Classification24Regular, Classification24Filled`
License	MIT (© Microsoft Corporation)

Keywords

stamp classification sensitive