# timeline icon

Timeline. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/timeline

- Category: Layout & interface
- Use it for: timeline, chronology, event timeline, activity timeline
- Tags: timeline, events, history, chronology, milestones, roadmap, schedule, feed
- Family: browser, cards, columns, columns-gear, kanban, layout, layout-dashboard, layout-dashboard-gear, layout-dashboard-pencil, layout-dashboard-plus, layout-dashboard-sparkle, maximize, minimize, panel-bottom, picture-in-picture, picture-in-picture-exit, pin, rows, sidebar, sidebar-collapse, sidebar-expand, sidebar-right, table-arrow-down, table-arrow-up, table-gear, table-lock, table-search, table-sparkle, tabs, toggle, toggle-off, window
- Component name: TimelineIcon
- Added: 2026-10-14

## Alternatives

- `history`: the version history of a document (version-history)
- `stepper`: the steps of a flow (stepper)

## Also fits

- gantt chart: a chronological list of events
- stepper: a vertical history of events (timeline)
- animation timeline: a chronological timeline of events (timeline)

## Files

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.

- line-round: https://gentleface.com/svg/line-round/16/timeline.svg · PNG https://gentleface.com/png/line-round/16/timeline.png · https://gentleface.com/png/line-round/32/timeline.png · https://gentleface.com/png/line-round/48/timeline.png
- line-soft: https://gentleface.com/svg/line-soft/16/timeline.svg · PNG https://gentleface.com/png/line-soft/16/timeline.png · https://gentleface.com/png/line-soft/32/timeline.png · https://gentleface.com/png/line-soft/48/timeline.png
- line-sharp: https://gentleface.com/svg/line-sharp/16/timeline.svg · PNG https://gentleface.com/png/line-sharp/16/timeline.png · https://gentleface.com/png/line-sharp/32/timeline.png · https://gentleface.com/png/line-sharp/48/timeline.png
- solid-round: https://gentleface.com/svg/solid-round/16/timeline.svg · PNG https://gentleface.com/png/solid-round/16/timeline.png · https://gentleface.com/png/solid-round/32/timeline.png · https://gentleface.com/png/solid-round/48/timeline.png
- solid-soft: https://gentleface.com/svg/solid-soft/16/timeline.svg · PNG https://gentleface.com/png/solid-soft/16/timeline.png · https://gentleface.com/png/solid-soft/32/timeline.png · https://gentleface.com/png/solid-soft/48/timeline.png
- solid-sharp: https://gentleface.com/svg/solid-sharp/16/timeline.svg · PNG https://gentleface.com/png/solid-sharp/16/timeline.png · https://gentleface.com/png/solid-sharp/32/timeline.png · https://gentleface.com/png/solid-sharp/48/timeline.png

The SVG of every style: https://gentleface.com/icons/timeline.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="M3.725 10.634C3.908 10.893 4 11.182 4 11.5C4 11.818 3.908 12.107 3.725 12.366C3.541 12.626 3.3 12.808 3 12.914L3 14.5C3 14.641 2.952 14.759 2.856 14.856C2.759 14.952 2.641 15 2.5 15C2.359 15 2.241 14.952 2.144 14.856C2.048 14.759 2 14.641 2 14.5L2 12.914C1.7 12.808 1.459 12.626 1.275 12.366C1.092 12.107 1 11.818 1 11.5C1 11.182 1.092 10.893 1.275 10.634C1.459 10.374 1.7 10.192 2 10.086L2 5.914C1.7 5.808 1.459 5.626 1.275 5.366C1.092 5.107 1 4.818 1 4.5C1 4.182 1.092 3.893 1.275 3.634C1.459 3.374 1.7 3.192 2 3.086L2 1.5C2 1.359 2.048 1.241 2.144 1.144C2.241 1.048 2.359 1 2.5 1C2.641 1 2.759 1.048 2.856 1.144C2.952 1.241 3 1.359 3 1.5L3 3.086C3.3 3.192 3.541 3.374 3.725 3.634C3.908 3.893 4 4.182 4 4.5C4 4.818 3.908 5.107 3.725 5.366C3.541 5.626 3.3 5.808 3 5.914L3 10.086C3.3 10.192 3.541 10.374 3.725 10.634ZM14.707 2.293C14.902 2.488 15 2.724 15 3L15 6C15 6.276 14.902 6.512 14.707 6.707C14.512 6.902 14.276 7 14 7L7 7C6.724 7 6.488 6.902 6.293 6.707C6.098 6.512 6 6.276 6 6L6 3C6 2.724 6.098 2.488 6.293 2.293C6.488 2.098 6.724 2 7 2L14 2C14.276 2 14.512 2.098 14.707 2.293ZM14 6L14 3L7 3L7 6L14 6ZM14 14L7 14C6.724 14 6.488 13.902 6.293 13.707C6.098 13.512 6 13.276 6 13L6 10C6 9.724 6.098 9.488 6.293 9.293C6.488 9.098 6.724 9 7 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 14ZM7 10L7 13L14 13L14 10L7 10Z"/></svg>
```

### React

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

export function TimelineIcon(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="M3.725 10.634C3.908 10.893 4 11.182 4 11.5C4 11.818 3.908 12.107 3.725 12.366C3.541 12.626 3.3 12.808 3 12.914L3 14.5C3 14.641 2.952 14.759 2.856 14.856C2.759 14.952 2.641 15 2.5 15C2.359 15 2.241 14.952 2.144 14.856C2.048 14.759 2 14.641 2 14.5L2 12.914C1.7 12.808 1.459 12.626 1.275 12.366C1.092 12.107 1 11.818 1 11.5C1 11.182 1.092 10.893 1.275 10.634C1.459 10.374 1.7 10.192 2 10.086L2 5.914C1.7 5.808 1.459 5.626 1.275 5.366C1.092 5.107 1 4.818 1 4.5C1 4.182 1.092 3.893 1.275 3.634C1.459 3.374 1.7 3.192 2 3.086L2 1.5C2 1.359 2.048 1.241 2.144 1.144C2.241 1.048 2.359 1 2.5 1C2.641 1 2.759 1.048 2.856 1.144C2.952 1.241 3 1.359 3 1.5L3 3.086C3.3 3.192 3.541 3.374 3.725 3.634C3.908 3.893 4 4.182 4 4.5C4 4.818 3.908 5.107 3.725 5.366C3.541 5.626 3.3 5.808 3 5.914L3 10.086C3.3 10.192 3.541 10.374 3.725 10.634ZM14.707 2.293C14.902 2.488 15 2.724 15 3L15 6C15 6.276 14.902 6.512 14.707 6.707C14.512 6.902 14.276 7 14 7L7 7C6.724 7 6.488 6.902 6.293 6.707C6.098 6.512 6 6.276 6 6L6 3C6 2.724 6.098 2.488 6.293 2.293C6.488 2.098 6.724 2 7 2L14 2C14.276 2 14.512 2.098 14.707 2.293ZM14 6L14 3L7 3L7 6L14 6ZM14 14L7 14C6.724 14 6.488 13.902 6.293 13.707C6.098 13.512 6 13.276 6 13L6 10C6 9.724 6.098 9.488 6.293 9.293C6.488 9.098 6.724 9 7 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 14ZM7 10L7 13L14 13L14 10L7 10Z" />
    </svg>
  );
}
```

### Vue

```vue
<!-- Gentleface "timeline" (line-round), MIT. https://gentleface.com/icons/timeline -->
<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="M3.725 10.634C3.908 10.893 4 11.182 4 11.5C4 11.818 3.908 12.107 3.725 12.366C3.541 12.626 3.3 12.808 3 12.914L3 14.5C3 14.641 2.952 14.759 2.856 14.856C2.759 14.952 2.641 15 2.5 15C2.359 15 2.241 14.952 2.144 14.856C2.048 14.759 2 14.641 2 14.5L2 12.914C1.7 12.808 1.459 12.626 1.275 12.366C1.092 12.107 1 11.818 1 11.5C1 11.182 1.092 10.893 1.275 10.634C1.459 10.374 1.7 10.192 2 10.086L2 5.914C1.7 5.808 1.459 5.626 1.275 5.366C1.092 5.107 1 4.818 1 4.5C1 4.182 1.092 3.893 1.275 3.634C1.459 3.374 1.7 3.192 2 3.086L2 1.5C2 1.359 2.048 1.241 2.144 1.144C2.241 1.048 2.359 1 2.5 1C2.641 1 2.759 1.048 2.856 1.144C2.952 1.241 3 1.359 3 1.5L3 3.086C3.3 3.192 3.541 3.374 3.725 3.634C3.908 3.893 4 4.182 4 4.5C4 4.818 3.908 5.107 3.725 5.366C3.541 5.626 3.3 5.808 3 5.914L3 10.086C3.3 10.192 3.541 10.374 3.725 10.634ZM14.707 2.293C14.902 2.488 15 2.724 15 3L15 6C15 6.276 14.902 6.512 14.707 6.707C14.512 6.902 14.276 7 14 7L7 7C6.724 7 6.488 6.902 6.293 6.707C6.098 6.512 6 6.276 6 6L6 3C6 2.724 6.098 2.488 6.293 2.293C6.488 2.098 6.724 2 7 2L14 2C14.276 2 14.512 2.098 14.707 2.293ZM14 6L14 3L7 3L7 6L14 6ZM14 14L7 14C6.724 14 6.488 13.902 6.293 13.707C6.098 13.512 6 13.276 6 13L6 10C6 9.724 6.098 9.488 6.293 9.293C6.488 9.098 6.724 9 7 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 14ZM7 10L7 13L14 13L14 10L7 10Z" />
  </svg>
</template>
```

### Svelte

```svelte
<!-- Gentleface "timeline" (line-round), MIT. https://gentleface.com/icons/timeline -->
<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="M3.725 10.634C3.908 10.893 4 11.182 4 11.5C4 11.818 3.908 12.107 3.725 12.366C3.541 12.626 3.3 12.808 3 12.914L3 14.5C3 14.641 2.952 14.759 2.856 14.856C2.759 14.952 2.641 15 2.5 15C2.359 15 2.241 14.952 2.144 14.856C2.048 14.759 2 14.641 2 14.5L2 12.914C1.7 12.808 1.459 12.626 1.275 12.366C1.092 12.107 1 11.818 1 11.5C1 11.182 1.092 10.893 1.275 10.634C1.459 10.374 1.7 10.192 2 10.086L2 5.914C1.7 5.808 1.459 5.626 1.275 5.366C1.092 5.107 1 4.818 1 4.5C1 4.182 1.092 3.893 1.275 3.634C1.459 3.374 1.7 3.192 2 3.086L2 1.5C2 1.359 2.048 1.241 2.144 1.144C2.241 1.048 2.359 1 2.5 1C2.641 1 2.759 1.048 2.856 1.144C2.952 1.241 3 1.359 3 1.5L3 3.086C3.3 3.192 3.541 3.374 3.725 3.634C3.908 3.893 4 4.182 4 4.5C4 4.818 3.908 5.107 3.725 5.366C3.541 5.626 3.3 5.808 3 5.914L3 10.086C3.3 10.192 3.541 10.374 3.725 10.634ZM14.707 2.293C14.902 2.488 15 2.724 15 3L15 6C15 6.276 14.902 6.512 14.707 6.707C14.512 6.902 14.276 7 14 7L7 7C6.724 7 6.488 6.902 6.293 6.707C6.098 6.512 6 6.276 6 6L6 3C6 2.724 6.098 2.488 6.293 2.293C6.488 2.098 6.724 2 7 2L14 2C14.276 2 14.512 2.098 14.707 2.293ZM14 6L14 3L7 3L7 6L14 6ZM14 14L7 14C6.724 14 6.488 13.902 6.293 13.707C6.098 13.512 6 13.276 6 13L6 10C6 9.724 6.098 9.488 6.293 9.293C6.488 9.098 6.724 9 7 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 14ZM7 10L7 13L14 13L14 10L7 10Z" />
</svg>
```

### HTML img

```html
<!-- Gentleface "timeline" (line-round), MIT. https://gentleface.com/icons/timeline. 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/timeline.svg" width="16" height="16" alt="">
```

### CSS

```css
/* Gentleface "timeline" (line-round), MIT. https://gentleface.com/icons/timeline. Takes the text color. */
.icon-timeline {
  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='M3.725 10.634C3.908 10.893 4 11.182 4 11.5C4 11.818 3.908 12.107 3.725 12.366C3.541 12.626 3.3 12.808 3 12.914L3 14.5C3 14.641 2.952 14.759 2.856 14.856C2.759 14.952 2.641 15 2.5 15C2.359 15 2.241 14.952 2.144 14.856C2.048 14.759 2 14.641 2 14.5L2 12.914C1.7 12.808 1.459 12.626 1.275 12.366C1.092 12.107 1 11.818 1 11.5C1 11.182 1.092 10.893 1.275 10.634C1.459 10.374 1.7 10.192 2 10.086L2 5.914C1.7 5.808 1.459 5.626 1.275 5.366C1.092 5.107 1 4.818 1 4.5C1 4.182 1.092 3.893 1.275 3.634C1.459 3.374 1.7 3.192 2 3.086L2 1.5C2 1.359 2.048 1.241 2.144 1.144C2.241 1.048 2.359 1 2.5 1C2.641 1 2.759 1.048 2.856 1.144C2.952 1.241 3 1.359 3 1.5L3 3.086C3.3 3.192 3.541 3.374 3.725 3.634C3.908 3.893 4 4.182 4 4.5C4 4.818 3.908 5.107 3.725 5.366C3.541 5.626 3.3 5.808 3 5.914L3 10.086C3.3 10.192 3.541 10.374 3.725 10.634ZM14.707 2.293C14.902 2.488 15 2.724 15 3L15 6C15 6.276 14.902 6.512 14.707 6.707C14.512 6.902 14.276 7 14 7L7 7C6.724 7 6.488 6.902 6.293 6.707C6.098 6.512 6 6.276 6 6L6 3C6 2.724 6.098 2.488 6.293 2.293C6.488 2.098 6.724 2 7 2L14 2C14.276 2 14.512 2.098 14.707 2.293ZM14 6L14 3L7 3L7 6L14 6ZM14 14L7 14C6.724 14 6.488 13.902 6.293 13.707C6.098 13.512 6 13.276 6 13L6 10C6 9.724 6.098 9.488 6.293 9.293C6.488 9.098 6.724 9 7 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 14ZM7 10L7 13L14 13L14 10L7 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='M3.725 10.634C3.908 10.893 4 11.182 4 11.5C4 11.818 3.908 12.107 3.725 12.366C3.541 12.626 3.3 12.808 3 12.914L3 14.5C3 14.641 2.952 14.759 2.856 14.856C2.759 14.952 2.641 15 2.5 15C2.359 15 2.241 14.952 2.144 14.856C2.048 14.759 2 14.641 2 14.5L2 12.914C1.7 12.808 1.459 12.626 1.275 12.366C1.092 12.107 1 11.818 1 11.5C1 11.182 1.092 10.893 1.275 10.634C1.459 10.374 1.7 10.192 2 10.086L2 5.914C1.7 5.808 1.459 5.626 1.275 5.366C1.092 5.107 1 4.818 1 4.5C1 4.182 1.092 3.893 1.275 3.634C1.459 3.374 1.7 3.192 2 3.086L2 1.5C2 1.359 2.048 1.241 2.144 1.144C2.241 1.048 2.359 1 2.5 1C2.641 1 2.759 1.048 2.856 1.144C2.952 1.241 3 1.359 3 1.5L3 3.086C3.3 3.192 3.541 3.374 3.725 3.634C3.908 3.893 4 4.182 4 4.5C4 4.818 3.908 5.107 3.725 5.366C3.541 5.626 3.3 5.808 3 5.914L3 10.086C3.3 10.192 3.541 10.374 3.725 10.634ZM14.707 2.293C14.902 2.488 15 2.724 15 3L15 6C15 6.276 14.902 6.512 14.707 6.707C14.512 6.902 14.276 7 14 7L7 7C6.724 7 6.488 6.902 6.293 6.707C6.098 6.512 6 6.276 6 6L6 3C6 2.724 6.098 2.488 6.293 2.293C6.488 2.098 6.724 2 7 2L14 2C14.276 2 14.512 2.098 14.707 2.293ZM14 6L14 3L7 3L7 6L14 6ZM14 14L7 14C6.724 14 6.488 13.902 6.293 13.707C6.098 13.512 6 13.276 6 13L6 10C6 9.724 6.098 9.488 6.293 9.293C6.488 9.098 6.724 9 7 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 14ZM7 10L7 13L14 13L14 10L7 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='M3.725 10.634C3.908 10.893 4 11.182 4 11.5C4 11.818 3.908 12.107 3.725 12.366C3.541 12.626 3.3 12.808 3 12.914L3 14.5C3 14.641 2.952 14.759 2.856 14.856C2.759 14.952 2.641 15 2.5 15C2.359 15 2.241 14.952 2.144 14.856C2.048 14.759 2 14.641 2 14.5L2 12.914C1.7 12.808 1.459 12.626 1.275 12.366C1.092 12.107 1 11.818 1 11.5C1 11.182 1.092 10.893 1.275 10.634C1.459 10.374 1.7 10.192 2 10.086L2 5.914C1.7 5.808 1.459 5.626 1.275 5.366C1.092 5.107 1 4.818 1 4.5C1 4.182 1.092 3.893 1.275 3.634C1.459 3.374 1.7 3.192 2 3.086L2 1.5C2 1.359 2.048 1.241 2.144 1.144C2.241 1.048 2.359 1 2.5 1C2.641 1 2.759 1.048 2.856 1.144C2.952 1.241 3 1.359 3 1.5L3 3.086C3.3 3.192 3.541 3.374 3.725 3.634C3.908 3.893 4 4.182 4 4.5C4 4.818 3.908 5.107 3.725 5.366C3.541 5.626 3.3 5.808 3 5.914L3 10.086C3.3 10.192 3.541 10.374 3.725 10.634ZM14.707 2.293C14.902 2.488 15 2.724 15 3L15 6C15 6.276 14.902 6.512 14.707 6.707C14.512 6.902 14.276 7 14 7L7 7C6.724 7 6.488 6.902 6.293 6.707C6.098 6.512 6 6.276 6 6L6 3C6 2.724 6.098 2.488 6.293 2.293C6.488 2.098 6.724 2 7 2L14 2C14.276 2 14.512 2.098 14.707 2.293ZM14 6L14 3L7 3L7 6L14 6ZM14 14L7 14C6.724 14 6.488 13.902 6.293 13.707C6.098 13.512 6 13.276 6 13L6 10C6 9.724 6.098 9.488 6.293 9.293C6.488 9.098 6.724 9 7 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 14ZM7 10L7 13L14 13L14 10L7 10Z'/%3E%3C/svg%3E
```

### Sprite

```html
<!-- Gentleface "timeline" (line-round), MIT. https://gentleface.com/icons/timeline
     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#timeline"/></svg>
```

### SwiftUI

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

struct TimelineIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 3.725, y: 10.634))
        p.addCurve(to: CGPoint(x: 4, y: 11.5), control1: CGPoint(x: 3.908, y: 10.893), control2: CGPoint(x: 4, y: 11.182))
        p.addCurve(to: CGPoint(x: 3.725, y: 12.366), control1: CGPoint(x: 4, y: 11.818), control2: CGPoint(x: 3.908, y: 12.107))
        p.addCurve(to: CGPoint(x: 3, y: 12.914), control1: CGPoint(x: 3.541, y: 12.626), control2: CGPoint(x: 3.3, y: 12.808))
        p.addLine(to: CGPoint(x: 3, y: 14.5))
        p.addCurve(to: CGPoint(x: 2.856, y: 14.856), control1: CGPoint(x: 3, y: 14.641), control2: CGPoint(x: 2.952, y: 14.759))
        p.addCurve(to: CGPoint(x: 2.5, y: 15), control1: CGPoint(x: 2.759, y: 14.952), control2: CGPoint(x: 2.641, y: 15))
        p.addCurve(to: CGPoint(x: 2.144, y: 14.856), control1: CGPoint(x: 2.359, y: 15), control2: CGPoint(x: 2.241, y: 14.952))
        p.addCurve(to: CGPoint(x: 2, y: 14.5), control1: CGPoint(x: 2.048, y: 14.759), control2: CGPoint(x: 2, y: 14.641))
        p.addLine(to: CGPoint(x: 2, y: 12.914))
        p.addCurve(to: CGPoint(x: 1.275, y: 12.366), control1: CGPoint(x: 1.7, y: 12.808), control2: CGPoint(x: 1.459, y: 12.626))
        p.addCurve(to: CGPoint(x: 1, y: 11.5), control1: CGPoint(x: 1.092, y: 12.107), control2: CGPoint(x: 1, y: 11.818))
        p.addCurve(to: CGPoint(x: 1.275, y: 10.634), control1: CGPoint(x: 1, y: 11.182), control2: CGPoint(x: 1.092, y: 10.893))
        p.addCurve(to: CGPoint(x: 2, y: 10.086), control1: CGPoint(x: 1.459, y: 10.374), control2: CGPoint(x: 1.7, y: 10.192))
        p.addLine(to: CGPoint(x: 2, y: 5.914))
        p.addCurve(to: CGPoint(x: 1.275, y: 5.366), control1: CGPoint(x: 1.7, y: 5.808), control2: CGPoint(x: 1.459, y: 5.626))
        p.addCurve(to: CGPoint(x: 1, y: 4.5), control1: CGPoint(x: 1.092, y: 5.107), control2: CGPoint(x: 1, y: 4.818))
        p.addCurve(to: CGPoint(x: 1.275, y: 3.634), control1: CGPoint(x: 1, y: 4.182), control2: CGPoint(x: 1.092, y: 3.893))
        p.addCurve(to: CGPoint(x: 2, y: 3.086), control1: CGPoint(x: 1.459, y: 3.374), control2: CGPoint(x: 1.7, y: 3.192))
        p.addLine(to: CGPoint(x: 2, y: 1.5))
        p.addCurve(to: CGPoint(x: 2.144, y: 1.144), control1: CGPoint(x: 2, y: 1.359), control2: CGPoint(x: 2.048, y: 1.241))
        p.addCurve(to: CGPoint(x: 2.5, y: 1), control1: CGPoint(x: 2.241, y: 1.048), control2: CGPoint(x: 2.359, y: 1))
        p.addCurve(to: CGPoint(x: 2.856, y: 1.144), control1: CGPoint(x: 2.641, y: 1), control2: CGPoint(x: 2.759, y: 1.048))
        p.addCurve(to: CGPoint(x: 3, y: 1.5), control1: CGPoint(x: 2.952, y: 1.241), control2: CGPoint(x: 3, y: 1.359))
        p.addLine(to: CGPoint(x: 3, y: 3.086))
        p.addCurve(to: CGPoint(x: 3.725, y: 3.634), control1: CGPoint(x: 3.3, y: 3.192), control2: CGPoint(x: 3.541, y: 3.374))
        p.addCurve(to: CGPoint(x: 4, y: 4.5), control1: CGPoint(x: 3.908, y: 3.893), control2: CGPoint(x: 4, y: 4.182))
        p.addCurve(to: CGPoint(x: 3.725, y: 5.366), control1: CGPoint(x: 4, y: 4.818), control2: CGPoint(x: 3.908, y: 5.107))
        p.addCurve(to: CGPoint(x: 3, y: 5.914), control1: CGPoint(x: 3.541, y: 5.626), control2: CGPoint(x: 3.3, y: 5.808))
        p.addLine(to: CGPoint(x: 3, y: 10.086))
        p.addCurve(to: CGPoint(x: 3.725, y: 10.634), control1: CGPoint(x: 3.3, y: 10.192), control2: CGPoint(x: 3.541, y: 10.374))
        p.closeSubpath()
        p.move(to: CGPoint(x: 14.707, y: 2.293))
        p.addCurve(to: CGPoint(x: 15, y: 3), control1: CGPoint(x: 14.902, y: 2.488), control2: CGPoint(x: 15, y: 2.724))
        p.addLine(to: CGPoint(x: 15, y: 6))
        p.addCurve(to: CGPoint(x: 14.707, y: 6.707), control1: CGPoint(x: 15, y: 6.276), control2: CGPoint(x: 14.902, y: 6.512))
        p.addCurve(to: CGPoint(x: 14, y: 7), control1: CGPoint(x: 14.512, y: 6.902), control2: CGPoint(x: 14.276, y: 7))
        p.addLine(to: CGPoint(x: 7, y: 7))
        p.addCurve(to: CGPoint(x: 6.293, y: 6.707), control1: CGPoint(x: 6.724, y: 7), control2: CGPoint(x: 6.488, y: 6.902))
        p.addCurve(to: CGPoint(x: 6, y: 6), control1: CGPoint(x: 6.098, y: 6.512), control2: CGPoint(x: 6, y: 6.276))
        p.addLine(to: CGPoint(x: 6, y: 3))
        p.addCurve(to: CGPoint(x: 6.293, y: 2.293), control1: CGPoint(x: 6, y: 2.724), control2: CGPoint(x: 6.098, y: 2.488))
        p.addCurve(to: CGPoint(x: 7, y: 2), control1: CGPoint(x: 6.488, y: 2.098), control2: CGPoint(x: 6.724, y: 2))
        p.addLine(to: CGPoint(x: 14, y: 2))
        p.addCurve(to: CGPoint(x: 14.707, y: 2.293), control1: CGPoint(x: 14.276, y: 2), control2: CGPoint(x: 14.512, y: 2.098))
        p.closeSubpath()
        p.move(to: CGPoint(x: 14, y: 6))
        p.addLine(to: CGPoint(x: 14, y: 3))
        p.addLine(to: CGPoint(x: 7, y: 3))
        p.addLine(to: CGPoint(x: 7, y: 6))
        p.addLine(to: CGPoint(x: 14, y: 6))
        p.closeSubpath()
        p.move(to: CGPoint(x: 14, y: 14))
        p.addLine(to: CGPoint(x: 7, y: 14))
        p.addCurve(to: CGPoint(x: 6.293, y: 13.707), control1: CGPoint(x: 6.724, y: 14), control2: CGPoint(x: 6.488, y: 13.902))
        p.addCurve(to: CGPoint(x: 6, y: 13), control1: CGPoint(x: 6.098, y: 13.512), control2: CGPoint(x: 6, y: 13.276))
        p.addLine(to: CGPoint(x: 6, y: 10))
        p.addCurve(to: CGPoint(x: 6.293, y: 9.293), control1: CGPoint(x: 6, y: 9.724), control2: CGPoint(x: 6.098, y: 9.488))
        p.addCurve(to: CGPoint(x: 7, y: 9), control1: CGPoint(x: 6.488, y: 9.098), control2: CGPoint(x: 6.724, y: 9))
        p.addLine(to: CGPoint(x: 14, y: 9))
        p.addCurve(to: CGPoint(x: 14.707, y: 9.293), control1: CGPoint(x: 14.276, y: 9), control2: CGPoint(x: 14.512, y: 9.098))
        p.addCurve(to: CGPoint(x: 15, y: 10), control1: CGPoint(x: 14.902, y: 9.488), control2: CGPoint(x: 15, y: 9.724))
        p.addLine(to: CGPoint(x: 15, y: 13))
        p.addCurve(to: CGPoint(x: 14.707, y: 13.707), control1: CGPoint(x: 15, y: 13.276), control2: CGPoint(x: 14.902, y: 13.512))
        p.addCurve(to: CGPoint(x: 14, y: 14), control1: CGPoint(x: 14.512, y: 13.902), control2: CGPoint(x: 14.276, y: 14))
        p.closeSubpath()
        p.move(to: CGPoint(x: 7, y: 10))
        p.addLine(to: CGPoint(x: 7, y: 13))
        p.addLine(to: CGPoint(x: 14, y: 13))
        p.addLine(to: CGPoint(x: 14, y: 10))
        p.addLine(to: CGPoint(x: 7, y: 10))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

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

### Compose

```kotlin
// Gentleface "timeline" (line-round), MIT. https://gentleface.com/icons/timeline
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 TimelineIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "timeline", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("M3.725 10.634C3.908 10.893 4 11.182 4 11.5C4 11.818 3.908 12.107 3.725 12.366C3.541 12.626 3.3 12.808 3 12.914L3 14.5C3 14.641 2.952 14.759 2.856 14.856C2.759 14.952 2.641 15 2.5 15C2.359 15 2.241 14.952 2.144 14.856C2.048 14.759 2 14.641 2 14.5L2 12.914C1.7 12.808 1.459 12.626 1.275 12.366C1.092 12.107 1 11.818 1 11.5C1 11.182 1.092 10.893 1.275 10.634C1.459 10.374 1.7 10.192 2 10.086L2 5.914C1.7 5.808 1.459 5.626 1.275 5.366C1.092 5.107 1 4.818 1 4.5C1 4.182 1.092 3.893 1.275 3.634C1.459 3.374 1.7 3.192 2 3.086L2 1.5C2 1.359 2.048 1.241 2.144 1.144C2.241 1.048 2.359 1 2.5 1C2.641 1 2.759 1.048 2.856 1.144C2.952 1.241 3 1.359 3 1.5L3 3.086C3.3 3.192 3.541 3.374 3.725 3.634C3.908 3.893 4 4.182 4 4.5C4 4.818 3.908 5.107 3.725 5.366C3.541 5.626 3.3 5.808 3 5.914L3 10.086C3.3 10.192 3.541 10.374 3.725 10.634ZM14.707 2.293C14.902 2.488 15 2.724 15 3L15 6C15 6.276 14.902 6.512 14.707 6.707C14.512 6.902 14.276 7 14 7L7 7C6.724 7 6.488 6.902 6.293 6.707C6.098 6.512 6 6.276 6 6L6 3C6 2.724 6.098 2.488 6.293 2.293C6.488 2.098 6.724 2 7 2L14 2C14.276 2 14.512 2.098 14.707 2.293ZM14 6L14 3L7 3L7 6L14 6ZM14 14L7 14C6.724 14 6.488 13.902 6.293 13.707C6.098 13.512 6 13.276 6 13L6 10C6 9.724 6.098 9.488 6.293 9.293C6.488 9.098 6.724 9 7 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 14ZM7 10L7 13L14 13L14 10L7 10Z"),
        fill = SolidColor(Color.Black),
    ).build()
}

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

### Android XML

```xml
<!-- res/drawable/ic_timeline.xml · Gentleface "timeline" (line-round), MIT. https://gentleface.com/icons/timeline -->
<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="M3.725 10.634C3.908 10.893 4 11.182 4 11.5C4 11.818 3.908 12.107 3.725 12.366C3.541 12.626 3.3 12.808 3 12.914L3 14.5C3 14.641 2.952 14.759 2.856 14.856C2.759 14.952 2.641 15 2.5 15C2.359 15 2.241 14.952 2.144 14.856C2.048 14.759 2 14.641 2 14.5L2 12.914C1.7 12.808 1.459 12.626 1.275 12.366C1.092 12.107 1 11.818 1 11.5C1 11.182 1.092 10.893 1.275 10.634C1.459 10.374 1.7 10.192 2 10.086L2 5.914C1.7 5.808 1.459 5.626 1.275 5.366C1.092 5.107 1 4.818 1 4.5C1 4.182 1.092 3.893 1.275 3.634C1.459 3.374 1.7 3.192 2 3.086L2 1.5C2 1.359 2.048 1.241 2.144 1.144C2.241 1.048 2.359 1 2.5 1C2.641 1 2.759 1.048 2.856 1.144C2.952 1.241 3 1.359 3 1.5L3 3.086C3.3 3.192 3.541 3.374 3.725 3.634C3.908 3.893 4 4.182 4 4.5C4 4.818 3.908 5.107 3.725 5.366C3.541 5.626 3.3 5.808 3 5.914L3 10.086C3.3 10.192 3.541 10.374 3.725 10.634ZM14.707 2.293C14.902 2.488 15 2.724 15 3L15 6C15 6.276 14.902 6.512 14.707 6.707C14.512 6.902 14.276 7 14 7L7 7C6.724 7 6.488 6.902 6.293 6.707C6.098 6.512 6 6.276 6 6L6 3C6 2.724 6.098 2.488 6.293 2.293C6.488 2.098 6.724 2 7 2L14 2C14.276 2 14.512 2.098 14.707 2.293ZM14 6L14 3L7 3L7 6L14 6ZM14 14L7 14C6.724 14 6.488 13.902 6.293 13.707C6.098 13.512 6 13.276 6 13L6 10C6 9.724 6.098 9.488 6.293 9.293C6.488 9.098 6.724 9 7 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 14ZM7 10L7 13L14 13L14 10L7 10Z"/>
</vector>
```

### Flutter

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

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

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

class _TimelineIconPainter extends CustomPainter {
  _TimelineIconPainter(this.color);
  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(size.width / 16, size.height / 16);
    final p = Path()
      ..moveTo(3.725, 10.634)
      ..cubicTo(3.908, 10.893, 4, 11.182, 4, 11.5)
      ..cubicTo(4, 11.818, 3.908, 12.107, 3.725, 12.366)
      ..cubicTo(3.541, 12.626, 3.3, 12.808, 3, 12.914)
      ..lineTo(3, 14.5)
      ..cubicTo(3, 14.641, 2.952, 14.759, 2.856, 14.856)
      ..cubicTo(2.759, 14.952, 2.641, 15, 2.5, 15)
      ..cubicTo(2.359, 15, 2.241, 14.952, 2.144, 14.856)
      ..cubicTo(2.048, 14.759, 2, 14.641, 2, 14.5)
      ..lineTo(2, 12.914)
      ..cubicTo(1.7, 12.808, 1.459, 12.626, 1.275, 12.366)
      ..cubicTo(1.092, 12.107, 1, 11.818, 1, 11.5)
      ..cubicTo(1, 11.182, 1.092, 10.893, 1.275, 10.634)
      ..cubicTo(1.459, 10.374, 1.7, 10.192, 2, 10.086)
      ..lineTo(2, 5.914)
      ..cubicTo(1.7, 5.808, 1.459, 5.626, 1.275, 5.366)
      ..cubicTo(1.092, 5.107, 1, 4.818, 1, 4.5)
      ..cubicTo(1, 4.182, 1.092, 3.893, 1.275, 3.634)
      ..cubicTo(1.459, 3.374, 1.7, 3.192, 2, 3.086)
      ..lineTo(2, 1.5)
      ..cubicTo(2, 1.359, 2.048, 1.241, 2.144, 1.144)
      ..cubicTo(2.241, 1.048, 2.359, 1, 2.5, 1)
      ..cubicTo(2.641, 1, 2.759, 1.048, 2.856, 1.144)
      ..cubicTo(2.952, 1.241, 3, 1.359, 3, 1.5)
      ..lineTo(3, 3.086)
      ..cubicTo(3.3, 3.192, 3.541, 3.374, 3.725, 3.634)
      ..cubicTo(3.908, 3.893, 4, 4.182, 4, 4.5)
      ..cubicTo(4, 4.818, 3.908, 5.107, 3.725, 5.366)
      ..cubicTo(3.541, 5.626, 3.3, 5.808, 3, 5.914)
      ..lineTo(3, 10.086)
      ..cubicTo(3.3, 10.192, 3.541, 10.374, 3.725, 10.634)
      ..close()
      ..moveTo(14.707, 2.293)
      ..cubicTo(14.902, 2.488, 15, 2.724, 15, 3)
      ..lineTo(15, 6)
      ..cubicTo(15, 6.276, 14.902, 6.512, 14.707, 6.707)
      ..cubicTo(14.512, 6.902, 14.276, 7, 14, 7)
      ..lineTo(7, 7)
      ..cubicTo(6.724, 7, 6.488, 6.902, 6.293, 6.707)
      ..cubicTo(6.098, 6.512, 6, 6.276, 6, 6)
      ..lineTo(6, 3)
      ..cubicTo(6, 2.724, 6.098, 2.488, 6.293, 2.293)
      ..cubicTo(6.488, 2.098, 6.724, 2, 7, 2)
      ..lineTo(14, 2)
      ..cubicTo(14.276, 2, 14.512, 2.098, 14.707, 2.293)
      ..close()
      ..moveTo(14, 6)
      ..lineTo(14, 3)
      ..lineTo(7, 3)
      ..lineTo(7, 6)
      ..lineTo(14, 6)
      ..close()
      ..moveTo(14, 14)
      ..lineTo(7, 14)
      ..cubicTo(6.724, 14, 6.488, 13.902, 6.293, 13.707)
      ..cubicTo(6.098, 13.512, 6, 13.276, 6, 13)
      ..lineTo(6, 10)
      ..cubicTo(6, 9.724, 6.098, 9.488, 6.293, 9.293)
      ..cubicTo(6.488, 9.098, 6.724, 9, 7, 9)
      ..lineTo(14, 9)
      ..cubicTo(14.276, 9, 14.512, 9.098, 14.707, 9.293)
      ..cubicTo(14.902, 9.488, 15, 9.724, 15, 10)
      ..lineTo(15, 13)
      ..cubicTo(15, 13.276, 14.902, 13.512, 14.707, 13.707)
      ..cubicTo(14.512, 13.902, 14.276, 14, 14, 14)
      ..close()
      ..moveTo(7, 10)
      ..lineTo(7, 13)
      ..lineTo(14, 13)
      ..lineTo(14, 10)
      ..lineTo(7, 10)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

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