Skip to content
Cuelark UI

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

Radix Icons · RxCheckbox

Checkbox icon

A free checkbox 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.

License
MIT license
Project
icons.radix-ui.com
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/radix/checkbox.json
components/icons/radix-checkbox.tsx
import * as React from "react";

/**
 * Checkbox from Radix Icons (https://icons.radix-ui.com), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/radix/checkbox. Sized in em, colored by currentColor.
 */
export function RxCheckboxIcon(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="M12.1025 2.00488C12.6067 2.05621 13 2.48232 13 3V12L12.9951 12.1025C12.9472 12.573 12.573 12.9472 12.1025 12.9951L12 13H3L2.89746 12.9951C2.42703 12.9472 2.05278 12.573 2.00488 12.1025L2 12V3C2 2.48232 2.39333 2.05621 2.89746 2.00488L3 2H12L12.1025 2.00488ZM3 12H12V3H3V12ZM9.52539 4.94531C9.6817 4.71784 9.99311 4.66021 10.2207 4.81641C10.448 4.97276 10.5058 5.28418 10.3496 5.51172L7.09082 10.2607C7.00213 10.3898 6.8576 10.4704 6.70117 10.4775C6.54468 10.4847 6.39306 10.4174 6.29297 10.2969L4.42773 8.04785L4.37109 7.96387C4.2615 7.75883 4.30741 7.49807 4.49316 7.34375C4.67904 7.18956 4.94366 7.19251 5.125 7.33789L5.19727 7.40918L6.63965 9.14746L9.52539 4.94531Z"
        fill="currentColor"
      />
    </svg>
  );
}
With react-icons
import { RxCheckbox } from "react-icons/rx";

export function Example() {
  return <RxCheckbox className="size-5" />;
}
checkbox.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="M12.1025 2.00488C12.6067 2.05621 13 2.48232 13 3V12L12.9951 12.1025C12.9472 12.573 12.573 12.9472 12.1025 12.9951L12 13H3L2.89746 12.9951C2.42703 12.9472 2.05278 12.573 2.00488 12.1025L2 12V3C2 2.48232 2.39333 2.05621 2.89746 2.00488L3 2H12L12.1025 2.00488ZM3 12H12V3H3V12ZM9.52539 4.94531C9.6817 4.71784 9.99311 4.66021 10.2207 4.81641C10.448 4.97276 10.5058 5.28418 10.3496 5.51172L7.09082 10.2607C7.00213 10.3898 6.8576 10.4704 6.70117 10.4775C6.54468 10.4847 6.39306 10.4174 6.29297 10.2969L4.42773 8.04785L4.37109 7.96387C4.2615 7.75883 4.30741 7.49807 4.49316 7.34375C4.67904 7.18956 4.94366 7.19251 5.125 7.33789L5.19727 7.40918L6.63965 9.14746L9.52539 4.94531Z"
    fill="currentColor"
  />
</svg>
Attribution
"Checkbox" icon from Radix Icons (https://icons.radix-ui.com), licensed under MIT license.

Checkbox icon in other sets