Diagram icon

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" />;
}

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>

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/diagram_24_regular.svg";

Details

Keywords

datachartedit