Fluent Icons

Diagram icon

Used as a top level diagram representation. The Diagram 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_diagram_24_regular.svg

Diagram icon in React

npm install @fluentui/react-icons

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

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

Diagram icon in SVG

npm install @fluentui/svg-icons

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

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

Diagram icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Diagram icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.diagram_24_regular)

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

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

Diagram 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_diagram_24_regular"></i>

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

Diagram icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_diagram_24_regular

Diagram icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .diagram24Regular)

Diagram 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 Diagram 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 { Diagram24Regular, Diagram24Filled } from "@fluentui/react-icons";

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

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

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="M2 5.25C2 3.45507 3.45507 2 5.25 2H15.75C17.5449 2 19 3.45507 19 5.25V11.2831C18.6263 11.099 18.2113 11 17.7848 11H17.5V5.25C17.5 4.2835 16.7165 3.5 15.75 3.5H5.25C4.2835 3.5 3.5 4.2835 3.5 5.25V16.75C3.5 17.7165 4.2835 18.5 5.25 18.5H8.62007L7.35691 20H5.25C3.45508 20 2 18.5449 2 16.75V5.25ZM6.75 6C6.33579 6 6 6.33579 6 6.75C6 7.16421 6.33579 7.5 6.75 7.5H14.25C14.6642 7.5 15 7.16421 15 6.75C15 6.33579 14.6642 6 14.25 6H6.75ZM7.06999 12.4336C7.19304 12.1691 7.45829 12 7.75 12H17.7848C18.301 12 18.7908 12.2279 19.1234 12.6228L22.8237 17.0169C23.0588 17.2961 23.0588 17.7039 22.8237 17.9831L19.1234 22.3772C18.7908 22.7721 18.301 23 17.7848 23H7.75C7.45829 23 7.19304 22.8309 7.06999 22.5664C6.94694 22.3019 6.98841 21.99 7.17632 21.7669L10.7695 17.5L7.17632 13.2331C6.98841 13.01 6.94694 12.6981 7.06999 12.4336ZM9.36208 13.5L12.3237 17.0169C12.5588 17.2961 12.5588 17.7039 12.3237 17.9831L9.36208 21.5H17.7848C17.8585 21.5 17.9285 21.4674 17.976 21.411L21.2695 17.5L17.976 13.589C17.9285 13.5326 17.8585 13.5 17.7848 13.5H9.36208ZM6.75 9C6.33579 9 6 9.33579 6 9.75C6 10.1642 6.33579 10.5 6.75 10.5H11.25C11.6642 10.5 12 10.1642 12 9.75C12 9.33579 11.6642 9 11.25 9H6.75Z" fill="currentColor"/></svg>

Details

NameDiagram
StylesRegular (outlined), Filled
Sizes20 px, 24 px
Regular (outlined) fileic_fluent_diagram_24_regular.svg
Filled fileic_fluent_diagram_24_filled.svg
React (Regular)Diagram20Regular, Diagram24Regular
React (Filled)Diagram20Filled, Diagram24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

datachartedit

Related icons

Calendar Data BarFlowchartFlowchart CircleGantt ChartAlign BottomAlign Center HorizontalAlign Center VerticalAlign End HorizontalAlign End VerticalAlign LeftAlign RightAlign Space Around Horizontal