# flowchart icon Flowchart. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/flowchart - Category: Charts & data - Use it for: flowchart, process diagram, flow diagram, flow chart - Tags: flowchart, flow, diagram, process, decision, steps, logic, algorithm - Component name: FlowchartIcon - Added: 2026-10-16 ## Alternatives - `workflow`: an automated workflow or CI pipeline (workflow) - `sitemap`: a page hierarchy (sitemap) - `node-graph`: a network of related nodes (node-graph) ## Also fits - mind map: a process with decisions (flowchart) - sankey diagram: a process with decisions (flowchart) - sitemap: a process with decisions (flowchart) - workflow: a diagram of a process with decisions (process-diagram) ## Files Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. - line-round: https://gentleface.com/svg/line-round/16/flowchart.svg · PNG https://gentleface.com/png/line-round/16/flowchart.png · https://gentleface.com/png/line-round/32/flowchart.png · https://gentleface.com/png/line-round/48/flowchart.png - line-soft: https://gentleface.com/svg/line-soft/16/flowchart.svg · PNG https://gentleface.com/png/line-soft/16/flowchart.png · https://gentleface.com/png/line-soft/32/flowchart.png · https://gentleface.com/png/line-soft/48/flowchart.png - line-sharp: https://gentleface.com/svg/line-sharp/16/flowchart.svg · PNG https://gentleface.com/png/line-sharp/16/flowchart.png · https://gentleface.com/png/line-sharp/32/flowchart.png · https://gentleface.com/png/line-sharp/48/flowchart.png - solid-round: https://gentleface.com/svg/solid-round/16/flowchart.svg · PNG https://gentleface.com/png/solid-round/16/flowchart.png · https://gentleface.com/png/solid-round/32/flowchart.png · https://gentleface.com/png/solid-round/48/flowchart.png - solid-soft: https://gentleface.com/svg/solid-soft/16/flowchart.svg · PNG https://gentleface.com/png/solid-soft/16/flowchart.png · https://gentleface.com/png/solid-soft/32/flowchart.png · https://gentleface.com/png/solid-soft/48/flowchart.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/flowchart.svg · PNG https://gentleface.com/png/solid-sharp/16/flowchart.png · https://gentleface.com/png/solid-sharp/32/flowchart.png · https://gentleface.com/png/solid-sharp/48/flowchart.png The SVG of every style: https://gentleface.com/icons/flowchart.json (`svg`). ## Code (line-round) The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. For another style, take its SVG from the JSON and swap the path `d`. ### SVG ```svg ``` ### React ```tsx // Gentleface "flowchart" (line-round), MIT. https://gentleface.com/icons/flowchart import type { SVGProps } from 'react'; export function FlowchartIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "flowchart" (line-round), MIT. https://gentleface.com/icons/flowchart. Takes the text color. */ .icon-flowchart { display: inline-block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M6.707 1.293C6.902 1.488 7 1.724 7 2L7 5C7 5.276 6.902 5.512 6.707 5.707C6.512 5.902 6.276 6 6 6L5 6L5 8.338C5.073 8.381 5.143 8.435 5.207 8.5L7.5 10.793C7.565 10.858 7.619 10.927 7.662 11L10 11L10 10C10 9.724 10.098 9.488 10.293 9.293C10.488 9.098 10.724 9 11 9L14 9C14.276 9 14.512 9.098 14.707 9.293C14.902 9.488 15 9.724 15 10L15 13C15 13.276 14.902 13.512 14.707 13.707C14.512 13.902 14.276 14 14 14L11 14C10.724 14 10.488 13.902 10.293 13.707C10.098 13.512 10 13.276 10 13L10 12L7.662 12C7.619 12.073 7.565 12.142 7.5 12.207L5.207 14.5C5.012 14.695 4.776 14.793 4.5 14.793C4.224 14.793 3.988 14.695 3.793 14.5L1.5 12.207C1.305 12.012 1.207 11.776 1.207 11.5C1.207 11.224 1.305 10.988 1.5 10.793L3.793 8.5C3.857 8.435 3.927 8.381 4 8.338L4 6L3 6C2.724 6 2.488 5.902 2.293 5.707C2.098 5.512 2 5.276 2 5L2 2C2 1.724 2.098 1.488 2.293 1.293C2.488 1.098 2.724 1 3 1L6 1C6.276 1 6.512 1.098 6.707 1.293ZM3 5L6 5L6 2L3 2L3 5ZM4.5 13.793L6.793 11.5L4.5 9.207L2.207 11.5L4.5 13.793ZM11 10L11 13L14 13L14 10L11 10Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M6.707 1.293C6.902 1.488 7 1.724 7 2L7 5C7 5.276 6.902 5.512 6.707 5.707C6.512 5.902 6.276 6 6 6L5 6L5 8.338C5.073 8.381 5.143 8.435 5.207 8.5L7.5 10.793C7.565 10.858 7.619 10.927 7.662 11L10 11L10 10C10 9.724 10.098 9.488 10.293 9.293C10.488 9.098 10.724 9 11 9L14 9C14.276 9 14.512 9.098 14.707 9.293C14.902 9.488 15 9.724 15 10L15 13C15 13.276 14.902 13.512 14.707 13.707C14.512 13.902 14.276 14 14 14L11 14C10.724 14 10.488 13.902 10.293 13.707C10.098 13.512 10 13.276 10 13L10 12L7.662 12C7.619 12.073 7.565 12.142 7.5 12.207L5.207 14.5C5.012 14.695 4.776 14.793 4.5 14.793C4.224 14.793 3.988 14.695 3.793 14.5L1.5 12.207C1.305 12.012 1.207 11.776 1.207 11.5C1.207 11.224 1.305 10.988 1.5 10.793L3.793 8.5C3.857 8.435 3.927 8.381 4 8.338L4 6L3 6C2.724 6 2.488 5.902 2.293 5.707C2.098 5.512 2 5.276 2 5L2 2C2 1.724 2.098 1.488 2.293 1.293C2.488 1.098 2.724 1 3 1L6 1C6.276 1 6.512 1.098 6.707 1.293ZM3 5L6 5L6 2L3 2L3 5ZM4.5 13.793L6.793 11.5L4.5 9.207L2.207 11.5L4.5 13.793ZM11 10L11 13L14 13L14 10L11 10Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat; } ``` ### Data URL ```text data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M6.707 1.293C6.902 1.488 7 1.724 7 2L7 5C7 5.276 6.902 5.512 6.707 5.707C6.512 5.902 6.276 6 6 6L5 6L5 8.338C5.073 8.381 5.143 8.435 5.207 8.5L7.5 10.793C7.565 10.858 7.619 10.927 7.662 11L10 11L10 10C10 9.724 10.098 9.488 10.293 9.293C10.488 9.098 10.724 9 11 9L14 9C14.276 9 14.512 9.098 14.707 9.293C14.902 9.488 15 9.724 15 10L15 13C15 13.276 14.902 13.512 14.707 13.707C14.512 13.902 14.276 14 14 14L11 14C10.724 14 10.488 13.902 10.293 13.707C10.098 13.512 10 13.276 10 13L10 12L7.662 12C7.619 12.073 7.565 12.142 7.5 12.207L5.207 14.5C5.012 14.695 4.776 14.793 4.5 14.793C4.224 14.793 3.988 14.695 3.793 14.5L1.5 12.207C1.305 12.012 1.207 11.776 1.207 11.5C1.207 11.224 1.305 10.988 1.5 10.793L3.793 8.5C3.857 8.435 3.927 8.381 4 8.338L4 6L3 6C2.724 6 2.488 5.902 2.293 5.707C2.098 5.512 2 5.276 2 5L2 2C2 1.724 2.098 1.488 2.293 1.293C2.488 1.098 2.724 1 3 1L6 1C6.276 1 6.512 1.098 6.707 1.293ZM3 5L6 5L6 2L3 2L3 5ZM4.5 13.793L6.793 11.5L4.5 9.207L2.207 11.5L4.5 13.793ZM11 10L11 13L14 13L14 10L11 10Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "flowchart" (line-round), MIT. https://gentleface.com/icons/flowchart import SwiftUI struct FlowchartIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 6.707, y: 1.293)) p.addCurve(to: CGPoint(x: 7, y: 2), control1: CGPoint(x: 6.902, y: 1.488), control2: CGPoint(x: 7, y: 1.724)) p.addLine(to: CGPoint(x: 7, y: 5)) p.addCurve(to: CGPoint(x: 6.707, y: 5.707), control1: CGPoint(x: 7, y: 5.276), control2: CGPoint(x: 6.902, y: 5.512)) p.addCurve(to: CGPoint(x: 6, y: 6), control1: CGPoint(x: 6.512, y: 5.902), control2: CGPoint(x: 6.276, y: 6)) p.addLine(to: CGPoint(x: 5, y: 6)) p.addLine(to: CGPoint(x: 5, y: 8.338)) p.addCurve(to: CGPoint(x: 5.207, y: 8.5), control1: CGPoint(x: 5.073, y: 8.381), control2: CGPoint(x: 5.143, y: 8.435)) p.addLine(to: CGPoint(x: 7.5, y: 10.793)) p.addCurve(to: CGPoint(x: 7.662, y: 11), control1: CGPoint(x: 7.565, y: 10.858), control2: CGPoint(x: 7.619, y: 10.927)) p.addLine(to: CGPoint(x: 10, y: 11)) p.addLine(to: CGPoint(x: 10, y: 10)) p.addCurve(to: CGPoint(x: 10.293, y: 9.293), control1: CGPoint(x: 10, y: 9.724), control2: CGPoint(x: 10.098, y: 9.488)) p.addCurve(to: CGPoint(x: 11, y: 9), control1: CGPoint(x: 10.488, y: 9.098), control2: CGPoint(x: 10.724, y: 9)) p.addLine(to: CGPoint(x: 14, y: 9)) p.addCurve(to: CGPoint(x: 14.707, y: 9.293), control1: CGPoint(x: 14.276, y: 9), control2: CGPoint(x: 14.512, y: 9.098)) p.addCurve(to: CGPoint(x: 15, y: 10), control1: CGPoint(x: 14.902, y: 9.488), control2: CGPoint(x: 15, y: 9.724)) p.addLine(to: CGPoint(x: 15, y: 13)) p.addCurve(to: CGPoint(x: 14.707, y: 13.707), control1: CGPoint(x: 15, y: 13.276), control2: CGPoint(x: 14.902, y: 13.512)) p.addCurve(to: CGPoint(x: 14, y: 14), control1: CGPoint(x: 14.512, y: 13.902), control2: CGPoint(x: 14.276, y: 14)) p.addLine(to: CGPoint(x: 11, y: 14)) p.addCurve(to: CGPoint(x: 10.293, y: 13.707), control1: CGPoint(x: 10.724, y: 14), control2: CGPoint(x: 10.488, y: 13.902)) p.addCurve(to: CGPoint(x: 10, y: 13), control1: CGPoint(x: 10.098, y: 13.512), control2: CGPoint(x: 10, y: 13.276)) p.addLine(to: CGPoint(x: 10, y: 12)) p.addLine(to: CGPoint(x: 7.662, y: 12)) p.addCurve(to: CGPoint(x: 7.5, y: 12.207), control1: CGPoint(x: 7.619, y: 12.073), control2: CGPoint(x: 7.565, y: 12.142)) p.addLine(to: CGPoint(x: 5.207, y: 14.5)) p.addCurve(to: CGPoint(x: 4.5, y: 14.793), control1: CGPoint(x: 5.012, y: 14.695), control2: CGPoint(x: 4.776, y: 14.793)) p.addCurve(to: CGPoint(x: 3.793, y: 14.5), control1: CGPoint(x: 4.224, y: 14.793), control2: CGPoint(x: 3.988, y: 14.695)) p.addLine(to: CGPoint(x: 1.5, y: 12.207)) p.addCurve(to: CGPoint(x: 1.207, y: 11.5), control1: CGPoint(x: 1.305, y: 12.012), control2: CGPoint(x: 1.207, y: 11.776)) p.addCurve(to: CGPoint(x: 1.5, y: 10.793), control1: CGPoint(x: 1.207, y: 11.224), control2: CGPoint(x: 1.305, y: 10.988)) p.addLine(to: CGPoint(x: 3.793, y: 8.5)) p.addCurve(to: CGPoint(x: 4, y: 8.338), control1: CGPoint(x: 3.857, y: 8.435), control2: CGPoint(x: 3.927, y: 8.381)) p.addLine(to: CGPoint(x: 4, y: 6)) p.addLine(to: CGPoint(x: 3, y: 6)) p.addCurve(to: CGPoint(x: 2.293, y: 5.707), control1: CGPoint(x: 2.724, y: 6), control2: CGPoint(x: 2.488, y: 5.902)) p.addCurve(to: CGPoint(x: 2, y: 5), control1: CGPoint(x: 2.098, y: 5.512), control2: CGPoint(x: 2, y: 5.276)) p.addLine(to: CGPoint(x: 2, y: 2)) p.addCurve(to: CGPoint(x: 2.293, y: 1.293), control1: CGPoint(x: 2, y: 1.724), control2: CGPoint(x: 2.098, y: 1.488)) p.addCurve(to: CGPoint(x: 3, y: 1), control1: CGPoint(x: 2.488, y: 1.098), control2: CGPoint(x: 2.724, y: 1)) p.addLine(to: CGPoint(x: 6, y: 1)) p.addCurve(to: CGPoint(x: 6.707, y: 1.293), control1: CGPoint(x: 6.276, y: 1), control2: CGPoint(x: 6.512, y: 1.098)) p.closeSubpath() p.move(to: CGPoint(x: 3, y: 5)) p.addLine(to: CGPoint(x: 6, y: 5)) p.addLine(to: CGPoint(x: 6, y: 2)) p.addLine(to: CGPoint(x: 3, y: 2)) p.addLine(to: CGPoint(x: 3, y: 5)) p.closeSubpath() p.move(to: CGPoint(x: 4.5, y: 13.793)) p.addLine(to: CGPoint(x: 6.793, y: 11.5)) p.addLine(to: CGPoint(x: 4.5, y: 9.207)) p.addLine(to: CGPoint(x: 2.207, y: 11.5)) p.addLine(to: CGPoint(x: 4.5, y: 13.793)) p.closeSubpath() p.move(to: CGPoint(x: 11, y: 10)) p.addLine(to: CGPoint(x: 11, y: 13)) p.addLine(to: CGPoint(x: 14, y: 13)) p.addLine(to: CGPoint(x: 14, y: 10)) p.addLine(to: CGPoint(x: 11, y: 10)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // FlowchartIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "flowchart" (line-round), MIT. https://gentleface.com/icons/flowchart import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.graphics.vector.addPathNodes import androidx.compose.ui.unit.dp val FlowchartIcon: ImageVector by lazy { ImageVector.Builder( name = "flowchart", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M6.707 1.293C6.902 1.488 7 1.724 7 2L7 5C7 5.276 6.902 5.512 6.707 5.707C6.512 5.902 6.276 6 6 6L5 6L5 8.338C5.073 8.381 5.143 8.435 5.207 8.5L7.5 10.793C7.565 10.858 7.619 10.927 7.662 11L10 11L10 10C10 9.724 10.098 9.488 10.293 9.293C10.488 9.098 10.724 9 11 9L14 9C14.276 9 14.512 9.098 14.707 9.293C14.902 9.488 15 9.724 15 10L15 13C15 13.276 14.902 13.512 14.707 13.707C14.512 13.902 14.276 14 14 14L11 14C10.724 14 10.488 13.902 10.293 13.707C10.098 13.512 10 13.276 10 13L10 12L7.662 12C7.619 12.073 7.565 12.142 7.5 12.207L5.207 14.5C5.012 14.695 4.776 14.793 4.5 14.793C4.224 14.793 3.988 14.695 3.793 14.5L1.5 12.207C1.305 12.012 1.207 11.776 1.207 11.5C1.207 11.224 1.305 10.988 1.5 10.793L3.793 8.5C3.857 8.435 3.927 8.381 4 8.338L4 6L3 6C2.724 6 2.488 5.902 2.293 5.707C2.098 5.512 2 5.276 2 5L2 2C2 1.724 2.098 1.488 2.293 1.293C2.488 1.098 2.724 1 3 1L6 1C6.276 1 6.512 1.098 6.707 1.293ZM3 5L6 5L6 2L3 2L3 5ZM4.5 13.793L6.793 11.5L4.5 9.207L2.207 11.5L4.5 13.793ZM11 10L11 13L14 13L14 10L11 10Z"), fill = SolidColor(Color.Black), ).build() } // Icon(FlowchartIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "flowchart" (line-round), MIT. https://gentleface.com/icons/flowchart import 'package:flutter/widgets.dart'; class FlowchartIcon extends StatelessWidget { const FlowchartIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _FlowchartIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _FlowchartIconPainter extends CustomPainter { _FlowchartIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(6.707, 1.293) ..cubicTo(6.902, 1.488, 7, 1.724, 7, 2) ..lineTo(7, 5) ..cubicTo(7, 5.276, 6.902, 5.512, 6.707, 5.707) ..cubicTo(6.512, 5.902, 6.276, 6, 6, 6) ..lineTo(5, 6) ..lineTo(5, 8.338) ..cubicTo(5.073, 8.381, 5.143, 8.435, 5.207, 8.5) ..lineTo(7.5, 10.793) ..cubicTo(7.565, 10.858, 7.619, 10.927, 7.662, 11) ..lineTo(10, 11) ..lineTo(10, 10) ..cubicTo(10, 9.724, 10.098, 9.488, 10.293, 9.293) ..cubicTo(10.488, 9.098, 10.724, 9, 11, 9) ..lineTo(14, 9) ..cubicTo(14.276, 9, 14.512, 9.098, 14.707, 9.293) ..cubicTo(14.902, 9.488, 15, 9.724, 15, 10) ..lineTo(15, 13) ..cubicTo(15, 13.276, 14.902, 13.512, 14.707, 13.707) ..cubicTo(14.512, 13.902, 14.276, 14, 14, 14) ..lineTo(11, 14) ..cubicTo(10.724, 14, 10.488, 13.902, 10.293, 13.707) ..cubicTo(10.098, 13.512, 10, 13.276, 10, 13) ..lineTo(10, 12) ..lineTo(7.662, 12) ..cubicTo(7.619, 12.073, 7.565, 12.142, 7.5, 12.207) ..lineTo(5.207, 14.5) ..cubicTo(5.012, 14.695, 4.776, 14.793, 4.5, 14.793) ..cubicTo(4.224, 14.793, 3.988, 14.695, 3.793, 14.5) ..lineTo(1.5, 12.207) ..cubicTo(1.305, 12.012, 1.207, 11.776, 1.207, 11.5) ..cubicTo(1.207, 11.224, 1.305, 10.988, 1.5, 10.793) ..lineTo(3.793, 8.5) ..cubicTo(3.857, 8.435, 3.927, 8.381, 4, 8.338) ..lineTo(4, 6) ..lineTo(3, 6) ..cubicTo(2.724, 6, 2.488, 5.902, 2.293, 5.707) ..cubicTo(2.098, 5.512, 2, 5.276, 2, 5) ..lineTo(2, 2) ..cubicTo(2, 1.724, 2.098, 1.488, 2.293, 1.293) ..cubicTo(2.488, 1.098, 2.724, 1, 3, 1) ..lineTo(6, 1) ..cubicTo(6.276, 1, 6.512, 1.098, 6.707, 1.293) ..close() ..moveTo(3, 5) ..lineTo(6, 5) ..lineTo(6, 2) ..lineTo(3, 2) ..lineTo(3, 5) ..close() ..moveTo(4.5, 13.793) ..lineTo(6.793, 11.5) ..lineTo(4.5, 9.207) ..lineTo(2.207, 11.5) ..lineTo(4.5, 13.793) ..close() ..moveTo(11, 10) ..lineTo(11, 13) ..lineTo(14, 13) ..lineTo(14, 10) ..lineTo(11, 10) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_FlowchartIconPainter old) => old.color != color; } ```