Menu

Beta
Sign in
Share SVG icon, rounded

Share SVG icon, rounded

A share symbol for sending or distributing content to others. Add it to a photo viewer’s action bar or a news site’s article controls.

Free · from Creator Social Icons, Rounded

Similar SVGs

More from Creator Social Icons, Rounded

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/jv12y7kjgAc7/amnt.svg" alt="Share" 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="blue" data-name="Blue"><path d="M498 88c-225 10-412 201-402 429 8 191 144 355 334 392 32 6 64 7 97 7 170-2 327-123 381-283 16-47 20-96 20-145-1-227-208-409-430-400zm88 306l-159 94c3 9 2 20-1 29l160 94c99-76 228 41 165 144-50 81-173 75-204-18-5-14-8-30-5-44l-164-97c-18 8-33 17-54 19-64 5-121-47-121-111 0-65 56-119 121-113 18 2 38 6 53 18 19-14 159-91 162-95 4-6 1-17 2-24 3-25 17-51 35-68 25-25 63-36 97-31 72 12 114 91 83 156-23 48-75 76-127 66-16-3-28-12-43-19z" fill="#249dfa" stroke="#249dfa"/></g><g id="navy" data-name="Navy"><path d="M486 56c-167 8-321 120-387 271-28 63-38 133-34 201 15 250 223 431 473 419 183-9 350-136 403-313 16-52 21-105 19-158-5-177-133-336-297-395-57-20-117-27-177-25zm12 32c222-9 429 173 430 400 0 49-4 98-20 145-54 160-211 281-381 283-33 0-65-1-97-7-190-37-326-201-334-392-10-228 177-419 402-429z" fill="#022144" stroke="#022144"/><path d="M586 394c15 7 27 16 43 19 52 10 104-18 127-66 31-65-11-144-83-156-34-5-72 6-97 31-18 17-32 43-35 68-1 7 2 18-2 24-3 4-143 81-162 95-15-12-35-16-53-18-65-6-121 48-121 113 0 64 57 116 121 111 21-2 36-11 54-19l164 97c-3 14 0 30 5 44 31 93 154 99 204 18 63-103-66-220-165-144l-160-94c3-9 4-20 1-29zm60-178c114-11 127 159 14 172-79 9-121-87-69-144 14-15 33-26 55-28zM546 337c5 15 14 26 22 39l-147 87c-7-14-14-27-25-37zM309 416c84-7 125 101 60 153-14 11-30 18-48 20-112 9-124-163-12-173zM420 542l148 86c-8 13-17 24-22 39l-150-87c8-13 19-23 24-38zm230 71c112-9 120 166 6 173-112 7-119-164-6-173z" fill="#022144" stroke="#022144"/></g><g id="amber" data-name="Amber"><path d="M650 613c-113 9-106 180 6 173 114-7 106-182-6-173z" fill="#fdcd03" stroke="#fdcd03"/><path d="M646 216c-22 2-41 13-55 28-52 57-10 153 69 144 113-13 100-183-14-172z" fill="#fdcd03" stroke="#fdcd03"/><path d="M309 416c-112 10-100 182 12 173 18-2 34-9 48-20 65-52 24-160-60-153z" fill="#fdcd03" stroke="#fdcd03"/></g><g id="ivory" data-name="Ivory"><path d="M420 542c-5 15-16 25-24 38l150 87c5-15 14-26 22-39z" fill="#fcf8e9" stroke="#fcf8e9"/><path d="M546 337l-150 89c11 10 18 23 25 37l147-87c-8-13-17-24-22-39z" fill="#fcf8e9" stroke="#fcf8e9"/></g></svg>
CSS background-image
.share {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/jv12y7kjgAc7/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.share {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/jv12y7kjgAc7/amnt.svg") center / contain no-repeat;
}
React
import ShareSvg from "./share.jsx"; // from the React tab above

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

Tags

sharesendsocialcontent

Made with AMNT

AMNT Draw 1.2 drew this from the words Share. Flat, rounded icons in a consistent set. Use two colours and clean 2 px lines with rounded ends and corners. Keep each shape simple, balanced, and easy to recognise at small sizes. Use the same proportions, line weight, and colour placement for every icon. as part of the pack Creator Social Icons, Rounded. 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