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

Radix Icons · RxCheckCircled

Check Circled icon

A free check circled icon from Radix 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.

Also known astick icon done icon success icon checkmark icon complete icon approve icon verified icon confirm icon

License: MIT license
Project: icons.radix-ui.com

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/radix/check-circled.json

components/icons/radix-check-circled.tsx

import * as React from "react";

/**
 * Check Circled from Radix Icons (https://icons.radix-ui.com), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/radix/check-circled. Sized in em, colored by currentColor.
 */
export function RxCheckCircledIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      fill="none"
      viewBox="0 0 15 15"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M7.49915 0.877045C11.1566 0.877045 14.1218 3.84178 14.1222 7.49911C14.1222 11.1568 11.1568 14.1222 7.49915 14.1222C3.84181 14.1218 0.877075 11.1565 0.877075 7.49911C0.877486 3.84203 3.84206 0.877456 7.49915 0.877045ZM7.49915 1.82626C4.36673 1.82667 1.8267 4.3667 1.82629 7.49911C1.82629 10.6319 4.36648 13.1716 7.49915 13.172C10.6321 13.172 13.172 10.6321 13.172 7.49911C13.1716 4.36645 10.6319 1.82626 7.49915 1.82626ZM9.34094 4.96201C9.49988 4.73626 9.81241 4.68202 10.0382 4.84091C10.2639 4.99988 10.3182 5.31242 10.1593 5.53818L6.99231 10.0382C6.90692 10.1594 6.7719 10.236 6.62415 10.2481C6.47636 10.2602 6.33063 10.2064 6.22668 10.1007L4.64368 8.4874L5.00012 8.13779L5.35657 7.7872L6.51965 8.97079L9.34094 4.96201ZM4.64954 7.78036C4.84653 7.58696 5.16309 7.5903 5.35657 7.7872L4.64368 8.4874C4.45023 8.29035 4.4525 7.97382 4.64954 7.78036Z"
        fill="currentColor"
      />
    </svg>
  );
}

With react-icons

import { RxCheckCircled } from "react-icons/rx";

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

check-circled.svg

<svg
  fill="none"
  viewBox="0 0 15 15"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M7.49915 0.877045C11.1566 0.877045 14.1218 3.84178 14.1222 7.49911C14.1222 11.1568 11.1568 14.1222 7.49915 14.1222C3.84181 14.1218 0.877075 11.1565 0.877075 7.49911C0.877486 3.84203 3.84206 0.877456 7.49915 0.877045ZM7.49915 1.82626C4.36673 1.82667 1.8267 4.3667 1.82629 7.49911C1.82629 10.6319 4.36648 13.1716 7.49915 13.172C10.6321 13.172 13.172 10.6321 13.172 7.49911C13.1716 4.36645 10.6319 1.82626 7.49915 1.82626ZM9.34094 4.96201C9.49988 4.73626 9.81241 4.68202 10.0382 4.84091C10.2639 4.99988 10.3182 5.31242 10.1593 5.53818L6.99231 10.0382C6.90692 10.1594 6.7719 10.236 6.62415 10.2481C6.47636 10.2602 6.33063 10.2064 6.22668 10.1007L4.64368 8.4874L5.00012 8.13779L5.35657 7.7872L6.51965 8.97079L9.34094 4.96201ZM4.64954 7.78036C4.84653 7.58696 5.16309 7.5903 5.35657 7.7872L4.64368 8.4874C4.45023 8.29035 4.4525 7.97382 4.64954 7.78036Z"
    fill="currentColor"
  />
</svg>

Attribution

"Check Circled" icon from Radix Icons (https://icons.radix-ui.com), licensed under MIT license.

Related icons: tick, done, success, checkmark

Similar Radix Icons icons