spotify icon
spotify-fill from Akar Icons by Arturo Wibawa · Fill · MIT Free for personal and commercial use.
- Name
- spotify-fill
- Set
- Akar Icons
- Style
- Fill
- Viewbox
- 24×24
- License
- MIT
The same icon in other sets
spotify-filledAnt Design IconsspotifyBootstrap IconsspotifyBoxicons BrandsspotifyCoreUI BrandsspotifyFont Awesome 6 BrandsspotifyFont Awesome BrandsspotifyHuge IconsspotifyIconoirspotifyJam IconsspotifyLine 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="0 0 24 24"><g fill="none"><g clip-path="url(#SVGXv8lpc2Y)"><path fill="currentColor" d="M11.995 0C5.381 0 0 5.382 0 11.996C0 18.616 5.381 24 11.995 24C18.615 24 24 18.615 24 11.996C24 5.382 18.615 0 11.995 0M5.908 16.404a14.6 14.6 0 0 1 4.238-.638c2.414 0 4.797.612 6.892 1.77c.125.068.238.292.29.572c.05.28.03.567-.052.716a.61.61 0 0 1-.834.24A13.1 13.1 0 0 0 6.277 18.03a.61.61 0 0 1-.771-.402c-.107-.35.114-1.13.402-1.224m-.523-4.42a18.2 18.2 0 0 1 4.76-.635c2.894 0 5.767.7 8.31 2.026c.179.09.31.244.37.432a.75.75 0 0 1-.052.578c-.227.444-.493.743-.66.743a.8.8 0 0 1-.35-.086a16.3 16.3 0 0 0-7.617-1.854a16.3 16.3 0 0 0-4.366.585a.75.75 0 0 1-.92-.525c-.112-.422.145-1.16.525-1.264M5.25 9.098a.88.88 0 0 1-1.073-.641c-.123-.498.188-1.076.64-1.19a22.4 22.4 0 0 1 5.328-.649c3.45 0 6.756.776 9.824 2.307a.89.89 0 0 1 .4 1.19c-.143.288-.453.598-.795.598a.9.9 0 0 1-.388-.087A20 20 0 0 0 10.145 8.5c-1.635 0-3.282.201-4.895.598"/></g><defs><clipPath id="SVGXv8lpc2Y"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>
React
import type { SVGProps } from "react";
export function AkarIconsSpotifyFill(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><g clipPath="url(#SVGXv8lpc2Y)"><path fill="currentColor" d="M11.995 0C5.381 0 0 5.382 0 11.996C0 18.616 5.381 24 11.995 24C18.615 24 24 18.615 24 11.996C24 5.382 18.615 0 11.995 0M5.908 16.404a14.6 14.6 0 0 1 4.238-.638c2.414 0 4.797.612 6.892 1.77c.125.068.238.292.29.572c.05.28.03.567-.052.716a.61.61 0 0 1-.834.24A13.1 13.1 0 0 0 6.277 18.03a.61.61 0 0 1-.771-.402c-.107-.35.114-1.13.402-1.224m-.523-4.42a18.2 18.2 0 0 1 4.76-.635c2.894 0 5.767.7 8.31 2.026c.179.09.31.244.37.432a.75.75 0 0 1-.052.578c-.227.444-.493.743-.66.743a.8.8 0 0 1-.35-.086a16.3 16.3 0 0 0-7.617-1.854a16.3 16.3 0 0 0-4.366.585a.75.75 0 0 1-.92-.525c-.112-.422.145-1.16.525-1.264M5.25 9.098a.88.88 0 0 1-1.073-.641c-.123-.498.188-1.076.64-1.19a22.4 22.4 0 0 1 5.328-.649c3.45 0 6.756.776 9.824 2.307a.89.89 0 0 1 .4 1.19c-.143.288-.453.598-.795.598a.9.9 0 0 1-.388-.087A20 20 0 0 0 10.145 8.5c-1.635 0-3.282.201-4.895.598"/></g><defs><clipPath id="SVGXv8lpc2Y"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><g clip-path="url(#SVGXv8lpc2Y)"><path fill="currentColor" d="M11.995 0C5.381 0 0 5.382 0 11.996C0 18.616 5.381 24 11.995 24C18.615 24 24 18.615 24 11.996C24 5.382 18.615 0 11.995 0M5.908 16.404a14.6 14.6 0 0 1 4.238-.638c2.414 0 4.797.612 6.892 1.77c.125.068.238.292.29.572c.05.28.03.567-.052.716a.61.61 0 0 1-.834.24A13.1 13.1 0 0 0 6.277 18.03a.61.61 0 0 1-.771-.402c-.107-.35.114-1.13.402-1.224m-.523-4.42a18.2 18.2 0 0 1 4.76-.635c2.894 0 5.767.7 8.31 2.026c.179.09.31.244.37.432a.75.75 0 0 1-.052.578c-.227.444-.493.743-.66.743a.8.8 0 0 1-.35-.086a16.3 16.3 0 0 0-7.617-1.854a16.3 16.3 0 0 0-4.366.585a.75.75 0 0 1-.92-.525c-.112-.422.145-1.16.525-1.264M5.25 9.098a.88.88 0 0 1-1.073-.641c-.123-.498.188-1.076.64-1.19a22.4 22.4 0 0 1 5.328-.649c3.45 0 6.756.776 9.824 2.307a.89.89 0 0 1 .4 1.19c-.143.288-.453.598-.795.598a.9.9 0 0 1-.388-.087A20 20 0 0 0 10.145 8.5c-1.635 0-3.282.201-4.895.598"/></g><defs><clipPath id="SVGXv8lpc2Y"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg> </template>
CSS
.icon-spotify-fill {
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%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23SVGXv8lpc2Y)%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M11.995%200C5.381%200%200%205.382%200%2011.996C0%2018.616%205.381%2024%2011.995%2024C18.615%2024%2024%2018.615%2024%2011.996C24%205.382%2018.615%200%2011.995%200M5.908%2016.404a14.6%2014.6%200%200%201%204.238-.638c2.414%200%204.797.612%206.892%201.77c.125.068.238.292.29.572c.05.28.03.567-.052.716a.61.61%200%200%201-.834.24A13.1%2013.1%200%200%200%206.277%2018.03a.61.61%200%200%201-.771-.402c-.107-.35.114-1.13.402-1.224m-.523-4.42a18.2%2018.2%200%200%201%204.76-.635c2.894%200%205.767.7%208.31%202.026c.179.09.31.244.37.432a.75.75%200%200%201-.052.578c-.227.444-.493.743-.66.743a.8.8%200%200%201-.35-.086a16.3%2016.3%200%200%200-7.617-1.854a16.3%2016.3%200%200%200-4.366.585a.75.75%200%200%201-.92-.525c-.112-.422.145-1.16.525-1.264M5.25%209.098a.88.88%200%200%201-1.073-.641c-.123-.498.188-1.076.64-1.19a22.4%2022.4%200%200%201%205.328-.649c3.45%200%206.756.776%209.824%202.307a.89.89%200%200%201%20.4%201.19c-.143.288-.453.598-.795.598a.9.9%200%200%201-.388-.087A20%2020%200%200%200%2010.145%208.5c-1.635%200-3.282.201-4.895.598%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22SVGXv8lpc2Y%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h24v24H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fg%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%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23SVGXv8lpc2Y)%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M11.995%200C5.381%200%200%205.382%200%2011.996C0%2018.616%205.381%2024%2011.995%2024C18.615%2024%2024%2018.615%2024%2011.996C24%205.382%2018.615%200%2011.995%200M5.908%2016.404a14.6%2014.6%200%200%201%204.238-.638c2.414%200%204.797.612%206.892%201.77c.125.068.238.292.29.572c.05.28.03.567-.052.716a.61.61%200%200%201-.834.24A13.1%2013.1%200%200%200%206.277%2018.03a.61.61%200%200%201-.771-.402c-.107-.35.114-1.13.402-1.224m-.523-4.42a18.2%2018.2%200%200%201%204.76-.635c2.894%200%205.767.7%208.31%202.026c.179.09.31.244.37.432a.75.75%200%200%201-.052.578c-.227.444-.493.743-.66.743a.8.8%200%200%201-.35-.086a16.3%2016.3%200%200%200-7.617-1.854a16.3%2016.3%200%200%200-4.366.585a.75.75%200%200%201-.92-.525c-.112-.422.145-1.16.525-1.264M5.25%209.098a.88.88%200%200%201-1.073-.641c-.123-.498.188-1.076.64-1.19a22.4%2022.4%200%200%201%205.328-.649c3.45%200%206.756.776%209.824%202.307a.89.89%200%200%201%20.4%201.19c-.143.288-.453.598-.795.598a.9.9%200%200%201-.388-.087A20%2020%200%200%200%2010.145%208.5c-1.635%200-3.282.201-4.895.598%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22SVGXv8lpc2Y%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h24v24H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/akar-icons/spotify-fill.svg?color=%231a73e8&size=48
