star half icon

star-half-bold from Phosphor by Phosphor Icons · Bold · MIT Free for personal and commercial use.

Name
star-half-bold
Set
Phosphor
Style
Bold
Viewbox
256×256
License
MIT

5 other variants in Phosphor

The same icon in other sets

Related icons in Phosphor

Use the star half icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="m236.9 117.88l-5.06 4.36a12 12 0 0 1-16.87-17a12 12 0 0 1 2-23.92l8.27.67a20.45 20.45 0 0 1 11.66 35.87Zm-64.37 23.82a12 12 0 0 0-3.84 11.86l4.08 17.22a12 12 0 1 0 23.35-5.54l-2.4-10.12l6.12-5.28a12 12 0 0 0-15.67-18.17Zm33.07 63.55a12 12 0 0 0-23.68 2.93a12 12 0 0 0-12.2 20.66l6.71 4.13a20.39 20.39 0 0 0 30.49-22.15ZM175 102l-15.64-1.26a12 12 0 0 1-10.13-7.38L140 70.94v111.45l5.53 3.4A12 12 0 0 1 133 206.24l-5-3.05L79.57 233a20.39 20.39 0 0 1-30.49-22.15l13.2-55.7l-43.18-37.27A20.45 20.45 0 0 1 30.75 82l56.6-4.57l21.82-52.82a20.36 20.36 0 0 1 37.66 0l21.82 52.82l8.32.67A12 12 0 0 1 175 102m-59 80.36V70.94l-9.27 22.45a12 12 0 0 1-10.13 7.38l-55.4 4.47l42.27 36.46a12 12 0 0 1 3.84 11.86L74.42 208Z"/></svg>

React

import type { SVGProps } from "react";

export function PhStarHalfBold(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="m236.9 117.88l-5.06 4.36a12 12 0 0 1-16.87-17a12 12 0 0 1 2-23.92l8.27.67a20.45 20.45 0 0 1 11.66 35.87Zm-64.37 23.82a12 12 0 0 0-3.84 11.86l4.08 17.22a12 12 0 1 0 23.35-5.54l-2.4-10.12l6.12-5.28a12 12 0 0 0-15.67-18.17Zm33.07 63.55a12 12 0 0 0-23.68 2.93a12 12 0 0 0-12.2 20.66l6.71 4.13a20.39 20.39 0 0 0 30.49-22.15ZM175 102l-15.64-1.26a12 12 0 0 1-10.13-7.38L140 70.94v111.45l5.53 3.4A12 12 0 0 1 133 206.24l-5-3.05L79.57 233a20.39 20.39 0 0 1-30.49-22.15l13.2-55.7l-43.18-37.27A20.45 20.45 0 0 1 30.75 82l56.6-4.57l21.82-52.82a20.36 20.36 0 0 1 37.66 0l21.82 52.82l8.32.67A12 12 0 0 1 175 102m-59 80.36V70.94l-9.27 22.45a12 12 0 0 1-10.13 7.38l-55.4 4.47l42.27 36.46a12 12 0 0 1 3.84 11.86L74.42 208Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="m236.9 117.88l-5.06 4.36a12 12 0 0 1-16.87-17a12 12 0 0 1 2-23.92l8.27.67a20.45 20.45 0 0 1 11.66 35.87Zm-64.37 23.82a12 12 0 0 0-3.84 11.86l4.08 17.22a12 12 0 1 0 23.35-5.54l-2.4-10.12l6.12-5.28a12 12 0 0 0-15.67-18.17Zm33.07 63.55a12 12 0 0 0-23.68 2.93a12 12 0 0 0-12.2 20.66l6.71 4.13a20.39 20.39 0 0 0 30.49-22.15ZM175 102l-15.64-1.26a12 12 0 0 1-10.13-7.38L140 70.94v111.45l5.53 3.4A12 12 0 0 1 133 206.24l-5-3.05L79.57 233a20.39 20.39 0 0 1-30.49-22.15l13.2-55.7l-43.18-37.27A20.45 20.45 0 0 1 30.75 82l56.6-4.57l21.82-52.82a20.36 20.36 0 0 1 37.66 0l21.82 52.82l8.32.67A12 12 0 0 1 175 102m-59 80.36V70.94l-9.27 22.45a12 12 0 0 1-10.13 7.38l-55.4 4.47l42.27 36.46a12 12 0 0 1 3.84 11.86L74.42 208Z"/></svg>
</template>

CSS

.icon-star-half-bold {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m236.9%20117.88l-5.06%204.36a12%2012%200%200%201-16.87-17a12%2012%200%200%201%202-23.92l8.27.67a20.45%2020.45%200%200%201%2011.66%2035.87Zm-64.37%2023.82a12%2012%200%200%200-3.84%2011.86l4.08%2017.22a12%2012%200%201%200%2023.35-5.54l-2.4-10.12l6.12-5.28a12%2012%200%200%200-15.67-18.17Zm33.07%2063.55a12%2012%200%200%200-23.68%202.93a12%2012%200%200%200-12.2%2020.66l6.71%204.13a20.39%2020.39%200%200%200%2030.49-22.15ZM175%20102l-15.64-1.26a12%2012%200%200%201-10.13-7.38L140%2070.94v111.45l5.53%203.4A12%2012%200%200%201%20133%20206.24l-5-3.05L79.57%20233a20.39%2020.39%200%200%201-30.49-22.15l13.2-55.7l-43.18-37.27A20.45%2020.45%200%200%201%2030.75%2082l56.6-4.57l21.82-52.82a20.36%2020.36%200%200%201%2037.66%200l21.82%2052.82l8.32.67A12%2012%200%200%201%20175%20102m-59%2080.36V70.94l-9.27%2022.45a12%2012%200%200%201-10.13%207.38l-55.4%204.47l42.27%2036.46a12%2012%200%200%201%203.84%2011.86L74.42%20208Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m236.9%20117.88l-5.06%204.36a12%2012%200%200%201-16.87-17a12%2012%200%200%201%202-23.92l8.27.67a20.45%2020.45%200%200%201%2011.66%2035.87Zm-64.37%2023.82a12%2012%200%200%200-3.84%2011.86l4.08%2017.22a12%2012%200%201%200%2023.35-5.54l-2.4-10.12l6.12-5.28a12%2012%200%200%200-15.67-18.17Zm33.07%2063.55a12%2012%200%200%200-23.68%202.93a12%2012%200%200%200-12.2%2020.66l6.71%204.13a20.39%2020.39%200%200%200%2030.49-22.15ZM175%20102l-15.64-1.26a12%2012%200%200%201-10.13-7.38L140%2070.94v111.45l5.53%203.4A12%2012%200%200%201%20133%20206.24l-5-3.05L79.57%20233a20.39%2020.39%200%200%201-30.49-22.15l13.2-55.7l-43.18-37.27A20.45%2020.45%200%200%201%2030.75%2082l56.6-4.57l21.82-52.82a20.36%2020.36%200%200%201%2037.66%200l21.82%2052.82l8.32.67A12%2012%200%200%201%20175%20102m-59%2080.36V70.94l-9.27%2022.45a12%2012%200%200%201-10.13%207.38l-55.4%204.47l42.27%2036.46a12%2012%200%200%201%203.84%2011.86L74.42%20208Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/star-half-bold.svg?color=%231a73e8&size=48