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

Simple Line Icons · SlDisc

Disc icon

A free disc icon from Simple Line 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: thesabbir.github.io

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/simple-line-icons/disc.json

components/icons/simple-line-icons-disc.tsx

import * as React from "react";

/**
 * Disc from Simple Line Icons (https://thesabbir.github.io/simple-line-icons/), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/simple-line-icons/disc. Sized in em, colored by currentColor.
 */
export function SlDiscIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 1024 1024"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M512 0C229.216 0 0 229.216 0 512s229.216 512 512 512 512-229.216 512-512S794.784 0 512 0zm448 512c0 66.32-14.593 129.263-40.56 185.935L636.222 546.383c3.025-10.976 4.785-22.464 4.785-34.384 0-71.248-57.744-129.008-129.008-129.008-14.624 0-28.624 2.544-41.712 7.025L300.672 117.104C363.664 83.264 435.616 64 512 64c247.024 0 448 200.976 448 448zm-448.001-64.994c35.84 0 65.008 29.151 65.008 65.008s-29.168 64.992-65.008 64.992-64.992-29.168-64.992-65.008 29.152-64.992 64.992-64.992zM246.575 151.373l170.177 273.84c-.752.832-1.536 1.648-2.288 2.513l-283.168-151.52c30.208-48.577 69.392-90.977 115.279-124.833zM64 511.997c0-63.68 13.44-124.256 37.504-179.168l284.368 152.16c-1.857 8.72-2.881 17.728-2.881 27.008 0 71.248 57.744 129.008 129.008 129.008 12.4 0 24.353-1.84 35.696-5.104l170.192 273.792c-61.68 32.048-131.664 50.304-205.888 50.304-247.024 0-448-200.976-448-448zm708.447 364.16L602.943 603.47c.496-.496.96-1.024 1.456-1.536l284.288 152.144a452.058 452.058 0 0 1-116.24 122.08z"
      />
    </svg>
  );
}

With react-icons

import { SlDisc } from "react-icons/sl";

export function Example() {
  return <SlDisc className="size-5" />;
}

disc.svg

<svg
  viewBox="0 0 1024 1024"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M512 0C229.216 0 0 229.216 0 512s229.216 512 512 512 512-229.216 512-512S794.784 0 512 0zm448 512c0 66.32-14.593 129.263-40.56 185.935L636.222 546.383c3.025-10.976 4.785-22.464 4.785-34.384 0-71.248-57.744-129.008-129.008-129.008-14.624 0-28.624 2.544-41.712 7.025L300.672 117.104C363.664 83.264 435.616 64 512 64c247.024 0 448 200.976 448 448zm-448.001-64.994c35.84 0 65.008 29.151 65.008 65.008s-29.168 64.992-65.008 64.992-64.992-29.168-64.992-65.008 29.152-64.992 64.992-64.992zM246.575 151.373l170.177 273.84c-.752.832-1.536 1.648-2.288 2.513l-283.168-151.52c30.208-48.577 69.392-90.977 115.279-124.833zM64 511.997c0-63.68 13.44-124.256 37.504-179.168l284.368 152.16c-1.857 8.72-2.881 17.728-2.881 27.008 0 71.248 57.744 129.008 129.008 129.008 12.4 0 24.353-1.84 35.696-5.104l170.192 273.792c-61.68 32.048-131.664 50.304-205.888 50.304-247.024 0-448-200.976-448-448zm708.447 364.16L602.943 603.47c.496-.496.96-1.024 1.456-1.536l284.288 152.144a452.058 452.058 0 0 1-116.24 122.08z"
  />
</svg>

Attribution

"Disc" icon from Simple Line Icons (https://thesabbir.github.io/simple-line-icons/), licensed under MIT license.

Disc icon in other sets

Similar Simple Line Icons icons