Document Flowchart icon
Used to represent flowchart file types and actions. The Document Flowchart 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 Document Flowchart 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 { DocumentFlowchart24Regular, DocumentFlowchart24Filled } from "@fluentui/react-icons";
export function Example() {
return <DocumentFlowchart24Regular aria-label="Document Flowchart" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_document_flowchart_24_regular.svg" width="24" height="24" alt="Document Flowchart"> 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="M6.5 8.25C6.5 7.83579 6.83579 7.5 7.25 7.5H9.75C10.1642 7.5 10.5 7.83579 10.5 8.25V10.75C10.5 11.1642 10.1642 11.5 9.75 11.5H9.25V14.1893L10.8107 15.75H13.5V15.25C13.5 14.8358 13.8358 14.5 14.25 14.5H16.75C17.1642 14.5 17.5 14.8358 17.5 15.25V17.75C17.5 18.1642 17.1642 18.5 16.75 18.5H14.25C13.8358 18.5 13.5 18.1642 13.5 17.75V17.25H10.8107L9.03033 19.0303C8.73744 19.3232 8.26256 19.3232 7.96967 19.0303L5.96967 17.0303C5.67678 16.7374 5.67678 16.2626 5.96967 15.9697L7.75 14.1893V11.5H7.25C6.83579 11.5 6.5 11.1642 6.5 10.75V8.25ZM19.414 8.414L13.585 2.586C13.2277 2.22867 12.6729 2 12.172 2H6C4.896 2 4 2.896 4 4V20C4 21.104 4.896 22 6 22H18C19.104 22 20 21.104 20 20V9.828C20 9.298 19.789 8.789 19.414 8.414ZM18.5 20C18.5 20.275 18.276 20.5 18 20.5H6C5.724 20.5 5.5 20.275 5.5 20V4C5.5 3.725 5.724 3.5 6 3.5H12V8C12 9.104 12.896 10 14 10H18.5V20ZM13.5 4.621L17.378 8.5H14C13.724 8.5 13.5 8.275 13.5 8V4.621Z" 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/document_flowchart_24_regular.svg";Details
| Name | Document Flowchart |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_document_flowchart_24_regular.svg |
| Filled file | ic_fluent_document_flowchart_24_filled.svg |
| React components | DocumentFlowchart24Regular, DocumentFlowchart24Filled |
| License | MIT (© Microsoft Corporation) |