Skip to content
Cuelark UI

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

Radix Icons · RxStar

Star icon

A free star 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 asfavorite iconrating iconreview iconbookmark 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/star.json
components/icons/radix-star.tsx
import * as React from "react";

/**
 * Star from Radix Icons (https://icons.radix-ui.com), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/radix/star. Sized in em, colored by currentColor.
 */
export function RxStarIcon(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.22271 0.665773C7.32528 0.419686 7.67484 0.419669 7.77739 0.665773L9.41314 4.60034C9.4563 4.70405 9.55412 4.77481 9.66607 4.78394L13.9141 5.12476C14.1799 5.14619 14.2874 5.47752 14.085 5.65112L13.8555 5.84644L10.8487 8.42358C10.7636 8.49661 10.7263 8.61137 10.752 8.72046L11.6709 12.572L11.7413 12.866C11.7953 13.093 11.5857 13.2787 11.3799 13.2283L11.293 13.1912L11.0352 13.033L7.6563 10.9705C7.56036 10.9119 7.43975 10.9119 7.3438 10.9705L3.70708 13.1912L3.62017 13.2283C3.41445 13.2787 3.20484 13.093 3.25884 12.866L3.32818 12.572L4.2481 8.72046C4.2674 8.63858 4.25134 8.55322 4.20611 8.48511L4.15142 8.42358L0.91509 5.65112C0.712634 5.47752 0.820148 5.14618 1.08599 5.12476L1.38677 5.10034L5.33403 4.78394C5.41796 4.77708 5.49411 4.73573 5.54497 4.67163L5.58696 4.60034L7.22271 0.665773ZM6.50982 4.98413C6.34606 5.37782 6.00173 5.66244 5.59282 5.75366L5.41314 5.78101L2.84282 5.98608L4.80181 7.66382L4.93071 7.79077C5.16843 8.05995 5.28398 8.41668 5.25005 8.77417L5.22075 8.95288L4.62212 11.4597L6.82232 10.1169L6.98345 10.0339C7.31289 9.89117 7.68721 9.89116 8.01665 10.0339L8.17778 10.1169L10.377 11.4597L9.77935 8.95288C9.66641 8.47881 9.82817 7.98087 10.1983 7.66382L12.1563 5.98608L9.58696 5.78101C9.16189 5.74693 8.78445 5.50702 8.57134 5.14624L8.49028 4.98413L7.50005 2.60327L6.50982 4.98413Z"
        fill="currentColor"
      />
    </svg>
  );
}
With react-icons
import { RxStar } from "react-icons/rx";

export function Example() {
  return <RxStar className="size-5" />;
}
star.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.22271 0.665773C7.32528 0.419686 7.67484 0.419669 7.77739 0.665773L9.41314 4.60034C9.4563 4.70405 9.55412 4.77481 9.66607 4.78394L13.9141 5.12476C14.1799 5.14619 14.2874 5.47752 14.085 5.65112L13.8555 5.84644L10.8487 8.42358C10.7636 8.49661 10.7263 8.61137 10.752 8.72046L11.6709 12.572L11.7413 12.866C11.7953 13.093 11.5857 13.2787 11.3799 13.2283L11.293 13.1912L11.0352 13.033L7.6563 10.9705C7.56036 10.9119 7.43975 10.9119 7.3438 10.9705L3.70708 13.1912L3.62017 13.2283C3.41445 13.2787 3.20484 13.093 3.25884 12.866L3.32818 12.572L4.2481 8.72046C4.2674 8.63858 4.25134 8.55322 4.20611 8.48511L4.15142 8.42358L0.91509 5.65112C0.712634 5.47752 0.820148 5.14618 1.08599 5.12476L1.38677 5.10034L5.33403 4.78394C5.41796 4.77708 5.49411 4.73573 5.54497 4.67163L5.58696 4.60034L7.22271 0.665773ZM6.50982 4.98413C6.34606 5.37782 6.00173 5.66244 5.59282 5.75366L5.41314 5.78101L2.84282 5.98608L4.80181 7.66382L4.93071 7.79077C5.16843 8.05995 5.28398 8.41668 5.25005 8.77417L5.22075 8.95288L4.62212 11.4597L6.82232 10.1169L6.98345 10.0339C7.31289 9.89117 7.68721 9.89116 8.01665 10.0339L8.17778 10.1169L10.377 11.4597L9.77935 8.95288C9.66641 8.47881 9.82817 7.98087 10.1983 7.66382L12.1563 5.98608L9.58696 5.78101C9.16189 5.74693 8.78445 5.50702 8.57134 5.14624L8.49028 4.98413L7.50005 2.60327L6.50982 4.98413Z"
    fill="currentColor"
  />
</svg>
Attribution
"Star" icon from Radix Icons (https://icons.radix-ui.com), licensed under MIT license.

Related icons: favorite, rating, review, bookmark

Star icon in other sets