Colours and style

Every picture in the library follows these, and so does every download.

Colour of single-colour icons
Palette for colourful pictures
As drawn
100%
Hourglass SVG element, flat

Hourglass SVG element, flat

A narrow frame holds two joined triangles, with a small pile of sand at the bottom. It fits a timed quiz screen or a queue status panel.

Similar SVGs

More from Loaders elements, flat · Set 2

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/i9JwBSdfTvB_/amnt.svg" alt="Hourglass" 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="navy" data-name="Navy"><path d="M794 103c28-12 33-50 19-73-18-29-56-23-85-23-73 0-144 0-216 0-73 0-144 0-216 0-30 0-66-5-84 24-15 24-8 60 19 71-6 16-8 32 6 44 2 3 7 4 9 7 3 6 0 17 0 24-1 29-6 57-15 86-13 44-19 91-5 136 3 11 9 20 13 31-25 13-23 32 0 45-4 11-10 22-13 34-15 57-5 111 9 167 8 35 11 71 11 108 0 9 3 35-1 43-1 2-7 5-9 7-12 11-13 28-4 42-8 5-16 7-23 13-11 9-17 22-19 35-7 52 48 65 88 71 77 12 156 14 235 14 78 0 157-2 234-14 22-4 48-8 66-21 39-27 23-84-19-97 9-14 8-33-4-44-3-2-8-4-10-7-3-7 0-34 0-43 1-37 4-72 12-108 17-74 27-127-5-200 24-13 24-31 0-45 4-11 10-20 13-31 14-45 8-92-5-135-8-29-15-57-15-86 0-7-2-19 0-25 2-3 6-4 8-6 14-12 14-29 6-44zM252 27c29-3 61 0 91 0 66 0 132 0 199 0 48 0 96 0 145 0 23 0 48 0 72 0 33 0 47 19 12 21-24 2-50-1-74-1-72 0-142-1-213-1-48 0-96 1-144 1-24 0-48 1-71 1-9 0-25 3-32-5-9-10 7-15 15-16zM736 150l6 3c0 28-2 55-8 82-14 56-31 96-17 156 3 13 7 27 16 39-30 10-28 42-2 44-25 54-24 115-11 171 5 22 12 44 16 67 6 38 6 76 6 115l-6 3c-2-73-31-139-76-196-20-26-45-51-70-73-14-13-31-24-43-39-8-9-14-20-14-32s3-23 10-32c12-17 31-30 46-44 25-22 48-45 69-71 20-26 39-54 52-85 10-22 18-47 22-72 2-11 0-25 4-36zM257 415c-30-27-17-136 0-169 15-29 1 68 1 73-2 22 4 82-1 96zm492 0c-28-33-15-108-4-147 2-7 3-17 7-23 14-22 0 70-1 76-1 14-2 29-1 43 1 13 5 28 3 40-1 4-2 8-4 11zM259 486c8 11-2 69-2 86-1 10 0 81-2 82-3 2-4-2-5-4-4-6-5-17-6-24-7-37-11-110 15-140zm491 2l3-2c6 21-3 61-4 85 0 11 3 80-3 83-16-28-22-144 4-166zM237 896c18-3 39 4 57 6 28 3 58 4 87 6 50 3 101 3 153 3 50 0 100-1 151-5 23-2 47-4 70-7 8-1 52-10 44 10-1 3-8 5-11 6-28 8-60 8-88 10-70 5-139 6-208 6-51 0-102-1-151-5-24-2-49-3-72-6-9-1-50-3-43-18 2-4 8-5 11-6zm57-709c0 11 4 22 7 32 16 53 45 99 80 141 14 16 30 32 46 46 20 19 47 35 60 59 7 13 7 27 2 41-10 24-50 51-70 70-21 19-41 40-58 63-34 44-61 97-69 154-2 11-1 23-2 35l-6-1c0-38 1-76 7-113 9-54 29-103 26-158-1-29-11-54-19-81 23-12 26-38-3-45 24-43 25-95 14-142-6-22-41-129-19-140l1 10c-1-14 7-13 10-24 2-8 0-18 2-26h421c0 88-17 153-72 223-17 21-36 42-57 61-22 20-51 39-66 65-7 11-9 24-8 37 1 12 6 22 13 31 14 19 34 32 51 48 27 24 52 50 74 79 57 77 65 135 65 230l-20 2c-18-1-37 3-56 4-45 2-91 3-136 3s-89-1-132-3c-20-1-40-5-60-4l-18-2c0-18-2-35-1-52 3-63 25-123 62-173 19-26 39-50 63-71 23-21 64-48 75-78 19-51-38-85-69-114-17-15-33-32-47-49-23-27-42-56-57-88-9-22-17-45-22-69-2-11-2-38-5-46-3 15-2 30-2 45z" fill="#01265d" stroke="#01265d"/></g><g id="baby-blue" data-name="Baby Blue"><path d="M445 365c-34-14-67-61-84-91-14-25-49-111-24-133 5-5 10-6 16-5 23 4 18 49 21 66s8 32 14 48c6 18 15 36 24 54 9 16 31 43 33 61zM291 158v5l1 6v2l1 9 1 7h5c0-15-1-30 2-45 3 8 3 35 5 46 5 24 13 47 22 69 15 32 34 61 57 88 14 17 30 34 47 49 31 29 88 63 69 114-11 30-52 57-75 78-24 21-44 45-63 71-37 50-59 110-62 173-1 17 1 34 1 52l18 2c0-32-3-35 17-61-30-22 21-123 38-147 20-28 44-54 70-77 9-8 21-15 30-24l1 3c-44 53-106 148-105 219 25-13 48-34 69-53 39-35 69-65 119-23 28 24 53 50 83 71 18 13 57 36 62 59 2 10 0 23 0 33l20-2c0-95-8-153-65-230-22-29-47-55-74-79-17-16-37-29-51-48-7-9-12-19-13-31-1-13 1-26 8-37 15-26 44-45 66-65 21-19 40-40 57-61 55-70 72-135 72-223h-421c-2 8 0 18-2 26-3 11-11 10-10 24z" fill="#c6e3fb" stroke="#c6e3fb"/></g><g id="amber" data-name="Amber"><path d="M704 884c0-10 2-23 0-33-5-23-44-46-62-59-30-21-55-47-83-71-50-42-80-12-119 23-21 19-44 40-69 53l-34 26c-20 26-17 29-17 61 20-1 40 3 60 4 43 2 87 3 132 3s91-1 136-3c19-1 38-5 56-4z" fill="#fccc1d" stroke="#fccc1d"/></g><g id="cobalt" data-name="Cobalt"><path d="M237 896c-3 1-9 2-11 6-7 15 34 17 43 18 23 3 48 4 72 6 49 4 100 5 151 5 69 0 138-1 208-6 28-2 60-2 88-10 3-1 10-3 11-6 8-20-36-11-44-10-23 3-47 5-70 7-51 4-101 5-151 5-52 0-103 0-153-3-29-2-59-3-87-6-18-2-39-9-57-6z" fill="#0e61b5" stroke="#0e61b5"/><path d="M252 27c-8 1-24 6-15 16 7 8 23 5 32 5 23 0 47-1 71-1 48 0 96-1 144-1 71 0 141 1 213 1 24 0 50 3 74 1 35-2 21-21-12-21-24 0-49 0-72 0-49 0-97 0-145 0-67 0-13
…
CSS background-image
.hourglass {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/i9JwBSdfTvB_/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.hourglass {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/i9JwBSdfTvB_/amnt.svg") center / contain no-repeat;
}
React
import HourglassSvg from "./hourglass.jsx"; // from the React tab above

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

Tags

Made with AMNT

AMNT Draw 1.2 drew this from the words Hourglass: Two joined triangles inside a narrow frame, with a small pile of sand below. A flat element. as part of the pack Loaders elements, flat · 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