gentleface

Gentleface › Charts & data › flowchart

flowchart icon

Flowchart: flowchart, process diagram, flow diagram, flow chart. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

Code line-round

SVG
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path 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"/></svg>
React
// Gentleface "flowchart" (line-round), MIT. https://gentleface.com/icons/flowchart
import type { SVGProps } from 'react';

export function FlowchartIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path 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" />
    </svg>
  );
}
Vue
Vue: see /icons/flowchart.md
Svelte
Svelte: see /icons/flowchart.md
HTML img
HTML img: see /icons/flowchart.md
CSS
CSS: see /icons/flowchart.md
Data URL
Data URL: see /icons/flowchart.md
Sprite
Sprite: see /icons/flowchart.md
SwiftUI
SwiftUI: see /icons/flowchart.md
Compose
Compose: see /icons/flowchart.md
Android XML
Android XML: see /icons/flowchart.md
Flutter
Flutter: see /icons/flowchart.md

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. 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. More in how to use.

Meaning

Use it for
flowchart, process diagram, flow diagram, flow chart
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)
Tags
flowchart, flow, diagram, process, decision, steps, logic, algorithm
Category
Charts & data
Component name
FlowchartIcon
History
  • added

More charts & data icons

activity activity-search area-chart area-chart-stacked bar-chart bar-chart-clock bar-chart-grouped bar-chart-grouped-filled bar-chart-horizontal bar-chart-off bar-chart-pencil bar-chart-plus bar-chart-search bar-chart-sparkle bar-chart-stacked bubble-chart · all charts & data icons

For agents

Metadata: /icons/flowchart.json · Markdown: /icons/flowchart.md · SVG: https://gentleface.com/svg/{style}/16/flowchart.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/flowchart.png

Feedback