Menu

Beta
Sign in
Timeline SVG icon, line

Timeline SVG icon, line

Three dots on a horizontal line connect to alternating vertical markers. It works on project plans and museum exhibit labels.

Free · from Charts and data icons, line · Set 2

Similar SVGs

More from Charts and data icons, line · Set 2

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/iCfqi7tkrgd5/amnt.svg" alt="Timeline" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="midnight" data-name="Midnight"><path d="M178 334c10-6 20-9 28-19 29-35 4-89-41-89-48 0-75 58-40 93 7 8 17 11 26 16v67c-70 12-103 99-49 150 53 51 136 21 150-50h173c13 44 30 64 75 76v73c-61 18-50 108 15 107 44-1 70-55 40-89-8-10-18-13-29-19v-72c38-7 70-36 75-76h174c4 13 6 25 14 37 30 45 97 53 136 14 37-37 33-99-7-132-12-11-27-13-42-20v-67c70-29 44-108-13-108-64 0-74 89-13 108v68c-39 7-68 36-75 75h-174c-14-100-156-99-175 0-21 0-166 2-174-1-8-30-23-55-52-67-7-4-15-5-23-8-3-8-2-58 1-67zm-22-85c43-8 55 54 16 62-44 10-55-54-16-62zm700 0c43-8 54 55 14 63-41 8-54-55-14-63zM154 424c86-11 103 118 19 130-86 12-102-119-19-130zm702 0c86-9 98 123 13 131-86 8-97-122-13-131zm-353 1c87-11 103 118 20 130-87 13-102-119-20-130zm6 247c41-5 50 59 9 64s-50-59-9-64z" fill="#041929" stroke="#041929"/></g><g id="blue" data-name="Blue"><path d="M154 424c-83 11-67 142 19 130 84-12 67-141-19-130z" fill="#1e9ef9" stroke="#1e9ef9"/></g><g id="red" data-name="Red"><path d="M856 424c-84 9-73 139 13 131 85-8 73-140-13-131z" fill="#fc4e3c" stroke="#fc4e3c"/></g><g id="green" data-name="Green"><path d="M503 425c-82 11-67 143 20 130 83-12 67-141-20-130z" fill="#03b64a" stroke="#03b64a"/></g><g id="sky" data-name="Sky"><path d="M856 249c-40 8-27 71 14 63 40-8 29-71-14-63z" fill="#01d3fc" stroke="#01d3fc"/></g><g id="amber" data-name="Amber"><path d="M156 249c-39 8-28 72 16 62 39-8 27-70-16-62z" fill="#fcd205" stroke="#fcd205"/></g><g id="purple" data-name="Purple"><path d="M509 672c-41 5-32 69 9 64s32-69-9-64z" fill="#9251f5" stroke="#9251f5"/></g></svg>
CSS background-image
.timeline {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/iCfqi7tkrgd5/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.timeline {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/iCfqi7tkrgd5/amnt.svg") center / contain no-repeat;
}
React
import TimelineSvg from "./timeline.jsx"; // from the React tab above

<TimelineSvg width={48} height={48} />

Tags

timelineeventssequencehistorychartsiconline

Made with AMNT

AMNT Draw 1.2 drew this from the words Timeline: Three dots along a horizontal line connect to alternating short vertical markers. A flat colour icon. as part of the pack Charts and data icons, line · Set 2. Want one like it? Make your own in the SVG studio.

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence

Settings