Menu

Beta
Sign in
Play Button SVG icon, rounded

Play Button SVG icon, rounded

A play control that signals video or audio playback. It fits on a video thumbnail in a streaming app and in a lesson player on an education website.

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/xSlrF820yD-p/amnt.svg" alt="Play Button" 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="yellow" data-name="Yellow"><path d="M502 210c-259 13-366 351-158 509 51 38 113 59 178 57 62-2 121-26 169-66 151-129 124-373-51-467-42-23-90-35-138-33zM425 349c5-1 10 0 15 1 12 3 23 13 34 19 45 26 89 53 133 81 14 9 40 21 51 34 9 10 9 26 1 36-10 13-75 45-93 56-25 14-50 27-75 41-17 9-34 22-51 28-6 3-13 4-19 3-21-4-23-26-23-42 0-47 0-93 2-139 1-22-2-83 4-99 2-9 11-17 21-19z" fill="#fccf2e" stroke="#fccf2e"/></g><g id="navy" data-name="Navy"><path d="M494 160c-181 9-319 175-311 352 8 184 165 324 347 316 184-8 320-173 310-352-10-181-164-325-346-316zm8 50c48-2 96 10 138 33 175 94 202 338 51 467-48 40-107 64-169 66-65 2-127-19-178-57-208-158-101-496 158-509z" fill="#1a3c71" stroke="#1a3c71"/><path d="M425 349c-10 2-19 10-21 19-6 16-3 77-4 99-2 46-2 92-2 139 0 16 2 38 23 42 6 1 13 0 19-3 17-6 34-19 51-28 25-14 50-27 75-41 18-11 83-43 93-56 8-10 8-26-1-36-11-13-37-25-51-34-44-28-88-55-133-81-11-6-22-16-34-19-5-1-10-2-15-1z" fill="#1a3c71" stroke="#1a3c71"/></g></svg>
CSS background-image
.play-button {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/xSlrF820yD-p/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.play-button {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/xSlrF820yD-p/amnt.svg") center / contain no-repeat;
}
React
import PlayButtonSvg from "./play-button.jsx"; // from the React tab above

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

Tags

playvideomediaplayback

Made with AMNT

AMNT Draw 1.2 drew this from the words Play button. 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