# circle-three-points icon Circle three points. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/circle-three-points - Category: Design - Use it for: three point circle, circle through three points - Tags: circle, three points, 3 point circle, cad, sketch, construction, geometry, draw circle - Family: circle - Component name: CircleThreePointsIcon - Added: 2026-11-07 - Since: version 0.6.0 - npm: `import { CircleThreePointsIcon } from '@gentleface/react';` (@gentleface/react 0.6.0) - Changed: 2026-11-09 (20 px drawn, 24 px drawn) ## Files Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. - line-round: https://gentleface.com/svg/line-round/16/circle-three-points.svg · PNG https://gentleface.com/png/line-round/16/circle-three-points.png · https://gentleface.com/png/line-round/32/circle-three-points.png · https://gentleface.com/png/line-round/48/circle-three-points.png - line-soft: https://gentleface.com/svg/line-soft/16/circle-three-points.svg · PNG https://gentleface.com/png/line-soft/16/circle-three-points.png · https://gentleface.com/png/line-soft/32/circle-three-points.png · https://gentleface.com/png/line-soft/48/circle-three-points.png - line-sharp: https://gentleface.com/svg/line-sharp/16/circle-three-points.svg · PNG https://gentleface.com/png/line-sharp/16/circle-three-points.png · https://gentleface.com/png/line-sharp/32/circle-three-points.png · https://gentleface.com/png/line-sharp/48/circle-three-points.png - solid-round: https://gentleface.com/svg/solid-round/16/circle-three-points.svg · PNG https://gentleface.com/png/solid-round/16/circle-three-points.png · https://gentleface.com/png/solid-round/32/circle-three-points.png · https://gentleface.com/png/solid-round/48/circle-three-points.png - solid-soft: https://gentleface.com/svg/solid-soft/16/circle-three-points.svg · PNG https://gentleface.com/png/solid-soft/16/circle-three-points.png · https://gentleface.com/png/solid-soft/32/circle-three-points.png · https://gentleface.com/png/solid-soft/48/circle-three-points.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/circle-three-points.svg · PNG https://gentleface.com/png/solid-sharp/16/circle-three-points.png · https://gentleface.com/png/solid-sharp/32/circle-three-points.png · https://gentleface.com/png/solid-sharp/48/circle-three-points.png The SVG of every style: https://gentleface.com/icons/circle-three-points.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 "circle-three-points" (line-round), MIT. https://gentleface.com/icons/circle-three-points import type { SVGProps } from 'react'; export function CircleThreePointsIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "circle-three-points" (line-round), MIT. https://gentleface.com/icons/circle-three-points. Takes the text color. */ .icon-circle-three-points { 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='M1 6L1 3L2.81 3C2.841 2.968 2.872 2.936 2.904 2.904C3.538 2.269 4.273 1.787 5.107 1.456C5.876 1.152 6.673 1 7.5 1C8.327 1 9.124 1.152 9.893 1.456C10.727 1.787 11.462 2.269 12.096 2.904C12.731 3.538 13.213 4.273 13.544 5.107C13.66 5.401 13.754 5.698 13.826 6L15 6L15 9L13.826 9C13.754 9.302 13.66 9.599 13.544 9.893C13.213 10.727 12.731 11.462 12.096 12.096C11.462 12.731 10.727 13.213 9.893 13.544C9.124 13.848 8.327 14 7.5 14C6.989 14 6.489 13.942 6 13.826L6 14L3 14L3 12.19C2.968 12.159 2.936 12.128 2.904 12.096C2.269 11.462 1.787 10.727 1.456 9.893C1.152 9.124 1 8.327 1 7.5C1 6.989 1.058 6.489 1.174 6L1 6ZM6 11L6 12.792C6.487 12.931 6.987 13 7.5 13C8.199 13 8.874 12.871 9.525 12.614C10.231 12.334 10.852 11.926 11.389 11.389C11.926 10.852 12.334 10.231 12.614 9.525C12.682 9.351 12.742 9.177 12.792 9L12 9L12 6L12.792 6C12.742 5.823 12.682 5.649 12.614 5.475C12.334 4.769 11.926 4.148 11.389 3.611C10.852 3.074 10.231 2.666 9.525 2.386C8.874 2.129 8.199 2 7.5 2C6.801 2 6.126 2.129 5.475 2.386C4.934 2.601 4.442 2.891 4 3.257L4 6L2.208 6C2.069 6.487 2 6.987 2 7.5C2 8.199 2.129 8.874 2.386 9.525C2.601 10.066 2.891 10.558 3.257 11L6 11Z'/%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='M1 6L1 3L2.81 3C2.841 2.968 2.872 2.936 2.904 2.904C3.538 2.269 4.273 1.787 5.107 1.456C5.876 1.152 6.673 1 7.5 1C8.327 1 9.124 1.152 9.893 1.456C10.727 1.787 11.462 2.269 12.096 2.904C12.731 3.538 13.213 4.273 13.544 5.107C13.66 5.401 13.754 5.698 13.826 6L15 6L15 9L13.826 9C13.754 9.302 13.66 9.599 13.544 9.893C13.213 10.727 12.731 11.462 12.096 12.096C11.462 12.731 10.727 13.213 9.893 13.544C9.124 13.848 8.327 14 7.5 14C6.989 14 6.489 13.942 6 13.826L6 14L3 14L3 12.19C2.968 12.159 2.936 12.128 2.904 12.096C2.269 11.462 1.787 10.727 1.456 9.893C1.152 9.124 1 8.327 1 7.5C1 6.989 1.058 6.489 1.174 6L1 6ZM6 11L6 12.792C6.487 12.931 6.987 13 7.5 13C8.199 13 8.874 12.871 9.525 12.614C10.231 12.334 10.852 11.926 11.389 11.389C11.926 10.852 12.334 10.231 12.614 9.525C12.682 9.351 12.742 9.177 12.792 9L12 9L12 6L12.792 6C12.742 5.823 12.682 5.649 12.614 5.475C12.334 4.769 11.926 4.148 11.389 3.611C10.852 3.074 10.231 2.666 9.525 2.386C8.874 2.129 8.199 2 7.5 2C6.801 2 6.126 2.129 5.475 2.386C4.934 2.601 4.442 2.891 4 3.257L4 6L2.208 6C2.069 6.487 2 6.987 2 7.5C2 8.199 2.129 8.874 2.386 9.525C2.601 10.066 2.891 10.558 3.257 11L6 11Z'/%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='M1 6L1 3L2.81 3C2.841 2.968 2.872 2.936 2.904 2.904C3.538 2.269 4.273 1.787 5.107 1.456C5.876 1.152 6.673 1 7.5 1C8.327 1 9.124 1.152 9.893 1.456C10.727 1.787 11.462 2.269 12.096 2.904C12.731 3.538 13.213 4.273 13.544 5.107C13.66 5.401 13.754 5.698 13.826 6L15 6L15 9L13.826 9C13.754 9.302 13.66 9.599 13.544 9.893C13.213 10.727 12.731 11.462 12.096 12.096C11.462 12.731 10.727 13.213 9.893 13.544C9.124 13.848 8.327 14 7.5 14C6.989 14 6.489 13.942 6 13.826L6 14L3 14L3 12.19C2.968 12.159 2.936 12.128 2.904 12.096C2.269 11.462 1.787 10.727 1.456 9.893C1.152 9.124 1 8.327 1 7.5C1 6.989 1.058 6.489 1.174 6L1 6ZM6 11L6 12.792C6.487 12.931 6.987 13 7.5 13C8.199 13 8.874 12.871 9.525 12.614C10.231 12.334 10.852 11.926 11.389 11.389C11.926 10.852 12.334 10.231 12.614 9.525C12.682 9.351 12.742 9.177 12.792 9L12 9L12 6L12.792 6C12.742 5.823 12.682 5.649 12.614 5.475C12.334 4.769 11.926 4.148 11.389 3.611C10.852 3.074 10.231 2.666 9.525 2.386C8.874 2.129 8.199 2 7.5 2C6.801 2 6.126 2.129 5.475 2.386C4.934 2.601 4.442 2.891 4 3.257L4 6L2.208 6C2.069 6.487 2 6.987 2 7.5C2 8.199 2.129 8.874 2.386 9.525C2.601 10.066 2.891 10.558 3.257 11L6 11Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "circle-three-points" (line-round), MIT. https://gentleface.com/icons/circle-three-points import SwiftUI struct CircleThreePointsIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 1, y: 6)) p.addLine(to: CGPoint(x: 1, y: 3)) p.addLine(to: CGPoint(x: 2.81, y: 3)) p.addCurve(to: CGPoint(x: 2.904, y: 2.904), control1: CGPoint(x: 2.841, y: 2.968), control2: CGPoint(x: 2.872, y: 2.936)) p.addCurve(to: CGPoint(x: 5.107, y: 1.456), control1: CGPoint(x: 3.538, y: 2.269), control2: CGPoint(x: 4.273, y: 1.787)) p.addCurve(to: CGPoint(x: 7.5, y: 1), control1: CGPoint(x: 5.876, y: 1.152), control2: CGPoint(x: 6.673, y: 1)) p.addCurve(to: CGPoint(x: 9.893, y: 1.456), control1: CGPoint(x: 8.327, y: 1), control2: CGPoint(x: 9.124, y: 1.152)) p.addCurve(to: CGPoint(x: 12.096, y: 2.904), control1: CGPoint(x: 10.727, y: 1.787), control2: CGPoint(x: 11.462, y: 2.269)) p.addCurve(to: CGPoint(x: 13.544, y: 5.107), control1: CGPoint(x: 12.731, y: 3.538), control2: CGPoint(x: 13.213, y: 4.273)) p.addCurve(to: CGPoint(x: 13.826, y: 6), control1: CGPoint(x: 13.66, y: 5.401), control2: CGPoint(x: 13.754, y: 5.698)) p.addLine(to: CGPoint(x: 15, y: 6)) p.addLine(to: CGPoint(x: 15, y: 9)) p.addLine(to: CGPoint(x: 13.826, y: 9)) p.addCurve(to: CGPoint(x: 13.544, y: 9.893), control1: CGPoint(x: 13.754, y: 9.302), control2: CGPoint(x: 13.66, y: 9.599)) p.addCurve(to: CGPoint(x: 12.096, y: 12.096), control1: CGPoint(x: 13.213, y: 10.727), control2: CGPoint(x: 12.731, y: 11.462)) p.addCurve(to: CGPoint(x: 9.893, y: 13.544), control1: CGPoint(x: 11.462, y: 12.731), control2: CGPoint(x: 10.727, y: 13.213)) p.addCurve(to: CGPoint(x: 7.5, y: 14), control1: CGPoint(x: 9.124, y: 13.848), control2: CGPoint(x: 8.327, y: 14)) p.addCurve(to: CGPoint(x: 6, y: 13.826), control1: CGPoint(x: 6.989, y: 14), control2: CGPoint(x: 6.489, y: 13.942)) p.addLine(to: CGPoint(x: 6, y: 14)) p.addLine(to: CGPoint(x: 3, y: 14)) p.addLine(to: CGPoint(x: 3, y: 12.19)) p.addCurve(to: CGPoint(x: 2.904, y: 12.096), control1: CGPoint(x: 2.968, y: 12.159), control2: CGPoint(x: 2.936, y: 12.128)) p.addCurve(to: CGPoint(x: 1.456, y: 9.893), control1: CGPoint(x: 2.269, y: 11.462), control2: CGPoint(x: 1.787, y: 10.727)) p.addCurve(to: CGPoint(x: 1, y: 7.5), control1: CGPoint(x: 1.152, y: 9.124), control2: CGPoint(x: 1, y: 8.327)) p.addCurve(to: CGPoint(x: 1.174, y: 6), control1: CGPoint(x: 1, y: 6.989), control2: CGPoint(x: 1.058, y: 6.489)) p.addLine(to: CGPoint(x: 1, y: 6)) p.closeSubpath() p.move(to: CGPoint(x: 6, y: 11)) p.addLine(to: CGPoint(x: 6, y: 12.792)) p.addCurve(to: CGPoint(x: 7.5, y: 13), control1: CGPoint(x: 6.487, y: 12.931), control2: CGPoint(x: 6.987, y: 13)) p.addCurve(to: CGPoint(x: 9.525, y: 12.614), control1: CGPoint(x: 8.199, y: 13), control2: CGPoint(x: 8.874, y: 12.871)) p.addCurve(to: CGPoint(x: 11.389, y: 11.389), control1: CGPoint(x: 10.231, y: 12.334), control2: CGPoint(x: 10.852, y: 11.926)) p.addCurve(to: CGPoint(x: 12.614, y: 9.525), control1: CGPoint(x: 11.926, y: 10.852), control2: CGPoint(x: 12.334, y: 10.231)) p.addCurve(to: CGPoint(x: 12.792, y: 9), control1: CGPoint(x: 12.682, y: 9.351), control2: CGPoint(x: 12.742, y: 9.177)) p.addLine(to: CGPoint(x: 12, y: 9)) p.addLine(to: CGPoint(x: 12, y: 6)) p.addLine(to: CGPoint(x: 12.792, y: 6)) p.addCurve(to: CGPoint(x: 12.614, y: 5.475), control1: CGPoint(x: 12.742, y: 5.823), control2: CGPoint(x: 12.682, y: 5.649)) p.addCurve(to: CGPoint(x: 11.389, y: 3.611), control1: CGPoint(x: 12.334, y: 4.769), control2: CGPoint(x: 11.926, y: 4.148)) p.addCurve(to: CGPoint(x: 9.525, y: 2.386), control1: CGPoint(x: 10.852, y: 3.074), control2: CGPoint(x: 10.231, y: 2.666)) p.addCurve(to: CGPoint(x: 7.5, y: 2), control1: CGPoint(x: 8.874, y: 2.129), control2: CGPoint(x: 8.199, y: 2)) p.addCurve(to: CGPoint(x: 5.475, y: 2.386), control1: CGPoint(x: 6.801, y: 2), control2: CGPoint(x: 6.126, y: 2.129)) p.addCurve(to: CGPoint(x: 4, y: 3.257), control1: CGPoint(x: 4.934, y: 2.601), control2: CGPoint(x: 4.442, y: 2.891)) p.addLine(to: CGPoint(x: 4, y: 6)) p.addLine(to: CGPoint(x: 2.208, y: 6)) p.addCurve(to: CGPoint(x: 2, y: 7.5), control1: CGPoint(x: 2.069, y: 6.487), control2: CGPoint(x: 2, y: 6.987)) p.addCurve(to: CGPoint(x: 2.386, y: 9.525), control1: CGPoint(x: 2, y: 8.199), control2: CGPoint(x: 2.129, y: 8.874)) p.addCurve(to: CGPoint(x: 3.257, y: 11), control1: CGPoint(x: 2.601, y: 10.066), control2: CGPoint(x: 2.891, y: 10.558)) p.addLine(to: CGPoint(x: 6, y: 11)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // CircleThreePointsIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "circle-three-points" (line-round), MIT. https://gentleface.com/icons/circle-three-points 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 CircleThreePointsIcon: ImageVector by lazy { ImageVector.Builder( name = "circle-three-points", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M1 6L1 3L2.81 3C2.841 2.968 2.872 2.936 2.904 2.904C3.538 2.269 4.273 1.787 5.107 1.456C5.876 1.152 6.673 1 7.5 1C8.327 1 9.124 1.152 9.893 1.456C10.727 1.787 11.462 2.269 12.096 2.904C12.731 3.538 13.213 4.273 13.544 5.107C13.66 5.401 13.754 5.698 13.826 6L15 6L15 9L13.826 9C13.754 9.302 13.66 9.599 13.544 9.893C13.213 10.727 12.731 11.462 12.096 12.096C11.462 12.731 10.727 13.213 9.893 13.544C9.124 13.848 8.327 14 7.5 14C6.989 14 6.489 13.942 6 13.826L6 14L3 14L3 12.19C2.968 12.159 2.936 12.128 2.904 12.096C2.269 11.462 1.787 10.727 1.456 9.893C1.152 9.124 1 8.327 1 7.5C1 6.989 1.058 6.489 1.174 6L1 6ZM6 11L6 12.792C6.487 12.931 6.987 13 7.5 13C8.199 13 8.874 12.871 9.525 12.614C10.231 12.334 10.852 11.926 11.389 11.389C11.926 10.852 12.334 10.231 12.614 9.525C12.682 9.351 12.742 9.177 12.792 9L12 9L12 6L12.792 6C12.742 5.823 12.682 5.649 12.614 5.475C12.334 4.769 11.926 4.148 11.389 3.611C10.852 3.074 10.231 2.666 9.525 2.386C8.874 2.129 8.199 2 7.5 2C6.801 2 6.126 2.129 5.475 2.386C4.934 2.601 4.442 2.891 4 3.257L4 6L2.208 6C2.069 6.487 2 6.987 2 7.5C2 8.199 2.129 8.874 2.386 9.525C2.601 10.066 2.891 10.558 3.257 11L6 11Z"), fill = SolidColor(Color.Black), ).build() } // Icon(CircleThreePointsIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "circle-three-points" (line-round), MIT. https://gentleface.com/icons/circle-three-points import 'package:flutter/widgets.dart'; class CircleThreePointsIcon extends StatelessWidget { const CircleThreePointsIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _CircleThreePointsIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _CircleThreePointsIconPainter extends CustomPainter { _CircleThreePointsIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(1, 6) ..lineTo(1, 3) ..lineTo(2.81, 3) ..cubicTo(2.841, 2.968, 2.872, 2.936, 2.904, 2.904) ..cubicTo(3.538, 2.269, 4.273, 1.787, 5.107, 1.456) ..cubicTo(5.876, 1.152, 6.673, 1, 7.5, 1) ..cubicTo(8.327, 1, 9.124, 1.152, 9.893, 1.456) ..cubicTo(10.727, 1.787, 11.462, 2.269, 12.096, 2.904) ..cubicTo(12.731, 3.538, 13.213, 4.273, 13.544, 5.107) ..cubicTo(13.66, 5.401, 13.754, 5.698, 13.826, 6) ..lineTo(15, 6) ..lineTo(15, 9) ..lineTo(13.826, 9) ..cubicTo(13.754, 9.302, 13.66, 9.599, 13.544, 9.893) ..cubicTo(13.213, 10.727, 12.731, 11.462, 12.096, 12.096) ..cubicTo(11.462, 12.731, 10.727, 13.213, 9.893, 13.544) ..cubicTo(9.124, 13.848, 8.327, 14, 7.5, 14) ..cubicTo(6.989, 14, 6.489, 13.942, 6, 13.826) ..lineTo(6, 14) ..lineTo(3, 14) ..lineTo(3, 12.19) ..cubicTo(2.968, 12.159, 2.936, 12.128, 2.904, 12.096) ..cubicTo(2.269, 11.462, 1.787, 10.727, 1.456, 9.893) ..cubicTo(1.152, 9.124, 1, 8.327, 1, 7.5) ..cubicTo(1, 6.989, 1.058, 6.489, 1.174, 6) ..lineTo(1, 6) ..close() ..moveTo(6, 11) ..lineTo(6, 12.792) ..cubicTo(6.487, 12.931, 6.987, 13, 7.5, 13) ..cubicTo(8.199, 13, 8.874, 12.871, 9.525, 12.614) ..cubicTo(10.231, 12.334, 10.852, 11.926, 11.389, 11.389) ..cubicTo(11.926, 10.852, 12.334, 10.231, 12.614, 9.525) ..cubicTo(12.682, 9.351, 12.742, 9.177, 12.792, 9) ..lineTo(12, 9) ..lineTo(12, 6) ..lineTo(12.792, 6) ..cubicTo(12.742, 5.823, 12.682, 5.649, 12.614, 5.475) ..cubicTo(12.334, 4.769, 11.926, 4.148, 11.389, 3.611) ..cubicTo(10.852, 3.074, 10.231, 2.666, 9.525, 2.386) ..cubicTo(8.874, 2.129, 8.199, 2, 7.5, 2) ..cubicTo(6.801, 2, 6.126, 2.129, 5.475, 2.386) ..cubicTo(4.934, 2.601, 4.442, 2.891, 4, 3.257) ..lineTo(4, 6) ..lineTo(2.208, 6) ..cubicTo(2.069, 6.487, 2, 6.987, 2, 7.5) ..cubicTo(2, 8.199, 2.129, 8.874, 2.386, 9.525) ..cubicTo(2.601, 10.066, 2.891, 10.558, 3.257, 11) ..lineTo(6, 11) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_CircleThreePointsIconPainter old) => old.color != color; } ```