Gentleface › Layout & interface › timeline

timeline icon

Timeline: timeline, chronology, event timeline, activity timeline. 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="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

// 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: see /icons/timeline.md

Svelte

Svelte: see /icons/timeline.md

HTML img

HTML img: see /icons/timeline.md

CSS

CSS: see /icons/timeline.md

Data URL

Data URL: see /icons/timeline.md

Sprite

Sprite: see /icons/timeline.md

SwiftUI

SwiftUI: see /icons/timeline.md

Compose

Compose: see /icons/timeline.md

Android XML

Android XML: see /icons/timeline.md

Flutter

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

timeline, chronology, event timeline, activity timeline

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)

Tags

timeline, events, history, chronology, milestones, roadmap, schedule, feed

Category

Layout & interface

Component name

TimelineIcon

History

2026-10-14 added

Family 32

browser cards columns columns-gear kanban layout layout-dashboard layout-dashboard-gear layout-dashboard-pencil layout-dashboard-plus layout-dashboard-sparkle maximize

More layout & interface icons

apps checkbox checkbox-indeterminate checkbox-off cursor cursor-text cursor-user drag-drop grid grip-horizontal grip-vertical hand hand-grab hand-off hand-pointer input-search · all layout & interface icons

For agents

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

timeline icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp