# breakpoint icon Breakpoint. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/breakpoint - Category: Development - Use it for: breakpoint, breakpoints, toggle breakpoints, toggle breakpoint, add breakpoint - Tags: breakpoint, debug, debugger, pause, stop, code, gutter, dot - Family: breakpoint-conditional, breakpoint-log - Component name: BreakpointIcon - Added: 2026-11-12 ## 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/breakpoint.svg · PNG https://gentleface.com/png/line-round/16/breakpoint.png · https://gentleface.com/png/line-round/32/breakpoint.png · https://gentleface.com/png/line-round/48/breakpoint.png - line-soft: https://gentleface.com/svg/line-soft/16/breakpoint.svg · PNG https://gentleface.com/png/line-soft/16/breakpoint.png · https://gentleface.com/png/line-soft/32/breakpoint.png · https://gentleface.com/png/line-soft/48/breakpoint.png - line-sharp: https://gentleface.com/svg/line-sharp/16/breakpoint.svg · PNG https://gentleface.com/png/line-sharp/16/breakpoint.png · https://gentleface.com/png/line-sharp/32/breakpoint.png · https://gentleface.com/png/line-sharp/48/breakpoint.png - solid-round: https://gentleface.com/svg/solid-round/16/breakpoint.svg · PNG https://gentleface.com/png/solid-round/16/breakpoint.png · https://gentleface.com/png/solid-round/32/breakpoint.png · https://gentleface.com/png/solid-round/48/breakpoint.png - solid-soft: https://gentleface.com/svg/solid-soft/16/breakpoint.svg · PNG https://gentleface.com/png/solid-soft/16/breakpoint.png · https://gentleface.com/png/solid-soft/32/breakpoint.png · https://gentleface.com/png/solid-soft/48/breakpoint.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/breakpoint.svg · PNG https://gentleface.com/png/solid-sharp/16/breakpoint.png · https://gentleface.com/png/solid-sharp/32/breakpoint.png · https://gentleface.com/png/solid-sharp/48/breakpoint.png The SVG of every style: https://gentleface.com/icons/breakpoint.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 "breakpoint" (line-round), MIT. https://gentleface.com/icons/breakpoint import type { SVGProps } from 'react'; export function BreakpointIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "breakpoint" (line-round), MIT. https://gentleface.com/icons/breakpoint. Takes the text color. */ .icon-breakpoint { 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='M13.5 6.793C13.695 6.988 13.793 7.224 13.793 7.5C13.793 7.776 13.695 8.012 13.5 8.207L11.561 10.146C11.287 10.42 10.972 10.63 10.615 10.778C10.258 10.926 9.886 11 9.5 11L2 11C1.724 11 1.488 10.902 1.293 10.707C1.098 10.512 1 10.276 1 10L1 5C1 4.724 1.098 4.488 1.293 4.293C1.488 4.098 1.724 4 2 4L9.5 4C9.886 4 10.258 4.074 10.615 4.222C10.972 4.37 11.287 4.58 11.561 4.854L13.5 6.793ZM9.5 10C9.754 10 9.998 9.951 10.233 9.854C10.467 9.757 10.674 9.619 10.854 9.439L12.793 7.5L10.854 5.561C10.674 5.381 10.467 5.243 10.233 5.146C9.998 5.049 9.754 5 9.5 5L2 5L2 10L9.5 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='M13.5 6.793C13.695 6.988 13.793 7.224 13.793 7.5C13.793 7.776 13.695 8.012 13.5 8.207L11.561 10.146C11.287 10.42 10.972 10.63 10.615 10.778C10.258 10.926 9.886 11 9.5 11L2 11C1.724 11 1.488 10.902 1.293 10.707C1.098 10.512 1 10.276 1 10L1 5C1 4.724 1.098 4.488 1.293 4.293C1.488 4.098 1.724 4 2 4L9.5 4C9.886 4 10.258 4.074 10.615 4.222C10.972 4.37 11.287 4.58 11.561 4.854L13.5 6.793ZM9.5 10C9.754 10 9.998 9.951 10.233 9.854C10.467 9.757 10.674 9.619 10.854 9.439L12.793 7.5L10.854 5.561C10.674 5.381 10.467 5.243 10.233 5.146C9.998 5.049 9.754 5 9.5 5L2 5L2 10L9.5 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='M13.5 6.793C13.695 6.988 13.793 7.224 13.793 7.5C13.793 7.776 13.695 8.012 13.5 8.207L11.561 10.146C11.287 10.42 10.972 10.63 10.615 10.778C10.258 10.926 9.886 11 9.5 11L2 11C1.724 11 1.488 10.902 1.293 10.707C1.098 10.512 1 10.276 1 10L1 5C1 4.724 1.098 4.488 1.293 4.293C1.488 4.098 1.724 4 2 4L9.5 4C9.886 4 10.258 4.074 10.615 4.222C10.972 4.37 11.287 4.58 11.561 4.854L13.5 6.793ZM9.5 10C9.754 10 9.998 9.951 10.233 9.854C10.467 9.757 10.674 9.619 10.854 9.439L12.793 7.5L10.854 5.561C10.674 5.381 10.467 5.243 10.233 5.146C9.998 5.049 9.754 5 9.5 5L2 5L2 10L9.5 10Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "breakpoint" (line-round), MIT. https://gentleface.com/icons/breakpoint import SwiftUI struct BreakpointIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 13.5, y: 6.793)) p.addCurve(to: CGPoint(x: 13.793, y: 7.5), control1: CGPoint(x: 13.695, y: 6.988), control2: CGPoint(x: 13.793, y: 7.224)) p.addCurve(to: CGPoint(x: 13.5, y: 8.207), control1: CGPoint(x: 13.793, y: 7.776), control2: CGPoint(x: 13.695, y: 8.012)) p.addLine(to: CGPoint(x: 11.561, y: 10.146)) p.addCurve(to: CGPoint(x: 10.615, y: 10.778), control1: CGPoint(x: 11.287, y: 10.42), control2: CGPoint(x: 10.972, y: 10.63)) p.addCurve(to: CGPoint(x: 9.5, y: 11), control1: CGPoint(x: 10.258, y: 10.926), control2: CGPoint(x: 9.886, y: 11)) p.addLine(to: CGPoint(x: 2, y: 11)) p.addCurve(to: CGPoint(x: 1.293, y: 10.707), control1: CGPoint(x: 1.724, y: 11), control2: CGPoint(x: 1.488, y: 10.902)) p.addCurve(to: CGPoint(x: 1, y: 10), control1: CGPoint(x: 1.098, y: 10.512), control2: CGPoint(x: 1, y: 10.276)) p.addLine(to: CGPoint(x: 1, y: 5)) p.addCurve(to: CGPoint(x: 1.293, y: 4.293), control1: CGPoint(x: 1, y: 4.724), control2: CGPoint(x: 1.098, y: 4.488)) p.addCurve(to: CGPoint(x: 2, y: 4), control1: CGPoint(x: 1.488, y: 4.098), control2: CGPoint(x: 1.724, y: 4)) p.addLine(to: CGPoint(x: 9.5, y: 4)) p.addCurve(to: CGPoint(x: 10.615, y: 4.222), control1: CGPoint(x: 9.886, y: 4), control2: CGPoint(x: 10.258, y: 4.074)) p.addCurve(to: CGPoint(x: 11.561, y: 4.854), control1: CGPoint(x: 10.972, y: 4.37), control2: CGPoint(x: 11.287, y: 4.58)) p.addLine(to: CGPoint(x: 13.5, y: 6.793)) p.closeSubpath() p.move(to: CGPoint(x: 9.5, y: 10)) p.addCurve(to: CGPoint(x: 10.233, y: 9.854), control1: CGPoint(x: 9.754, y: 10), control2: CGPoint(x: 9.998, y: 9.951)) p.addCurve(to: CGPoint(x: 10.854, y: 9.439), control1: CGPoint(x: 10.467, y: 9.757), control2: CGPoint(x: 10.674, y: 9.619)) p.addLine(to: CGPoint(x: 12.793, y: 7.5)) p.addLine(to: CGPoint(x: 10.854, y: 5.561)) p.addCurve(to: CGPoint(x: 10.233, y: 5.146), control1: CGPoint(x: 10.674, y: 5.381), control2: CGPoint(x: 10.467, y: 5.243)) p.addCurve(to: CGPoint(x: 9.5, y: 5), control1: CGPoint(x: 9.998, y: 5.049), control2: CGPoint(x: 9.754, y: 5)) p.addLine(to: CGPoint(x: 2, y: 5)) p.addLine(to: CGPoint(x: 2, y: 10)) p.addLine(to: CGPoint(x: 9.5, y: 10)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // BreakpointIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "breakpoint" (line-round), MIT. https://gentleface.com/icons/breakpoint 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 BreakpointIcon: ImageVector by lazy { ImageVector.Builder( name = "breakpoint", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M13.5 6.793C13.695 6.988 13.793 7.224 13.793 7.5C13.793 7.776 13.695 8.012 13.5 8.207L11.561 10.146C11.287 10.42 10.972 10.63 10.615 10.778C10.258 10.926 9.886 11 9.5 11L2 11C1.724 11 1.488 10.902 1.293 10.707C1.098 10.512 1 10.276 1 10L1 5C1 4.724 1.098 4.488 1.293 4.293C1.488 4.098 1.724 4 2 4L9.5 4C9.886 4 10.258 4.074 10.615 4.222C10.972 4.37 11.287 4.58 11.561 4.854L13.5 6.793ZM9.5 10C9.754 10 9.998 9.951 10.233 9.854C10.467 9.757 10.674 9.619 10.854 9.439L12.793 7.5L10.854 5.561C10.674 5.381 10.467 5.243 10.233 5.146C9.998 5.049 9.754 5 9.5 5L2 5L2 10L9.5 10Z"), fill = SolidColor(Color.Black), ).build() } // Icon(BreakpointIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "breakpoint" (line-round), MIT. https://gentleface.com/icons/breakpoint import 'package:flutter/widgets.dart'; class BreakpointIcon extends StatelessWidget { const BreakpointIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _BreakpointIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _BreakpointIconPainter extends CustomPainter { _BreakpointIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(13.5, 6.793) ..cubicTo(13.695, 6.988, 13.793, 7.224, 13.793, 7.5) ..cubicTo(13.793, 7.776, 13.695, 8.012, 13.5, 8.207) ..lineTo(11.561, 10.146) ..cubicTo(11.287, 10.42, 10.972, 10.63, 10.615, 10.778) ..cubicTo(10.258, 10.926, 9.886, 11, 9.5, 11) ..lineTo(2, 11) ..cubicTo(1.724, 11, 1.488, 10.902, 1.293, 10.707) ..cubicTo(1.098, 10.512, 1, 10.276, 1, 10) ..lineTo(1, 5) ..cubicTo(1, 4.724, 1.098, 4.488, 1.293, 4.293) ..cubicTo(1.488, 4.098, 1.724, 4, 2, 4) ..lineTo(9.5, 4) ..cubicTo(9.886, 4, 10.258, 4.074, 10.615, 4.222) ..cubicTo(10.972, 4.37, 11.287, 4.58, 11.561, 4.854) ..lineTo(13.5, 6.793) ..close() ..moveTo(9.5, 10) ..cubicTo(9.754, 10, 9.998, 9.951, 10.233, 9.854) ..cubicTo(10.467, 9.757, 10.674, 9.619, 10.854, 9.439) ..lineTo(12.793, 7.5) ..lineTo(10.854, 5.561) ..cubicTo(10.674, 5.381, 10.467, 5.243, 10.233, 5.146) ..cubicTo(9.998, 5.049, 9.754, 5, 9.5, 5) ..lineTo(2, 5) ..lineTo(2, 10) ..lineTo(9.5, 10) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_BreakpointIconPainter old) => old.color != color; } ```