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

Radix Icons · RxColorWheel

Color Wheel icon

A free color wheel 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/color-wheel.json

components/icons/radix-color-wheel.tsx

import * as React from "react";

/**
 * Color Wheel from Radix Icons (https://icons.radix-ui.com), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/radix/color-wheel. Sized in em, colored by currentColor.
 */
export function RxColorWheelIcon(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.877487 3.84203 3.84206 0.877456 7.49915 0.877045ZM3.78235 11.7823C4.68397 12.5655 5.83417 13.0681 7.09973 13.1563V8.46591L3.78235 11.7823ZM7.90051 13.1563C9.16548 13.068 10.3147 12.5651 11.2159 11.7823L7.90051 8.46689V13.1563ZM1.84192 7.90048C1.93027 9.16525 2.43333 10.3147 3.21594 11.2159L6.53333 7.90048H1.84192ZM11.7823 11.2159C12.5651 10.3146 13.068 9.16545 13.1564 7.90048H8.46692L11.7823 11.2159ZM8.46692 7.0997H13.1564C13.0681 5.83414 12.5655 4.68394 11.7823 3.78232L8.46692 7.0997ZM3.21594 3.78232C2.43289 4.68388 1.93013 5.83433 1.84192 7.0997H6.53333L3.21594 3.78232ZM7.09973 1.84189C5.83414 1.93012 4.68398 2.4336 3.78235 3.21689L7.09973 6.53329V1.84189ZM7.90051 6.53329L11.2159 3.21689C10.3147 2.43404 9.16551 1.93026 7.90051 1.84189V6.53329Z"
        fill="currentColor"
      />
    </svg>
  );
}

With react-icons

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

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

color-wheel.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.877487 3.84203 3.84206 0.877456 7.49915 0.877045ZM3.78235 11.7823C4.68397 12.5655 5.83417 13.0681 7.09973 13.1563V8.46591L3.78235 11.7823ZM7.90051 13.1563C9.16548 13.068 10.3147 12.5651 11.2159 11.7823L7.90051 8.46689V13.1563ZM1.84192 7.90048C1.93027 9.16525 2.43333 10.3147 3.21594 11.2159L6.53333 7.90048H1.84192ZM11.7823 11.2159C12.5651 10.3146 13.068 9.16545 13.1564 7.90048H8.46692L11.7823 11.2159ZM8.46692 7.0997H13.1564C13.0681 5.83414 12.5655 4.68394 11.7823 3.78232L8.46692 7.0997ZM3.21594 3.78232C2.43289 4.68388 1.93013 5.83433 1.84192 7.0997H6.53333L3.21594 3.78232ZM7.09973 1.84189C5.83414 1.93012 4.68398 2.4336 3.78235 3.21689L7.09973 6.53329V1.84189ZM7.90051 6.53329L11.2159 3.21689C10.3147 2.43404 9.16551 1.93026 7.90051 1.84189V6.53329Z"
    fill="currentColor"
  />
</svg>

Attribution

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

Similar Radix Icons icons