Gentleface › Charts & data › venn-diagram

venn-diagram icon

Venn diagram: venn diagram, segment overlap. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

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="M10.062 3C10.989 3.012 11.847 3.262 12.635 3.751C13.423 4.24 14.029 4.897 14.451 5.723C14.817 6.438 15 7.197 15 8C15 8.803 14.817 9.562 14.451 10.277C14.029 11.103 13.423 11.76 12.635 12.249C11.847 12.738 10.989 12.988 10.062 13C9.341 13.009 8.654 12.87 8 12.583C7.346 12.87 6.659 13.009 5.938 13C5.011 12.988 4.153 12.738 3.365 12.249C2.577 11.76 1.971 11.103 1.549 10.277C1.183 9.562 1 8.803 1 8C1 7.197 1.183 6.438 1.549 5.723C1.971 4.897 2.577 4.24 3.365 3.751C4.153 3.262 5.011 3.012 5.938 3C6.659 2.991 7.346 3.13 8 3.417C8.654 3.13 9.341 2.991 10.062 3ZM12.108 11.399C12.739 11.008 13.223 10.482 13.561 9.822C13.854 9.25 14 8.643 14 8C14 7.357 13.854 6.75 13.561 6.178C13.223 5.518 12.739 4.992 12.108 4.601C11.478 4.21 10.791 4.009 10.049 4C9.734 3.996 9.427 4.028 9.128 4.095C9.568 4.445 9.942 4.869 10.249 5.365C10.75 6.172 11 7.05 11 8C11 8.95 10.75 9.828 10.249 10.635C9.942 11.131 9.568 11.555 9.128 11.905C9.427 11.972 9.734 12.004 10.049 12C10.791 11.991 11.478 11.79 12.108 11.399ZM3.892 4.601C3.261 4.992 2.777 5.518 2.439 6.178C2.146 6.75 2 7.357 2 8C2 8.643 2.146 9.25 2.439 9.822C2.777 10.482 3.261 11.008 3.892 11.399C4.522 11.79 5.209 11.991 5.951 12C6.266 12.004 6.573 11.972 6.872 11.905C6.432 11.555 6.058 11.131 5.751 10.635C5.25 9.828 5 8.95 5 8C5 7.05 5.25 6.172 5.751 5.365C6.058 4.869 6.432 4.445 6.872 4.095C6.573 4.028 6.266 3.996 5.951 4C5.209 4.009 4.522 4.21 3.892 4.601ZM6 8C6 8.76 6.2 9.463 6.601 10.108C6.956 10.682 7.423 11.134 8 11.465C8.577 11.134 9.044 10.682 9.399 10.108C9.8 9.463 10 8.76 10 8C10 7.24 9.8 6.537 9.399 5.892C9.044 5.318 8.577 4.866 8 4.535C7.423 4.866 6.956 5.318 6.601 5.892C6.2 6.537 6 7.24 6 8Z"/></svg>

React

// Gentleface "venn-diagram" (line-round), MIT. https://gentleface.com/icons/venn-diagram
import type { SVGProps } from 'react';

export function VennDiagramIcon(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="M10.062 3C10.989 3.012 11.847 3.262 12.635 3.751C13.423 4.24 14.029 4.897 14.451 5.723C14.817 6.438 15 7.197 15 8C15 8.803 14.817 9.562 14.451 10.277C14.029 11.103 13.423 11.76 12.635 12.249C11.847 12.738 10.989 12.988 10.062 13C9.341 13.009 8.654 12.87 8 12.583C7.346 12.87 6.659 13.009 5.938 13C5.011 12.988 4.153 12.738 3.365 12.249C2.577 11.76 1.971 11.103 1.549 10.277C1.183 9.562 1 8.803 1 8C1 7.197 1.183 6.438 1.549 5.723C1.971 4.897 2.577 4.24 3.365 3.751C4.153 3.262 5.011 3.012 5.938 3C6.659 2.991 7.346 3.13 8 3.417C8.654 3.13 9.341 2.991 10.062 3ZM12.108 11.399C12.739 11.008 13.223 10.482 13.561 9.822C13.854 9.25 14 8.643 14 8C14 7.357 13.854 6.75 13.561 6.178C13.223 5.518 12.739 4.992 12.108 4.601C11.478 4.21 10.791 4.009 10.049 4C9.734 3.996 9.427 4.028 9.128 4.095C9.568 4.445 9.942 4.869 10.249 5.365C10.75 6.172 11 7.05 11 8C11 8.95 10.75 9.828 10.249 10.635C9.942 11.131 9.568 11.555 9.128 11.905C9.427 11.972 9.734 12.004 10.049 12C10.791 11.991 11.478 11.79 12.108 11.399ZM3.892 4.601C3.261 4.992 2.777 5.518 2.439 6.178C2.146 6.75 2 7.357 2 8C2 8.643 2.146 9.25 2.439 9.822C2.777 10.482 3.261 11.008 3.892 11.399C4.522 11.79 5.209 11.991 5.951 12C6.266 12.004 6.573 11.972 6.872 11.905C6.432 11.555 6.058 11.131 5.751 10.635C5.25 9.828 5 8.95 5 8C5 7.05 5.25 6.172 5.751 5.365C6.058 4.869 6.432 4.445 6.872 4.095C6.573 4.028 6.266 3.996 5.951 4C5.209 4.009 4.522 4.21 3.892 4.601ZM6 8C6 8.76 6.2 9.463 6.601 10.108C6.956 10.682 7.423 11.134 8 11.465C8.577 11.134 9.044 10.682 9.399 10.108C9.8 9.463 10 8.76 10 8C10 7.24 9.8 6.537 9.399 5.892C9.044 5.318 8.577 4.866 8 4.535C7.423 4.866 6.956 5.318 6.601 5.892C6.2 6.537 6 7.24 6 8Z" />
    </svg>
  );
}

Vue

Vue: see /icons/venn-diagram.md

Svelte

Svelte: see /icons/venn-diagram.md

HTML img

HTML img: see /icons/venn-diagram.md

CSS

CSS: see /icons/venn-diagram.md

Data URL

Data URL: see /icons/venn-diagram.md

Sprite

Sprite: see /icons/venn-diagram.md

SwiftUI

SwiftUI: see /icons/venn-diagram.md

Compose

Compose: see /icons/venn-diagram.md

Android XML

Android XML: see /icons/venn-diagram.md

Flutter

Flutter: see /icons/venn-diagram.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

venn diagram, segment overlap

Don’t confuse with

boolean-intersect: the shape operation in design tools

Tags

venn, diagram, overlap, intersection, sets, segments, compare, circles

Category

Charts & data

Component name

VennDiagramIcon

History

2026-10-16 added

Family 33

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

More charts & data icons

chart-legend flowchart gauge node-graph word-cloud · all charts & data icons

For agents

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

venn-diagram icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp