spotify icon logo

spotify-icon from SVG Logos by Gil Barbara · Color · CC0-1.0 Free for personal and commercial use.

Name
spotify-icon
Set
SVG Logos
Style
Color
Viewbox
256×256
License
CC0

Use the spotify icon logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="#1ed760" d="M128 0C57.308 0 0 57.309 0 128c0 70.696 57.309 128 128 128c70.697 0 128-57.304 128-128C256 57.314 198.697.007 127.998.007zm58.699 184.614c-2.293 3.76-7.215 4.952-10.975 2.644c-30.053-18.357-67.885-22.515-112.44-12.335a7.98 7.98 0 0 1-9.552-6.007a7.97 7.97 0 0 1 6-9.553c48.76-11.14 90.583-6.344 124.323 14.276c3.76 2.308 4.952 7.215 2.644 10.975m15.667-34.853c-2.89 4.695-9.034 6.178-13.726 3.289c-34.406-21.148-86.853-27.273-127.548-14.92c-5.278 1.594-10.852-1.38-12.454-6.649c-1.59-5.278 1.386-10.842 6.655-12.446c46.485-14.106 104.275-7.273 143.787 17.007c4.692 2.89 6.175 9.034 3.286 13.72zm1.345-36.293C162.457 88.964 94.394 86.71 55.007 98.666c-6.325 1.918-13.014-1.653-14.93-7.978c-1.917-6.328 1.65-13.012 7.98-14.935C93.27 62.027 168.434 64.68 215.929 92.876c5.702 3.376 7.566 10.724 4.188 16.405c-3.362 5.69-10.73 7.565-16.4 4.187z"/></svg>

React

import type { SVGProps } from "react";

export function LogosSpotifyIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="#1ed760" d="M128 0C57.308 0 0 57.309 0 128c0 70.696 57.309 128 128 128c70.697 0 128-57.304 128-128C256 57.314 198.697.007 127.998.007zm58.699 184.614c-2.293 3.76-7.215 4.952-10.975 2.644c-30.053-18.357-67.885-22.515-112.44-12.335a7.98 7.98 0 0 1-9.552-6.007a7.97 7.97 0 0 1 6-9.553c48.76-11.14 90.583-6.344 124.323 14.276c3.76 2.308 4.952 7.215 2.644 10.975m15.667-34.853c-2.89 4.695-9.034 6.178-13.726 3.289c-34.406-21.148-86.853-27.273-127.548-14.92c-5.278 1.594-10.852-1.38-12.454-6.649c-1.59-5.278 1.386-10.842 6.655-12.446c46.485-14.106 104.275-7.273 143.787 17.007c4.692 2.89 6.175 9.034 3.286 13.72zm1.345-36.293C162.457 88.964 94.394 86.71 55.007 98.666c-6.325 1.918-13.014-1.653-14.93-7.978c-1.917-6.328 1.65-13.012 7.98-14.935C93.27 62.027 168.434 64.68 215.929 92.876c5.702 3.376 7.566 10.724 4.188 16.405c-3.362 5.69-10.73 7.565-16.4 4.187z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="#1ed760" d="M128 0C57.308 0 0 57.309 0 128c0 70.696 57.309 128 128 128c70.697 0 128-57.304 128-128C256 57.314 198.697.007 127.998.007zm58.699 184.614c-2.293 3.76-7.215 4.952-10.975 2.644c-30.053-18.357-67.885-22.515-112.44-12.335a7.98 7.98 0 0 1-9.552-6.007a7.97 7.97 0 0 1 6-9.553c48.76-11.14 90.583-6.344 124.323 14.276c3.76 2.308 4.952 7.215 2.644 10.975m15.667-34.853c-2.89 4.695-9.034 6.178-13.726 3.289c-34.406-21.148-86.853-27.273-127.548-14.92c-5.278 1.594-10.852-1.38-12.454-6.649c-1.59-5.278 1.386-10.842 6.655-12.446c46.485-14.106 104.275-7.273 143.787 17.007c4.692 2.89 6.175 9.034 3.286 13.72zm1.345-36.293C162.457 88.964 94.394 86.71 55.007 98.666c-6.325 1.918-13.014-1.653-14.93-7.978c-1.917-6.328 1.65-13.012 7.98-14.935C93.27 62.027 168.434 64.68 215.929 92.876c5.702 3.376 7.566 10.724 4.188 16.405c-3.362 5.69-10.73 7.565-16.4 4.187z"/></svg>
</template>

CSS

.icon-spotify-icon {
  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%20256%20256%22%3E%3Cpath%20fill%3D%22%231ed760%22%20d%3D%22M128%200C57.308%200%200%2057.309%200%20128c0%2070.696%2057.309%20128%20128%20128c70.697%200%20128-57.304%20128-128C256%2057.314%20198.697.007%20127.998.007zm58.699%20184.614c-2.293%203.76-7.215%204.952-10.975%202.644c-30.053-18.357-67.885-22.515-112.44-12.335a7.98%207.98%200%200%201-9.552-6.007a7.97%207.97%200%200%201%206-9.553c48.76-11.14%2090.583-6.344%20124.323%2014.276c3.76%202.308%204.952%207.215%202.644%2010.975m15.667-34.853c-2.89%204.695-9.034%206.178-13.726%203.289c-34.406-21.148-86.853-27.273-127.548-14.92c-5.278%201.594-10.852-1.38-12.454-6.649c-1.59-5.278%201.386-10.842%206.655-12.446c46.485-14.106%20104.275-7.273%20143.787%2017.007c4.692%202.89%206.175%209.034%203.286%2013.72zm1.345-36.293C162.457%2088.964%2094.394%2086.71%2055.007%2098.666c-6.325%201.918-13.014-1.653-14.93-7.978c-1.917-6.328%201.65-13.012%207.98-14.935C93.27%2062.027%20168.434%2064.68%20215.929%2092.876c5.702%203.376%207.566%2010.724%204.188%2016.405c-3.362%205.69-10.73%207.565-16.4%204.187z%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%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22%231ed760%22%20d%3D%22M128%200C57.308%200%200%2057.309%200%20128c0%2070.696%2057.309%20128%20128%20128c70.697%200%20128-57.304%20128-128C256%2057.314%20198.697.007%20127.998.007zm58.699%20184.614c-2.293%203.76-7.215%204.952-10.975%202.644c-30.053-18.357-67.885-22.515-112.44-12.335a7.98%207.98%200%200%201-9.552-6.007a7.97%207.97%200%200%201%206-9.553c48.76-11.14%2090.583-6.344%20124.323%2014.276c3.76%202.308%204.952%207.215%202.644%2010.975m15.667-34.853c-2.89%204.695-9.034%206.178-13.726%203.289c-34.406-21.148-86.853-27.273-127.548-14.92c-5.278%201.594-10.852-1.38-12.454-6.649c-1.59-5.278%201.386-10.842%206.655-12.446c46.485-14.106%20104.275-7.273%20143.787%2017.007c4.692%202.89%206.175%209.034%203.286%2013.72zm1.345-36.293C162.457%2088.964%2094.394%2086.71%2055.007%2098.666c-6.325%201.918-13.014-1.653-14.93-7.978c-1.917-6.328%201.65-13.012%207.98-14.935C93.27%2062.027%20168.434%2064.68%20215.929%2092.876c5.702%203.376%207.566%2010.724%204.188%2016.405c-3.362%205.69-10.73%207.565-16.4%204.187z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/logos/spotify-icon.svg?color=%231a73e8&size=48