Skip to content
Cuelark UI

Hover the icon or press Play. Suggested motion: pop. Pick another to preview it and update the animated code:

Ant Design Icons · AiFillSpotify

Fill Spotify icon

A free fill spotify icon from Ant Design Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

License
MIT license
Project
github.com
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/ant-design/fill-spotify.json
components/icons/ant-design-fill-spotify.tsx
import * as React from "react";

/**
 * Fill Spotify from Ant Design Icons (https://github.com/ant-design/ant-design-icons), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/ant-design/fill-spotify. Sized in em, colored by currentColor.
 */
export function AiFillSpotifyIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 1024 1024"
      fillRule="evenodd"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M657.417 631.167c0-12.445-5.834-22.361-17.5-29.75-75.056-44.723-161.973-67.084-260.75-67.084-51.723 0-107.528 6.611-167.417 19.834-16.333 3.5-24.5 13.61-24.5 30.333 0 7.778 2.625 14.486 7.875 20.125 5.25 5.639 12.153 8.458 20.708 8.458 1.945 0 9.14-1.555 21.584-4.666 51.333-10.5 98.583-15.75 141.75-15.75 87.889 0 165.083 20.027 231.583 60.083 7.389 4.278 13.806 6.417 19.25 6.417 7.389 0 13.806-2.625 19.25-7.875 5.444-5.25 8.167-11.959 8.167-20.125m56-125.417c0-15.556-6.806-27.417-20.417-35.583-92.167-54.834-198.722-82.25-319.667-82.25-59.5 0-118.416 8.166-176.75 24.5-18.666 5.055-28 17.5-28 37.333 0 9.722 3.403 17.986 10.209 24.792 6.805 6.805 15.07 10.208 24.791 10.208 2.723 0 9.917-1.556 21.584-4.667 47.444-12.833 96.25-19.25 146.416-19.25 108.5 0 203.39 24.111 284.667 72.334 9.333 5.055 16.722 7.583 22.167 7.583 9.722 0 17.986-3.403 24.791-10.208 6.806-6.806 10.209-15.07 10.209-24.792m63-144.667c0-18.277-7.778-31.889-23.334-40.833-49-28.389-105.972-49.875-170.916-64.458-64.945-14.584-131.64-21.875-200.084-21.875-79.333 0-150.11 9.139-212.333 27.416-8.944 2.723-16.43 7.68-22.458 14.875-6.028 7.195-9.042 16.625-9.042 28.292 0 12.056 3.986 22.167 11.958 30.333 7.973 8.167 17.986 12.25 30.042 12.25 4.278 0 12.056-1.555 23.333-4.666 51.723-14.39 111.417-21.584 179.084-21.584 61.833 0 122.014 6.611 180.541 19.834 58.528 13.222 107.82 31.694 147.875 55.416 8.167 4.667 15.945 7 23.334 7 11.277 0 21.097-3.986 29.458-11.958 8.361-7.972 12.542-17.986 12.542-30.042M896 448c0 81.278-20.028 156.236-60.083 224.875-40.056 68.639-94.403 122.986-163.042 163.042C604.236 875.972 529.278 896 448 896c-81.278 0-156.236-20.028-224.875-60.083-68.639-40.056-122.986-94.403-163.042-163.042C20.028 604.236 0 529.278 0 448c0-81.278 20.028-156.236 60.083-224.875 40.056-68.639 94.403-122.986 163.042-163.042C291.764 20.028 366.722 0 448 0c81.278 0 156.236 20.028 224.875 60.083 68.639 40.056 122.986 94.403 163.042 163.042C875.972 291.764 896 366.722 896 448"
        transform="translate(64 64)"
      />
    </svg>
  );
}
With react-icons
import { AiFillSpotify } from "react-icons/ai";

export function Example() {
  return <AiFillSpotify className="size-5" />;
}
fill-spotify.svg
<svg
  viewBox="0 0 1024 1024"
  fill-rule="evenodd"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M657.417 631.167c0-12.445-5.834-22.361-17.5-29.75-75.056-44.723-161.973-67.084-260.75-67.084-51.723 0-107.528 6.611-167.417 19.834-16.333 3.5-24.5 13.61-24.5 30.333 0 7.778 2.625 14.486 7.875 20.125 5.25 5.639 12.153 8.458 20.708 8.458 1.945 0 9.14-1.555 21.584-4.666 51.333-10.5 98.583-15.75 141.75-15.75 87.889 0 165.083 20.027 231.583 60.083 7.389 4.278 13.806 6.417 19.25 6.417 7.389 0 13.806-2.625 19.25-7.875 5.444-5.25 8.167-11.959 8.167-20.125m56-125.417c0-15.556-6.806-27.417-20.417-35.583-92.167-54.834-198.722-82.25-319.667-82.25-59.5 0-118.416 8.166-176.75 24.5-18.666 5.055-28 17.5-28 37.333 0 9.722 3.403 17.986 10.209 24.792 6.805 6.805 15.07 10.208 24.791 10.208 2.723 0 9.917-1.556 21.584-4.667 47.444-12.833 96.25-19.25 146.416-19.25 108.5 0 203.39 24.111 284.667 72.334 9.333 5.055 16.722 7.583 22.167 7.583 9.722 0 17.986-3.403 24.791-10.208 6.806-6.806 10.209-15.07 10.209-24.792m63-144.667c0-18.277-7.778-31.889-23.334-40.833-49-28.389-105.972-49.875-170.916-64.458-64.945-14.584-131.64-21.875-200.084-21.875-79.333 0-150.11 9.139-212.333 27.416-8.944 2.723-16.43 7.68-22.458 14.875-6.028 7.195-9.042 16.625-9.042 28.292 0 12.056 3.986 22.167 11.958 30.333 7.973 8.167 17.986 12.25 30.042 12.25 4.278 0 12.056-1.555 23.333-4.666 51.723-14.39 111.417-21.584 179.084-21.584 61.833 0 122.014 6.611 180.541 19.834 58.528 13.222 107.82 31.694 147.875 55.416 8.167 4.667 15.945 7 23.334 7 11.277 0 21.097-3.986 29.458-11.958 8.361-7.972 12.542-17.986 12.542-30.042M896 448c0 81.278-20.028 156.236-60.083 224.875-40.056 68.639-94.403 122.986-163.042 163.042C604.236 875.972 529.278 896 448 896c-81.278 0-156.236-20.028-224.875-60.083-68.639-40.056-122.986-94.403-163.042-163.042C20.028 604.236 0 529.278 0 448c0-81.278 20.028-156.236 60.083-224.875 40.056-68.639 94.403-122.986 163.042-163.042C291.764 20.028 366.722 0 448 0c81.278 0 156.236 20.028 224.875 60.083 68.639 40.056 122.986 94.403 163.042 163.042C875.972 291.764 896 366.722 896 448"
    transform="translate(64 64)"
  />
</svg>
Attribution
"Fill Spotify" icon from Ant Design Icons (https://github.com/ant-design/ant-design-icons), licensed under MIT license.

Related icons: