# breakpoint-log icon

Breakpoint log. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/breakpoint-log

- Category: Development
- Use it for: logpoint, log breakpoint
- Tags: breakpoint, logpoint, log, console, debug, debugger, message
- Family: breakpoint, breakpoint-conditional
- Component name: BreakpointLogIcon
- 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-log.svg · PNG https://gentleface.com/png/line-round/16/breakpoint-log.png · https://gentleface.com/png/line-round/32/breakpoint-log.png · https://gentleface.com/png/line-round/48/breakpoint-log.png
- line-soft: https://gentleface.com/svg/line-soft/16/breakpoint-log.svg · PNG https://gentleface.com/png/line-soft/16/breakpoint-log.png · https://gentleface.com/png/line-soft/32/breakpoint-log.png · https://gentleface.com/png/line-soft/48/breakpoint-log.png
- line-sharp: https://gentleface.com/svg/line-sharp/16/breakpoint-log.svg · PNG https://gentleface.com/png/line-sharp/16/breakpoint-log.png · https://gentleface.com/png/line-sharp/32/breakpoint-log.png · https://gentleface.com/png/line-sharp/48/breakpoint-log.png
- solid-round: https://gentleface.com/svg/solid-round/16/breakpoint-log.svg · PNG https://gentleface.com/png/solid-round/16/breakpoint-log.png · https://gentleface.com/png/solid-round/32/breakpoint-log.png · https://gentleface.com/png/solid-round/48/breakpoint-log.png
- solid-soft: https://gentleface.com/svg/solid-soft/16/breakpoint-log.svg · PNG https://gentleface.com/png/solid-soft/16/breakpoint-log.png · https://gentleface.com/png/solid-soft/32/breakpoint-log.png · https://gentleface.com/png/solid-soft/48/breakpoint-log.png
- solid-sharp: https://gentleface.com/svg/solid-sharp/16/breakpoint-log.svg · PNG https://gentleface.com/png/solid-sharp/16/breakpoint-log.png · https://gentleface.com/png/solid-sharp/32/breakpoint-log.png · https://gentleface.com/png/solid-sharp/48/breakpoint-log.png

The SVG of every style: https://gentleface.com/icons/breakpoint-log.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
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path 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 10ZM4.144 6.856C4.048 6.759 4 6.641 4 6.5C4 6.359 4.048 6.241 4.144 6.144C4.241 6.048 4.359 6 4.5 6L9.5 6C9.641 6 9.759 6.048 9.856 6.144C9.952 6.241 10 6.359 10 6.5C10 6.641 9.952 6.759 9.856 6.856C9.759 6.952 9.641 7 9.5 7L4.5 7C4.359 7 4.241 6.952 4.144 6.856ZM4.144 8.856C4.048 8.759 4 8.641 4 8.5C4 8.359 4.048 8.241 4.144 8.144C4.241 8.048 4.359 8 4.5 8L6.5 8C6.641 8 6.759 8.048 6.856 8.144C6.952 8.241 7 8.359 7 8.5C7 8.641 6.952 8.759 6.856 8.856C6.759 8.952 6.641 9 6.5 9L4.5 9C4.359 9 4.241 8.952 4.144 8.856Z"/></svg>
```

### React

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

export function BreakpointLogIcon(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="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 10ZM4.144 6.856C4.048 6.759 4 6.641 4 6.5C4 6.359 4.048 6.241 4.144 6.144C4.241 6.048 4.359 6 4.5 6L9.5 6C9.641 6 9.759 6.048 9.856 6.144C9.952 6.241 10 6.359 10 6.5C10 6.641 9.952 6.759 9.856 6.856C9.759 6.952 9.641 7 9.5 7L4.5 7C4.359 7 4.241 6.952 4.144 6.856ZM4.144 8.856C4.048 8.759 4 8.641 4 8.5C4 8.359 4.048 8.241 4.144 8.144C4.241 8.048 4.359 8 4.5 8L6.5 8C6.641 8 6.759 8.048 6.856 8.144C6.952 8.241 7 8.359 7 8.5C7 8.641 6.952 8.759 6.856 8.856C6.759 8.952 6.641 9 6.5 9L4.5 9C4.359 9 4.241 8.952 4.144 8.856Z" />
    </svg>
  );
}
```

### Vue

```vue
<!-- Gentleface "breakpoint-log" (line-round), MIT. https://gentleface.com/icons/breakpoint-log -->
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
    <path 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 10ZM4.144 6.856C4.048 6.759 4 6.641 4 6.5C4 6.359 4.048 6.241 4.144 6.144C4.241 6.048 4.359 6 4.5 6L9.5 6C9.641 6 9.759 6.048 9.856 6.144C9.952 6.241 10 6.359 10 6.5C10 6.641 9.952 6.759 9.856 6.856C9.759 6.952 9.641 7 9.5 7L4.5 7C4.359 7 4.241 6.952 4.144 6.856ZM4.144 8.856C4.048 8.759 4 8.641 4 8.5C4 8.359 4.048 8.241 4.144 8.144C4.241 8.048 4.359 8 4.5 8L6.5 8C6.641 8 6.759 8.048 6.856 8.144C6.952 8.241 7 8.359 7 8.5C7 8.641 6.952 8.759 6.856 8.856C6.759 8.952 6.641 9 6.5 9L4.5 9C4.359 9 4.241 8.952 4.144 8.856Z" />
  </svg>
</template>
```

### Svelte

```svelte
<!-- Gentleface "breakpoint-log" (line-round), MIT. https://gentleface.com/icons/breakpoint-log -->
<script>
  let props = $props();
</script>

<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="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 10ZM4.144 6.856C4.048 6.759 4 6.641 4 6.5C4 6.359 4.048 6.241 4.144 6.144C4.241 6.048 4.359 6 4.5 6L9.5 6C9.641 6 9.759 6.048 9.856 6.144C9.952 6.241 10 6.359 10 6.5C10 6.641 9.952 6.759 9.856 6.856C9.759 6.952 9.641 7 9.5 7L4.5 7C4.359 7 4.241 6.952 4.144 6.856ZM4.144 8.856C4.048 8.759 4 8.641 4 8.5C4 8.359 4.048 8.241 4.144 8.144C4.241 8.048 4.359 8 4.5 8L6.5 8C6.641 8 6.759 8.048 6.856 8.144C6.952 8.241 7 8.359 7 8.5C7 8.641 6.952 8.759 6.856 8.856C6.759 8.952 6.641 9 6.5 9L4.5 9C4.359 9 4.241 8.952 4.144 8.856Z" />
</svg>
```

### HTML img

```html
<!-- Gentleface "breakpoint-log" (line-round), MIT. https://gentleface.com/icons/breakpoint-log. An <img> can't take currentColor: it draws black. Inline the SVG or use the CSS mask to color it. -->
<img src="https://gentleface.com/svg/line-round/16/breakpoint-log.svg" width="16" height="16" alt="">
```

### CSS

```css
/* Gentleface "breakpoint-log" (line-round), MIT. https://gentleface.com/icons/breakpoint-log. Takes the text color. */
.icon-breakpoint-log {
  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 10ZM4.144 6.856C4.048 6.759 4 6.641 4 6.5C4 6.359 4.048 6.241 4.144 6.144C4.241 6.048 4.359 6 4.5 6L9.5 6C9.641 6 9.759 6.048 9.856 6.144C9.952 6.241 10 6.359 10 6.5C10 6.641 9.952 6.759 9.856 6.856C9.759 6.952 9.641 7 9.5 7L4.5 7C4.359 7 4.241 6.952 4.144 6.856ZM4.144 8.856C4.048 8.759 4 8.641 4 8.5C4 8.359 4.048 8.241 4.144 8.144C4.241 8.048 4.359 8 4.5 8L6.5 8C6.641 8 6.759 8.048 6.856 8.144C6.952 8.241 7 8.359 7 8.5C7 8.641 6.952 8.759 6.856 8.856C6.759 8.952 6.641 9 6.5 9L4.5 9C4.359 9 4.241 8.952 4.144 8.856Z'/%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 10ZM4.144 6.856C4.048 6.759 4 6.641 4 6.5C4 6.359 4.048 6.241 4.144 6.144C4.241 6.048 4.359 6 4.5 6L9.5 6C9.641 6 9.759 6.048 9.856 6.144C9.952 6.241 10 6.359 10 6.5C10 6.641 9.952 6.759 9.856 6.856C9.759 6.952 9.641 7 9.5 7L4.5 7C4.359 7 4.241 6.952 4.144 6.856ZM4.144 8.856C4.048 8.759 4 8.641 4 8.5C4 8.359 4.048 8.241 4.144 8.144C4.241 8.048 4.359 8 4.5 8L6.5 8C6.641 8 6.759 8.048 6.856 8.144C6.952 8.241 7 8.359 7 8.5C7 8.641 6.952 8.759 6.856 8.856C6.759 8.952 6.641 9 6.5 9L4.5 9C4.359 9 4.241 8.952 4.144 8.856Z'/%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 10ZM4.144 6.856C4.048 6.759 4 6.641 4 6.5C4 6.359 4.048 6.241 4.144 6.144C4.241 6.048 4.359 6 4.5 6L9.5 6C9.641 6 9.759 6.048 9.856 6.144C9.952 6.241 10 6.359 10 6.5C10 6.641 9.952 6.759 9.856 6.856C9.759 6.952 9.641 7 9.5 7L4.5 7C4.359 7 4.241 6.952 4.144 6.856ZM4.144 8.856C4.048 8.759 4 8.641 4 8.5C4 8.359 4.048 8.241 4.144 8.144C4.241 8.048 4.359 8 4.5 8L6.5 8C6.641 8 6.759 8.048 6.856 8.144C6.952 8.241 7 8.359 7 8.5C7 8.641 6.952 8.759 6.856 8.856C6.759 8.952 6.641 9 6.5 9L4.5 9C4.359 9 4.241 8.952 4.144 8.856Z'/%3E%3C/svg%3E
```

### Sprite

```html
<!-- Gentleface "breakpoint-log" (line-round), MIT. https://gentleface.com/icons/breakpoint-log
     Every icon of this style in one file: https://gentleface.com/sprite/line-round.svg
     Serve it from your own origin: <use> does not load from another origin. -->
<svg width="16" height="16" aria-hidden="true"><use href="/sprite/line-round.svg#breakpoint-log"/></svg>
```

### SwiftUI

```swift
// Gentleface "breakpoint-log" (line-round), MIT. https://gentleface.com/icons/breakpoint-log
import SwiftUI

struct BreakpointLogIcon: 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()
        p.move(to: CGPoint(x: 4.144, y: 6.856))
        p.addCurve(to: CGPoint(x: 4, y: 6.5), control1: CGPoint(x: 4.048, y: 6.759), control2: CGPoint(x: 4, y: 6.641))
        p.addCurve(to: CGPoint(x: 4.144, y: 6.144), control1: CGPoint(x: 4, y: 6.359), control2: CGPoint(x: 4.048, y: 6.241))
        p.addCurve(to: CGPoint(x: 4.5, y: 6), control1: CGPoint(x: 4.241, y: 6.048), control2: CGPoint(x: 4.359, y: 6))
        p.addLine(to: CGPoint(x: 9.5, y: 6))
        p.addCurve(to: CGPoint(x: 9.856, y: 6.144), control1: CGPoint(x: 9.641, y: 6), control2: CGPoint(x: 9.759, y: 6.048))
        p.addCurve(to: CGPoint(x: 10, y: 6.5), control1: CGPoint(x: 9.952, y: 6.241), control2: CGPoint(x: 10, y: 6.359))
        p.addCurve(to: CGPoint(x: 9.856, y: 6.856), control1: CGPoint(x: 10, y: 6.641), control2: CGPoint(x: 9.952, y: 6.759))
        p.addCurve(to: CGPoint(x: 9.5, y: 7), control1: CGPoint(x: 9.759, y: 6.952), control2: CGPoint(x: 9.641, y: 7))
        p.addLine(to: CGPoint(x: 4.5, y: 7))
        p.addCurve(to: CGPoint(x: 4.144, y: 6.856), control1: CGPoint(x: 4.359, y: 7), control2: CGPoint(x: 4.241, y: 6.952))
        p.closeSubpath()
        p.move(to: CGPoint(x: 4.144, y: 8.856))
        p.addCurve(to: CGPoint(x: 4, y: 8.5), control1: CGPoint(x: 4.048, y: 8.759), control2: CGPoint(x: 4, y: 8.641))
        p.addCurve(to: CGPoint(x: 4.144, y: 8.144), control1: CGPoint(x: 4, y: 8.359), control2: CGPoint(x: 4.048, y: 8.241))
        p.addCurve(to: CGPoint(x: 4.5, y: 8), control1: CGPoint(x: 4.241, y: 8.048), control2: CGPoint(x: 4.359, y: 8))
        p.addLine(to: CGPoint(x: 6.5, y: 8))
        p.addCurve(to: CGPoint(x: 6.856, y: 8.144), control1: CGPoint(x: 6.641, y: 8), control2: CGPoint(x: 6.759, y: 8.048))
        p.addCurve(to: CGPoint(x: 7, y: 8.5), control1: CGPoint(x: 6.952, y: 8.241), control2: CGPoint(x: 7, y: 8.359))
        p.addCurve(to: CGPoint(x: 6.856, y: 8.856), control1: CGPoint(x: 7, y: 8.641), control2: CGPoint(x: 6.952, y: 8.759))
        p.addCurve(to: CGPoint(x: 6.5, y: 9), control1: CGPoint(x: 6.759, y: 8.952), control2: CGPoint(x: 6.641, y: 9))
        p.addLine(to: CGPoint(x: 4.5, y: 9))
        p.addCurve(to: CGPoint(x: 4.144, y: 8.856), control1: CGPoint(x: 4.359, y: 9), control2: CGPoint(x: 4.241, y: 8.952))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

// BreakpointLogIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp.
```

### Compose

```kotlin
// Gentleface "breakpoint-log" (line-round), MIT. https://gentleface.com/icons/breakpoint-log
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 BreakpointLogIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "breakpoint-log", 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 10ZM4.144 6.856C4.048 6.759 4 6.641 4 6.5C4 6.359 4.048 6.241 4.144 6.144C4.241 6.048 4.359 6 4.5 6L9.5 6C9.641 6 9.759 6.048 9.856 6.144C9.952 6.241 10 6.359 10 6.5C10 6.641 9.952 6.759 9.856 6.856C9.759 6.952 9.641 7 9.5 7L4.5 7C4.359 7 4.241 6.952 4.144 6.856ZM4.144 8.856C4.048 8.759 4 8.641 4 8.5C4 8.359 4.048 8.241 4.144 8.144C4.241 8.048 4.359 8 4.5 8L6.5 8C6.641 8 6.759 8.048 6.856 8.144C6.952 8.241 7 8.359 7 8.5C7 8.641 6.952 8.759 6.856 8.856C6.759 8.952 6.641 9 6.5 9L4.5 9C4.359 9 4.241 8.952 4.144 8.856Z"),
        fill = SolidColor(Color.Black),
    ).build()
}

// Icon(BreakpointLogIcon, contentDescription = null) tints it with LocalContentColor.
```

### Android XML

```xml
<!-- res/drawable/ic_breakpoint_log.xml · Gentleface "breakpoint-log" (line-round), MIT. https://gentleface.com/icons/breakpoint-log -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="16dp"
    android:height="16dp"
    android:viewportWidth="16"
    android:viewportHeight="16"
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="@android:color/white"
      android:pathData="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 10ZM4.144 6.856C4.048 6.759 4 6.641 4 6.5C4 6.359 4.048 6.241 4.144 6.144C4.241 6.048 4.359 6 4.5 6L9.5 6C9.641 6 9.759 6.048 9.856 6.144C9.952 6.241 10 6.359 10 6.5C10 6.641 9.952 6.759 9.856 6.856C9.759 6.952 9.641 7 9.5 7L4.5 7C4.359 7 4.241 6.952 4.144 6.856ZM4.144 8.856C4.048 8.759 4 8.641 4 8.5C4 8.359 4.048 8.241 4.144 8.144C4.241 8.048 4.359 8 4.5 8L6.5 8C6.641 8 6.759 8.048 6.856 8.144C6.952 8.241 7 8.359 7 8.5C7 8.641 6.952 8.759 6.856 8.856C6.759 8.952 6.641 9 6.5 9L4.5 9C4.359 9 4.241 8.952 4.144 8.856Z"/>
</vector>
```

### Flutter

```dart
// Gentleface "breakpoint-log" (line-round), MIT. https://gentleface.com/icons/breakpoint-log
import 'package:flutter/widgets.dart';

class BreakpointLogIcon extends StatelessWidget {
  const BreakpointLogIcon({super.key, this.size = 16, this.color});
  final double size;
  final Color? color;

  @override
  Widget build(BuildContext context) => CustomPaint(
        size: Size.square(size),
        painter: _BreakpointLogIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)),
      );
}

class _BreakpointLogIconPainter extends CustomPainter {
  _BreakpointLogIconPainter(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()
      ..moveTo(4.144, 6.856)
      ..cubicTo(4.048, 6.759, 4, 6.641, 4, 6.5)
      ..cubicTo(4, 6.359, 4.048, 6.241, 4.144, 6.144)
      ..cubicTo(4.241, 6.048, 4.359, 6, 4.5, 6)
      ..lineTo(9.5, 6)
      ..cubicTo(9.641, 6, 9.759, 6.048, 9.856, 6.144)
      ..cubicTo(9.952, 6.241, 10, 6.359, 10, 6.5)
      ..cubicTo(10, 6.641, 9.952, 6.759, 9.856, 6.856)
      ..cubicTo(9.759, 6.952, 9.641, 7, 9.5, 7)
      ..lineTo(4.5, 7)
      ..cubicTo(4.359, 7, 4.241, 6.952, 4.144, 6.856)
      ..close()
      ..moveTo(4.144, 8.856)
      ..cubicTo(4.048, 8.759, 4, 8.641, 4, 8.5)
      ..cubicTo(4, 8.359, 4.048, 8.241, 4.144, 8.144)
      ..cubicTo(4.241, 8.048, 4.359, 8, 4.5, 8)
      ..lineTo(6.5, 8)
      ..cubicTo(6.641, 8, 6.759, 8.048, 6.856, 8.144)
      ..cubicTo(6.952, 8.241, 7, 8.359, 7, 8.5)
      ..cubicTo(7, 8.641, 6.952, 8.759, 6.856, 8.856)
      ..cubicTo(6.759, 8.952, 6.641, 9, 6.5, 9)
      ..lineTo(4.5, 9)
      ..cubicTo(4.359, 9, 4.241, 8.952, 4.144, 8.856)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

  @override
  bool shouldRepaint(_BreakpointLogIconPainter old) => old.color != color;
}
```