Fluent Icons

Diversity icon

Used to represent the wide spectrum of life. The Diversity icon is part of Microsoft's Fluent UI System Icons, available here in regular, filled and color styles in 5 sizes from 16 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
Diversity Color

Color

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

Diversity icon in React

npm install @fluentui/react-icons

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

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

Diversity icon in SVG

npm install @fluentui/svg-icons

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

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

Diversity icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Diversity icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.diversity_24_regular)

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

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

Diversity 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_diversity_24_regular"></i>

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

Diversity icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_diversity_24_regular

Diversity icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .diversity24Regular)

Diversity 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 Diversity 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 { Diversity24Regular, Diversity24Filled } from "@fluentui/react-icons";

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

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

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="M13 5.25C13 4.00736 14.0074 3 15.25 3H18.75C19.9926 3 21 4.00736 21 5.25V8.75C21 9.99264 19.9926 11 18.75 11H15.25C14.0074 11 13 9.99264 13 8.75V5.25ZM15.25 4.5C14.8358 4.5 14.5 4.83579 14.5 5.25V8.75C14.5 9.16421 14.8358 9.5 15.25 9.5H18.75C19.1642 9.5 19.5 9.16421 19.5 8.75V5.25C19.5 4.83579 19.1642 4.5 18.75 4.5H15.25ZM8.44969 3.89843C7.84719 2.70052 6.15281 2.70052 5.55031 3.89843L3.17842 8.61429C2.629 9.70668 3.41489 11 4.62811 11L9.37189 11C10.5851 11 11.371 9.70668 10.8216 8.61429L8.44969 3.89843ZM6.89036 4.57242C6.91066 4.53207 6.92838 4.52044 6.93681 4.51545C6.95022 4.50751 6.97195 4.5 7 4.5C7.02805 4.5 7.04978 4.50751 7.06318 4.51545C7.07161 4.52044 7.08934 4.53207 7.10964 4.57242L9.48152 9.28828C9.49857 9.32217 9.50082 9.34594 9.4998 9.36416C9.49856 9.38629 9.49124 9.4125 9.47584 9.43785C9.46044 9.46319 9.44231 9.47894 9.42831 9.48716C9.41795 9.49324 9.4027 9.5 9.37189 9.5L4.62811 9.5C4.5973 9.5 4.58205 9.49324 4.57169 9.48716C4.55769 9.47894 4.53956 9.46319 4.52416 9.43785C4.50876 9.4125 4.50144 9.38629 4.5002 9.36416C4.49918 9.34594 4.50143 9.32217 4.51848 9.28829L6.89036 4.57242ZM4.5 17C4.5 15.6193 5.61929 14.5 7 14.5C8.38071 14.5 9.5 15.6193 9.5 17C9.5 18.3807 8.38071 19.5 7 19.5C5.61929 19.5 4.5 18.3807 4.5 17ZM7 13C4.79086 13 3 14.7909 3 17C3 19.2091 4.79086 21 7 21C9.20914 21 11 19.2091 11 17C11 14.7909 9.20914 13 7 13ZM17.625 12.7448C17.2382 12.5215 16.7618 12.5215 16.375 12.7448L13.6274 14.3311C13.2407 14.5544 13.0024 14.9671 13.0024 15.4137V18.5863C13.0024 19.0329 13.2407 19.4456 13.6274 19.6689L16.375 21.2552C16.7618 21.4785 17.2382 21.4785 17.625 21.2552L20.3726 19.6689C20.7593 19.4456 20.9976 19.0329 20.9976 18.5863V15.4137C20.9976 14.9671 20.7593 14.5544 20.3726 14.3311L17.625 12.7448ZM14.5024 15.558L17 14.116L19.4976 15.558V18.442L17 19.884L14.5024 18.442V15.558Z" fill="currentColor"/></svg>

Details

NameDiversity
StylesRegular (outlined), Filled, Color
Sizes16 px, 20 px, 24 px, 28 px, 48 px
Regular (outlined) fileic_fluent_diversity_24_regular.svg
Filled fileic_fluent_diversity_24_filled.svg
Color fileic_fluent_diversity_24_color.svg
React (Regular)Diversity16Regular, Diversity20Regular, Diversity24Regular, Diversity28Regular, Diversity48Regular
React (Filled)Diversity16Filled, Diversity20Filled, Diversity24Filled, Diversity28Filled, Diversity48Filled
React (Color)Diversity16Color, Diversity20Color, Diversity24Color, Diversity28Color, Diversity48Color
LicenseMIT (© Microsoft Corporation)

Keywords

Related icons

Flag PrideFlag Pride Intersex Inclusive ProgressFlag Pride PhiladelphiaFlag Pride ProgressWindow FingerprintDismiss Square MultipleDivider ShortDismiss SquareDivider TallDismiss CircleDockDismiss