Skip to content
Cuelark UI

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

VS Code Icons · VscStarHalf

Star Half icon

A free star half 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
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/vscode-codicons/star-half.json
components/icons/vscode-codicons-star-half.tsx
import * as React from "react";

/**
 * Star Half from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/star-half. Sized in em, colored by currentColor.
 */
export function VscStarHalfIcon(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="M15.264 6.27501C15.149 5.92301 14.862 5.68101 14.494 5.62701L10.598 5.06101L8.85602 1.53001C8.52602 0.865009 7.47502 0.864009 7.14502 1.53001L5.40302 5.06001L1.50602 5.62601C1.14002 5.68001 0.853018 5.92201 0.735018 6.28001C0.625018 6.63301 0.715017 6.99701 0.979017 7.25301L3.79702 10.001L3.13102 13.881C3.08302 14.165 3.15702 14.439 3.33902 14.654C3.62702 14.993 4.12202 15.094 4.51602 14.886L8.00002 13.054L11.483 14.886C11.624 14.961 11.773 14.998 11.927 14.998C12.207 14.998 12.475 14.873 12.659 14.654C12.842 14.439 12.916 14.164 12.868 13.88L12.202 10L15.021 7.25201C15.284 6.99601 15.375 6.63201 15.262 6.27301L15.264 6.27501ZM11.317 9.47001C11.199 9.58501 11.145 9.75001 11.172 9.91201L11.891 13.972L8.23202 12.048C8.16002 12.009 8.08002 11.99 8.00002 11.99V2.05701L9.81702 5.73901C9.88902 5.88601 10.031 5.98901 10.193 6.01201L14.324 6.53801L11.317 9.46901V9.47001Z"
      />
    </svg>
  );
}
With react-icons
import { VscStarHalf } from "react-icons/vsc";

export function Example() {
  return <VscStarHalf className="size-5" />;
}
star-half.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="M15.264 6.27501C15.149 5.92301 14.862 5.68101 14.494 5.62701L10.598 5.06101L8.85602 1.53001C8.52602 0.865009 7.47502 0.864009 7.14502 1.53001L5.40302 5.06001L1.50602 5.62601C1.14002 5.68001 0.853018 5.92201 0.735018 6.28001C0.625018 6.63301 0.715017 6.99701 0.979017 7.25301L3.79702 10.001L3.13102 13.881C3.08302 14.165 3.15702 14.439 3.33902 14.654C3.62702 14.993 4.12202 15.094 4.51602 14.886L8.00002 13.054L11.483 14.886C11.624 14.961 11.773 14.998 11.927 14.998C12.207 14.998 12.475 14.873 12.659 14.654C12.842 14.439 12.916 14.164 12.868 13.88L12.202 10L15.021 7.25201C15.284 6.99601 15.375 6.63201 15.262 6.27301L15.264 6.27501ZM11.317 9.47001C11.199 9.58501 11.145 9.75001 11.172 9.91201L11.891 13.972L8.23202 12.048C8.16002 12.009 8.08002 11.99 8.00002 11.99V2.05701L9.81702 5.73901C9.88902 5.88601 10.031 5.98901 10.193 6.01201L14.324 6.53801L11.317 9.46901V9.47001Z"
  />
</svg>
Attribution
"Star Half" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.

Related icons: favorite, rating, review, bookmark

Star Half icon in other sets