Menu

Beta
Sign in
Music Track SVG icon, rounded

Music Track SVG icon, rounded

A music track symbol for songs or audio selections. It belongs in a streaming service’s playlist controls or a video editor’s sound library.

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/csuX3vCIIWPk/amnt.svg" alt="Music Track" 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="royal-blue" data-name="Royal Blue"><path d="M486 97c-231 12-400 215-389 441 8 164 122 307 273 365 53 20 112 26 168 24 41-2 83-12 122-27 172-67 275-230 267-414-2-49-15-98-35-142-72-160-232-255-406-247zM654 529v-139l-185 49c0 44 0 88 0 133 0 31 3 64-1 95-8 52-55 92-107 92-56 0-102-48-102-103 0-62 59-110 119-101 0-34-5-187 3-208 4-11 11-21 22-27 19-11 100-29 127-36 31-8 146-44 169-42 50 4 43 60 43 96 0 24 0 49 0 74 0 45 0 90 0 136 0 31 4 65-1 95-8 50-52 88-102 89-110 2-140-152-42-196 18-8 37-11 57-7z" fill="#3270f5" stroke="#3270f5"/><path d="M716 489v-202z" fill="#3270f5" stroke="#3270f5"/><path d="M716 631v-138z" fill="#3270f5" stroke="#3270f5"/><path d="M443 467v-45z" fill="#3270f5" stroke="#3270f5"/><path d="M443 637v-19z" fill="#3270f5" stroke="#3270f5"/><path d="M443 564v-17z" fill="#3270f5" stroke="#3270f5"/><path d="M443 609v-12z" fill="#3270f5" stroke="#3270f5"/><path d="M443 514v-11z" fill="#3270f5" stroke="#3270f5"/><path d="M443 594v-10z" fill="#3270f5" stroke="#3270f5"/><path d="M366 733h-10z" fill="#3270f5" stroke="#3270f5"/><path d="M357 579h9z" fill="#3270f5" stroke="#3270f5"/><path d="M443 575v-7z" fill="#3270f5" stroke="#3270f5"/></g><g id="white" data-name="White"><path d="M716 489v-202c-1-9-8-19-18-20-13-2-82 20-100 25-43 12-86 24-130 35-79 21-65 17-65 99 0 54 0 109 0 164-12-5-23-11-37-11h-9c-76 5-99 110-31 146 9 4 20 8 30 8h10c32 0 64-27 74-57 4-13 3-26 3-39v-19-9-12-3-10-9-7-4-17-33-11-36-45c2-4 103-30 116-33 40-11 81-19 120-32v207c-71-40-147 37-106 106 40 68 146 32 143-39v-138z" fill="#fcfcfc" stroke="#fcfcfc"/></g><g id="navy" data-name="Navy"><path d="M654 529c-20-4-39-1-57 7-98 44-68 198 42 196 50-1 94-39 102-89 5-30 1-64 1-95 0-46 0-91 0-136 0-25 0-50 0-74 0-36 7-92-43-96-23-2-138 34-169 42-27 7-108 25-127 36-11 6-18 16-22 27-8 21-3 174-3 208-60-9-119 39-119 101 0 55 46 103 102 103 52 0 99-40 107-92 4-31 1-64 1-95 0-45 0-89 0-133l185-49zm62-242v202 4 138c3 71-103 107-143 39-41-69 35-146 106-106v-207c-39 13-80 21-120 32-13 3-114 29-116 33v45 36 11 33 17 4 7 9 10 3 12 9 19c0 13 1 26-3 39-10 30-42 57-74 57h-10c-10 0-21-4-30-8-68-36-45-141 31-146h9c14 0 25 6 37 11 0-55 0-110 0-164 0-82-14-78 65-99 44-11 87-23 130-35 18-5 87-27 100-25 10 1 17 11 18 20z" fill="#0e244b" stroke="#0e244b"/></g></svg>
CSS background-image
.music-track {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/csuX3vCIIWPk/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.music-track {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/csuX3vCIIWPk/amnt.svg") center / contain no-repeat;
}
React
import MusicTrackSvg from "./music-track.jsx"; // from the React tab above

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

Tags

musicaudiotracksound

Made with AMNT

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