spotify icon
spotify from Bootstrap Icons by The Bootstrap Authors · Outline · MIT Free for personal and commercial use.
- Name
- spotify
- Set
- Bootstrap Icons
- Style
- Outline
- Viewbox
- 16×16
- License
- MIT
The same icon in other sets
spotify-fillAkar Iconsspotify-filledAnt Design 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 16 16"><path fill="currentColor" d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m3.669 11.538a.5.5 0 0 1-.686.165c-1.879-1.147-4.243-1.407-7.028-.77a.499.499 0 0 1-.222-.973c3.048-.696 5.662-.397 7.77.892a.5.5 0 0 1 .166.686m.979-2.178a.624.624 0 0 1-.858.205c-2.15-1.321-5.428-1.704-7.972-.932a.625.625 0 0 1-.362-1.194c2.905-.881 6.517-.454 8.986 1.063a.624.624 0 0 1 .206.858m.084-2.268C10.154 5.56 5.9 5.419 3.438 6.166a.748.748 0 1 1-.434-1.432c2.825-.857 7.523-.692 10.492 1.07a.747.747 0 1 1-.764 1.288"/></svg>
React
import type { SVGProps } from "react";
export function BiSpotify(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m3.669 11.538a.5.5 0 0 1-.686.165c-1.879-1.147-4.243-1.407-7.028-.77a.499.499 0 0 1-.222-.973c3.048-.696 5.662-.397 7.77.892a.5.5 0 0 1 .166.686m.979-2.178a.624.624 0 0 1-.858.205c-2.15-1.321-5.428-1.704-7.972-.932a.625.625 0 0 1-.362-1.194c2.905-.881 6.517-.454 8.986 1.063a.624.624 0 0 1 .206.858m.084-2.268C10.154 5.56 5.9 5.419 3.438 6.166a.748.748 0 1 1-.434-1.432c2.825-.857 7.523-.692 10.492 1.07a.747.747 0 1 1-.764 1.288"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m3.669 11.538a.5.5 0 0 1-.686.165c-1.879-1.147-4.243-1.407-7.028-.77a.499.499 0 0 1-.222-.973c3.048-.696 5.662-.397 7.77.892a.5.5 0 0 1 .166.686m.979-2.178a.624.624 0 0 1-.858.205c-2.15-1.321-5.428-1.704-7.972-.932a.625.625 0 0 1-.362-1.194c2.905-.881 6.517-.454 8.986 1.063a.624.624 0 0 1 .206.858m.084-2.268C10.154 5.56 5.9 5.419 3.438 6.166a.748.748 0 1 1-.434-1.432c2.825-.857 7.523-.692 10.492 1.07a.747.747 0 1 1-.764 1.288"/></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%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8%200a8%208%200%201%200%200%2016A8%208%200%200%200%208%200m3.669%2011.538a.5.5%200%200%201-.686.165c-1.879-1.147-4.243-1.407-7.028-.77a.499.499%200%200%201-.222-.973c3.048-.696%205.662-.397%207.77.892a.5.5%200%200%201%20.166.686m.979-2.178a.624.624%200%200%201-.858.205c-2.15-1.321-5.428-1.704-7.972-.932a.625.625%200%200%201-.362-1.194c2.905-.881%206.517-.454%208.986%201.063a.624.624%200%200%201%20.206.858m.084-2.268C10.154%205.56%205.9%205.419%203.438%206.166a.748.748%200%201%201-.434-1.432c2.825-.857%207.523-.692%2010.492%201.07a.747.747%200%201%201-.764%201.288%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%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8%200a8%208%200%201%200%200%2016A8%208%200%200%200%208%200m3.669%2011.538a.5.5%200%200%201-.686.165c-1.879-1.147-4.243-1.407-7.028-.77a.499.499%200%200%201-.222-.973c3.048-.696%205.662-.397%207.77.892a.5.5%200%200%201%20.166.686m.979-2.178a.624.624%200%200%201-.858.205c-2.15-1.321-5.428-1.704-7.972-.932a.625.625%200%200%201-.362-1.194c2.905-.881%206.517-.454%208.986%201.063a.624.624%200%200%201%20.206.858m.084-2.268C10.154%205.56%205.9%205.419%203.438%206.166a.748.748%200%201%201-.434-1.432c2.825-.857%207.523-.692%2010.492%201.07a.747.747%200%201%201-.764%201.288%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/bi/spotify.svg?color=%231a73e8&size=48
