spotify icon
spotify from Jam Icons by Michael Amprimo · Outline · MIT Free for personal and commercial use.
- Name
- spotify
- Set
- Jam Icons
- Style
- Outline
- Viewbox
- 24×24
- License
- MIT
The same icon in other sets
spotify-fillAkar Iconsspotify-filledAnt Design IconsspotifyBootstrap IconsspotifyBoxicons BrandsspotifyCoreUI BrandsspotifyFont Awesome 6 BrandsspotifyFont Awesome BrandsspotifyHuge IconsspotifyIconoirspotifyLine AwesomespotifyMaterial Line IconsspotifySVG LogosspotifyMage IconsspotifyMaterial Design Iconsspotify-fillMingCute IconspotifyMyna UI Iconsspotify-fillRemix IconspotifySimple Iconsspotify-darkSkill Iconsspotify-outlineTeenyicons
Use the spotify icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="-2 -2 24 24"><path fill="currentColor" d="M9.992 0C4.474 0 0 4.474 0 9.992s4.474 9.992 9.992 9.992s9.992-4.474 9.992-9.992S15.51 0 9.992 0m4.348 15.683c-.127.329-.355.512-.59.512a.52.52 0 0 1-.344-.141c-1.796-1.588-3.87-1.843-5.294-1.778c-1.578.073-2.735.544-2.747.549c-.363.15-.74-.174-.839-.724c-.1-.55.114-1.119.477-1.27c.052-.022 1.297-.534 3.029-.62a9 9 0 0 1 2.917.32a8.1 8.1 0 0 1 3.146 1.737c.326.289.436.922.245 1.415m1.27-3.063c-.15.329-.42.512-.699.512a.68.68 0 0 1-.407-.141c-2.127-1.588-4.584-1.843-6.271-1.778c-1.87.073-3.24.544-3.253.549c-.431.15-.876-.174-.995-.724c-.118-.55.135-1.119.566-1.27c.061-.022 1.536-.534 3.587-.62c1.208-.051 2.37.057 3.456.32a10.2 10.2 0 0 1 3.726 1.737c.386.288.516.922.29 1.415m.782-2.996a.96.96 0 0 1-.5-.142C10.835 6.404 4.276 8.234 4.21 8.252c-.528.153-1.075-.17-1.22-.721s.165-1.12.693-1.272c.076-.022 1.885-.534 4.4-.62a18.6 18.6 0 0 1 4.24.32c1.686.333 3.223.917 4.57 1.738c.474.288.633.921.357 1.414a.99.99 0 0 1-.858.513"/></svg>
React
import type { SVGProps } from "react";
export function JamSpotify(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="-2 -2 24 24"><path fill="currentColor" d="M9.992 0C4.474 0 0 4.474 0 9.992s4.474 9.992 9.992 9.992s9.992-4.474 9.992-9.992S15.51 0 9.992 0m4.348 15.683c-.127.329-.355.512-.59.512a.52.52 0 0 1-.344-.141c-1.796-1.588-3.87-1.843-5.294-1.778c-1.578.073-2.735.544-2.747.549c-.363.15-.74-.174-.839-.724c-.1-.55.114-1.119.477-1.27c.052-.022 1.297-.534 3.029-.62a9 9 0 0 1 2.917.32a8.1 8.1 0 0 1 3.146 1.737c.326.289.436.922.245 1.415m1.27-3.063c-.15.329-.42.512-.699.512a.68.68 0 0 1-.407-.141c-2.127-1.588-4.584-1.843-6.271-1.778c-1.87.073-3.24.544-3.253.549c-.431.15-.876-.174-.995-.724c-.118-.55.135-1.119.566-1.27c.061-.022 1.536-.534 3.587-.62c1.208-.051 2.37.057 3.456.32a10.2 10.2 0 0 1 3.726 1.737c.386.288.516.922.29 1.415m.782-2.996a.96.96 0 0 1-.5-.142C10.835 6.404 4.276 8.234 4.21 8.252c-.528.153-1.075-.17-1.22-.721s.165-1.12.693-1.272c.076-.022 1.885-.534 4.4-.62a18.6 18.6 0 0 1 4.24.32c1.686.333 3.223.917 4.57 1.738c.474.288.633.921.357 1.414a.99.99 0 0 1-.858.513"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="-2 -2 24 24"><path fill="currentColor" d="M9.992 0C4.474 0 0 4.474 0 9.992s4.474 9.992 9.992 9.992s9.992-4.474 9.992-9.992S15.51 0 9.992 0m4.348 15.683c-.127.329-.355.512-.59.512a.52.52 0 0 1-.344-.141c-1.796-1.588-3.87-1.843-5.294-1.778c-1.578.073-2.735.544-2.747.549c-.363.15-.74-.174-.839-.724c-.1-.55.114-1.119.477-1.27c.052-.022 1.297-.534 3.029-.62a9 9 0 0 1 2.917.32a8.1 8.1 0 0 1 3.146 1.737c.326.289.436.922.245 1.415m1.27-3.063c-.15.329-.42.512-.699.512a.68.68 0 0 1-.407-.141c-2.127-1.588-4.584-1.843-6.271-1.778c-1.87.073-3.24.544-3.253.549c-.431.15-.876-.174-.995-.724c-.118-.55.135-1.119.566-1.27c.061-.022 1.536-.534 3.587-.62c1.208-.051 2.37.057 3.456.32a10.2 10.2 0 0 1 3.726 1.737c.386.288.516.922.29 1.415m.782-2.996a.96.96 0 0 1-.5-.142C10.835 6.404 4.276 8.234 4.21 8.252c-.528.153-1.075-.17-1.22-.721s.165-1.12.693-1.272c.076-.022 1.885-.534 4.4-.62a18.6 18.6 0 0 1 4.24.32c1.686.333 3.223.917 4.57 1.738c.474.288.633.921.357 1.414a.99.99 0 0 1-.858.513"/></svg> </template>
CSS
.icon-spotify {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%22-2%20-2%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M9.992%200C4.474%200%200%204.474%200%209.992s4.474%209.992%209.992%209.992s9.992-4.474%209.992-9.992S15.51%200%209.992%200m4.348%2015.683c-.127.329-.355.512-.59.512a.52.52%200%200%201-.344-.141c-1.796-1.588-3.87-1.843-5.294-1.778c-1.578.073-2.735.544-2.747.549c-.363.15-.74-.174-.839-.724c-.1-.55.114-1.119.477-1.27c.052-.022%201.297-.534%203.029-.62a9%209%200%200%201%202.917.32a8.1%208.1%200%200%201%203.146%201.737c.326.289.436.922.245%201.415m1.27-3.063c-.15.329-.42.512-.699.512a.68.68%200%200%201-.407-.141c-2.127-1.588-4.584-1.843-6.271-1.778c-1.87.073-3.24.544-3.253.549c-.431.15-.876-.174-.995-.724c-.118-.55.135-1.119.566-1.27c.061-.022%201.536-.534%203.587-.62c1.208-.051%202.37.057%203.456.32a10.2%2010.2%200%200%201%203.726%201.737c.386.288.516.922.29%201.415m.782-2.996a.96.96%200%200%201-.5-.142C10.835%206.404%204.276%208.234%204.21%208.252c-.528.153-1.075-.17-1.22-.721s.165-1.12.693-1.272c.076-.022%201.885-.534%204.4-.62a18.6%2018.6%200%200%201%204.24.32c1.686.333%203.223.917%204.57%201.738c.474.288.633.921.357%201.414a.99.99%200%200%201-.858.513%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%22-2%20-2%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M9.992%200C4.474%200%200%204.474%200%209.992s4.474%209.992%209.992%209.992s9.992-4.474%209.992-9.992S15.51%200%209.992%200m4.348%2015.683c-.127.329-.355.512-.59.512a.52.52%200%200%201-.344-.141c-1.796-1.588-3.87-1.843-5.294-1.778c-1.578.073-2.735.544-2.747.549c-.363.15-.74-.174-.839-.724c-.1-.55.114-1.119.477-1.27c.052-.022%201.297-.534%203.029-.62a9%209%200%200%201%202.917.32a8.1%208.1%200%200%201%203.146%201.737c.326.289.436.922.245%201.415m1.27-3.063c-.15.329-.42.512-.699.512a.68.68%200%200%201-.407-.141c-2.127-1.588-4.584-1.843-6.271-1.778c-1.87.073-3.24.544-3.253.549c-.431.15-.876-.174-.995-.724c-.118-.55.135-1.119.566-1.27c.061-.022%201.536-.534%203.587-.62c1.208-.051%202.37.057%203.456.32a10.2%2010.2%200%200%201%203.726%201.737c.386.288.516.922.29%201.415m.782-2.996a.96.96%200%200%201-.5-.142C10.835%206.404%204.276%208.234%204.21%208.252c-.528.153-1.075-.17-1.22-.721s.165-1.12.693-1.272c.076-.022%201.885-.534%204.4-.62a18.6%2018.6%200%200%201%204.24.32c1.686.333%203.223.917%204.57%201.738c.474.288.633.921.357%201.414a.99.99%200%200%201-.858.513%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/jam/spotify.svg?color=%231a73e8&size=48
