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%
Half Star SVG element, flat

Half Star SVG element, flat

An outlined five-point star has its left half filled. Use it to show partial scores on review cards or average ratings in comparison tables.

Similar SVGs

More from Star ratings, flat · Set 2

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/ZHSz-9oNn1VB/amnt.svg" alt="Half Star" 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="amber" data-name="Amber"><path d="M508 61c-14 20-27 56-38 79-29 61-57 123-86 184-3 6-6 19-12 24-7 7-40 8-51 9-29 3-58 7-86 10-43 5-86 11-129 16-14 2-30 1-43 6 15 8 44 37 59 50 54 48 110 94 164 142 4 4 13 9 14 14 4 11-10 48-13 61-8 28-15 55-22 83-14 55-29 110-43 166 19-8 36-21 54-31 42-25 84-49 127-73 30-17 59-34 89-52 4-2 14-6 16-10 3-7 0-99 0-114 0-94 0-188 0-282 0-65 0-129 0-193 0-29 3-61 0-89z" fill="#fdd102" stroke="#fdd102"/></g><g id="black" data-name="Black"><path d="M282 601c-3 19-10 38-15 57-10 40-21 81-31 121-8 30-15 60-23 89-3 9-4 17-6 25-5 21-18 52 18 31 74-41 146-85 220-126 14-8 51-34 63-37 2-1 3-2 5-1 6 0 122 70 138 79 47 27 94 54 141 81 6 4 14 11 21 12 22 2 3-44 0-55-7-30-15-59-23-89-15-59-33-117-46-177 0-3-2-7-1-10 1-5 100-87 112-98 40-35 80-69 120-104 4-3 13-9 14-14 1-4 1-8-3-11-5-4-50-7-59-8-33-4-66-9-99-12-34-4-67-8-100-12-11-1-58-5-64-9-4-3-10-21-12-26-24-51-47-102-71-153-7-14-59-130-63-132-9-6-13 1-17 8-36 70-67 143-100 214-14 30-25 63-42 90-63 9-125 15-187 23-32 4-63 7-94 11-41 6-63 2-21 38 54 47 109 93 161 140 17 15 45 44 64 55zM508 61c3 28 0 60 0 89 0 64 0 128 0 193 0 94 0 188 0 282 0 15 3 107 0 114-2 4-12 8-16 10-30 18-59 35-89 52-43 24-85 48-127 73-18 10-35 23-54 31 14-56 29-111 43-166 7-28 14-55 22-83 3-13 17-50 13-61-1-5-10-10-14-14-54-48-110-94-164-142-15-13-44-42-59-50 13-5 29-4 43-6 43-5 86-11 129-16 28-3 57-7 86-10 11-1 44-2 51-9 6-5 9-18 12-24 29-61 57-123 86-184 11-23 24-59 38-79zm8 1c14 16 36 75 47 98 26 55 51 110 77 165 3 6 6 18 12 23 7 7 40 8 52 9 28 3 57 7 85 10 26 3 158 16 171 22-29 28-61 52-91 78-44 38-88 77-132 115-4 3-12 8-14 14-2 7 12 49 14 59 7 28 14 55 22 83 10 38 20 76 30 115 4 17 7 35 13 51-19-8-36-20-54-30-42-24-84-49-126-73-30-17-60-34-89-51-4-3-15-6-17-11-3-7 0-98 0-113 0-188 2-377 0-564z" fill="#111316" stroke="#111316"/></g></svg>
CSS background-image
.half-star {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/ZHSz-9oNn1VB/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.half-star {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/ZHSz-9oNn1VB/amnt.svg") center / contain no-repeat;
}
React
import HalfStarSvg from "./half-star.jsx"; // from the React tab above

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

Tags

Made with AMNT

AMNT Draw 1.2 drew this from the words Half Star: One large outlined star with its left half filled. A flat element. as part of the pack Star ratings, 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