Skip to content
Cuelark UI

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

VS Code Icons · VscCircleLargeFilled

Circle Large Filled icon

A free circle large filled icon from VS Code 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
CC BY 4.0 license
Project
github.com
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/vscode-codicons/circle-large-filled.json
components/icons/vscode-codicons-circle-large-filled.tsx
import * as React from "react";

/**
 * Circle Large Filled from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/circle-large-filled. Sized in em, colored by currentColor.
 */
export function VscCircleLargeFilledIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 16 16"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M8 1C8.64258 1 9.26237 1.08431 9.85938 1.25293C10.4564 1.41699 11.0124 1.65169 11.5273 1.95703C12.0469 2.26237 12.5186 2.62923 12.9424 3.05762C13.3708 3.48145 13.7376 3.95312 14.043 4.47266C14.3483 4.98763 14.583 5.54362 14.7471 6.14062C14.9157 6.73763 15 7.35742 15 8C15 8.64258 14.9157 9.26237 14.7471 9.85938C14.583 10.4564 14.3483 11.0146 14.043 11.5342C13.7376 12.0492 13.3708 12.5208 12.9424 12.9492C12.5186 13.373 12.0469 13.7376 11.5273 14.043C11.0124 14.3483 10.4564 14.5853 9.85938 14.7539C9.26237 14.918 8.64258 15 8 15C7.35742 15 6.73763 14.918 6.14062 14.7539C5.54362 14.5853 4.98535 14.3483 4.46582 14.043C3.95085 13.7376 3.47917 13.373 3.05078 12.9492C2.62695 12.5208 2.26237 12.0492 1.95703 11.5342C1.65169 11.0146 1.41471 10.4564 1.24609 9.85938C1.08203 9.26237 1 8.64258 1 8C1 7.35742 1.08203 6.73763 1.24609 6.14062C1.41471 5.54362 1.65169 4.98763 1.95703 4.47266C2.26237 3.95312 2.62695 3.48145 3.05078 3.05762C3.47917 2.62923 3.95085 2.26237 4.46582 1.95703C4.98535 1.65169 5.54362 1.41699 6.14062 1.25293C6.73763 1.08431 7.35742 1 8 1Z"
      />
    </svg>
  );
}
With react-icons
import { VscCircleLargeFilled } from "react-icons/vsc";

export function Example() {
  return <VscCircleLargeFilled className="size-5" />;
}
circle-large-filled.svg
<svg
  viewBox="0 0 16 16"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M8 1C8.64258 1 9.26237 1.08431 9.85938 1.25293C10.4564 1.41699 11.0124 1.65169 11.5273 1.95703C12.0469 2.26237 12.5186 2.62923 12.9424 3.05762C13.3708 3.48145 13.7376 3.95312 14.043 4.47266C14.3483 4.98763 14.583 5.54362 14.7471 6.14062C14.9157 6.73763 15 7.35742 15 8C15 8.64258 14.9157 9.26237 14.7471 9.85938C14.583 10.4564 14.3483 11.0146 14.043 11.5342C13.7376 12.0492 13.3708 12.5208 12.9424 12.9492C12.5186 13.373 12.0469 13.7376 11.5273 14.043C11.0124 14.3483 10.4564 14.5853 9.85938 14.7539C9.26237 14.918 8.64258 15 8 15C7.35742 15 6.73763 14.918 6.14062 14.7539C5.54362 14.5853 4.98535 14.3483 4.46582 14.043C3.95085 13.7376 3.47917 13.373 3.05078 12.9492C2.62695 12.5208 2.26237 12.0492 1.95703 11.5342C1.65169 11.0146 1.41471 10.4564 1.24609 9.85938C1.08203 9.26237 1 8.64258 1 8C1 7.35742 1.08203 6.73763 1.24609 6.14062C1.41471 5.54362 1.65169 4.98763 1.95703 4.47266C2.26237 3.95312 2.62695 3.48145 3.05078 3.05762C3.47917 2.62923 3.95085 2.26237 4.46582 1.95703C4.98535 1.65169 5.54362 1.41699 6.14062 1.25293C6.73763 1.08431 7.35742 1 8 1Z"
  />
</svg>
Attribution
"Circle Large Filled" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.

Related icons: