Rating Forms

Ícone de estrela 'outline' cinza

Preview

HTML

<span class="rating__icon">
   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
      <path d="M10 15.2167L4.1225 18.5067L5.435 11.9L0.489166 7.32667L7.17833
         6.53334L10 0.416672L12.8217 6.53334L19.5108 7.32667L14.565 11.9L15.8775
         18.5067L10 15.2167ZM10 13.3067L13.5392 15.2875L12.7483 11.31L15.7258
         8.55584L11.6983 8.07834L10 4.39584L8.30167 8.07917L4.27417
         8.55584L7.25167 11.31L6.46083 15.2875L10 13.3067Z" fill="#A7A7A7" />
   </svg>
</span>

CSS

.rating__icon {
   display: block;
   width: 20px;
   height: 20px;
}

Ícone de estrela cinza

Preview

HTML

<span class="rating__icon">
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20" fill="none">
      <path d="M10 14.1667L5.10167 17.1583L6.43333 11.575L2.075
         7.84166L7.79583 7.38333L10 2.08333L12.2042 7.38333L17.9258
         7.84166L13.5667 11.575L14.8983 17.1583L10 14.1667Z" fill="#A7A7A7" />
   </svg>
</span>

CSS

.rating__icon {
   display: block;
   width: 20px;
   height: 20px;
}

Ícone de estrela azul

Preview

HTML

<span class="rating__icon">
   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
      <path d="M10 15.2169L4.1225 18.5069L5.435 11.9002L0.489166
      7.32692L7.17833 6.53358L10 0.416916L12.8217 6.53358L19.5108
      7.32692L14.565 11.9002L15.8775 18.5069L10 15.2169Z" fill="#01141E" />
   </svg>
</span>

CSS

.rating__icon {
   display: block;
   width: 20px;
   height: 20px;
}

Ícone de estrela azul parcialmente cheia

Preview

HTML

<span class="rating__icon">
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20" fill="none">
      <path d="M10 12.2133L12.3475 13.6467L11.7092 10.9717L13.7983 9.18249L11.0567
         8.96249L10 6.42333V12.2133ZM10 14.1667L5.10167 17.1583L6.43333 11.575L2.075
         7.84166L7.79583 7.38333L10 2.08333L12.2042 7.38333L17.9258 7.84166L13.5667
         11.575L14.8983 17.1583L10 14.1667Z" fill="#01141E" />
   </svg>
</span>

CSS

.rating__icon {
   display: block;
   width: 20px;
   height: 20px;
}

Grupo de estrelas azuis tamanho grande

Preview

HTML

<div class="rating">
   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
         <path d="M10 15.2169L4.1225 18.5069L5.435 11.9002L0.489166 7.32692L7.17833 6.53358L10
         0.416916L12.8217 6.53358L19.5108 7.32692L14.565 11.9002L15.8775 18.5069L10 15.2169Z" fill="#01141E" />
      </svg>
   </span>

   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
         <path d="M10 15.2169L4.1225 18.5069L5.435 11.9002L0.489166 7.32692L7.17833 6.53358L10
         0.416916L12.8217 6.53358L19.5108 7.32692L14.565 11.9002L15.8775 18.5069L10 15.2169Z" fill="#01141E" />
      </svg>
   </span>


   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
         <path d="M10 15.2169L4.1225 18.5069L5.435 11.9002L0.489166 7.32692L7.17833 6.53358L10
         0.416916L12.8217 6.53358L19.5108 7.32692L14.565 11.9002L15.8775 18.5069L10 15.2169Z" fill="#01141E" />
      </svg>
   </span>

   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20" fill="none">
         <path
            d="M10 12.2133L12.3475 13.6467L11.7092 10.9717L13.7983 9.18249L11.0567 8.96249L10
            6.42333V12.2133ZM10 14.1667L5.10167 17.1583L6.43333 11.575L2.075 7.84166L7.79583 7.38333L10 2.08333L12.2042 7.38333L17.9258 7.84166L13.5667 11.575L14.8983 17.1583L10 14.1667Z"
            fill="#01141E" />
      </svg>
   </span>

   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
         <path
            d="M10 15.2167L4.1225 18.5067L5.435 11.9L0.489166 7.32667L7.17833 6.53334L10
            0.416672L12.8217 6.53334L19.5108 7.32667L14.565 11.9L15.8775 18.5067L10 15.2167ZM10
            13.3067L13.5392 15.2875L12.7483 11.31L15.7258 8.55584L11.6983 8.07834L10 4.39584L8.30167
            8.07917L4.27417 8.55584L7.25167 11.31L6.46083 15.2875L10 13.3067Z"
            fill="#A7A7A7" />
      </svg>
   </span>
</div>

CSS

.rating {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}

.rating__icon {
  display: flex;
}

Grupo de estrelas azuis tamanho médio

Preview

HTML

<div class="rating">
   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
         <path d="M8 12.1733L3.298 14.8053L4.348 9.52001L0.391335 5.86134L5.74267 5.22668L8
         0.333344L10.2573 5.22668L15.6087 5.86134L11.652 9.52001L12.702 14.8053L8 12.1733Z" fill="#01141E" />
      </svg>
   </span>

   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
         <path d="M8 12.1733L3.298 14.8053L4.348 9.52001L0.391335 5.86134L5.74267 5.22668L8
         0.333344L10.2573 5.22668L15.6087 5.86134L11.652 9.52001L12.702 14.8053L8 12.1733Z" fill="#01141E" />
      </svg>
   </span>

   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
         <path d="M8 12.1733L3.298 14.8053L4.348 9.52001L0.391335 5.86134L5.74267 5.22668L8
         0.333344L10.2573 5.22668L15.6087 5.86134L11.652 9.52001L12.702 14.8053L8 12.1733Z" fill="#01141E" />
      </svg>
   </span>

   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none">
         <path
            d="M8 9.77066L9.878 10.9173L9.36733 8.77732L11.0387 7.34599L8.84533 7.16999L8
            5.13866V9.77066ZM8 11.3333L4.08133 13.7267L5.14667 9.25999L1.66 6.27332L6.23667 5.90666L8
            1.66666L9.76333 5.90666L14.3407 6.27332L10.8533 9.25999L11.9187 13.7267L8 11.3333Z"
            fill="#01141E" />
      </svg>
   </span>

   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
         <path
            d="M8 12.1733L3.298 14.8053L4.348 9.52001L0.391334 5.86134L5.74267 5.22668L8
            0.333344L10.2573 5.22668L15.6087 5.86134L11.652 9.52001L12.702 14.8053L8 12.1733ZM8
            10.6453L10.8313 12.23L10.1987 9.04801L12.5807 6.84468L9.35867 6.46268L8 3.51668L6.64133
            6.46334L3.41933 6.84468L5.80133 9.04801L5.16867 12.23L8 10.6453Z"
            fill="#A7A7A7" />
      </svg>
   </span>
</div>

CSS

.rating {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
}

.rating__icon {
  display: flex;
}

Grupo de estrelas azuis tamanho pequeno

Preview

HTML

<div class="rating">
   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
         <path d="M6 9.13L2.4735 11.104L3.261 7.14L0.293503 4.396L4.307 3.92L6 0.25L7.693 3.92L11.7065
         4.396L8.739 7.14L9.5265 11.104L6 9.13Z" fill="#01141E" />
      </svg>
   </span>

   <div class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
         <path d="M6 9.13L2.4735 11.104L3.261 7.14L0.293503 4.396L4.307 3.92L6 0.25L7.693 3.92L11.7065
         4.396L8.739 7.14L9.5265 11.104L6 9.13Z" fill="#01141E" />
      </svg>
   </div>

   <div class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
         <path d="M6 9.13L2.4735 11.104L3.261 7.14L0.293503 4.396L4.307 3.92L6 0.25L7.693 3.92L11.7065
         4.396L8.739 7.14L9.5265 11.104L6 9.13Z" fill="#01141E" />
      </svg>
   </div>

   <div class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 12 12" fill="none">
         <path d="M6 7.328L7.4085 8.188L7.0255 6.583L8.279 5.5095L6.634 5.3775L6 3.854V7.328ZM6 8.5L3.061
         10.295L3.86 6.945L1.245 4.705L4.6775 4.43L6 1.25L7.3225 4.43L10.7555 4.705L8.14 6.945L8.939 10.295L6 8.5Z" fill="#01141E" />
      </svg>
   </div>

   <div class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
         <path
            d="M6 9.13L2.4735 11.104L3.261 7.14L0.2935 4.396L4.307 3.92L6 0.25L7.693 3.92L11.7065
            4.396L8.739 7.14L9.5265 11.104L6 9.13ZM6 7.984L8.1235 9.1725L7.649 6.786L9.4355 5.1335L7.019
            4.847L6 2.6375L4.981 4.8475L2.5645 5.1335L4.351 6.786L3.8765 9.1725L6 7.984Z"
            fill="#A7A7A7" />
      </svg>
   </div>
</div>

CSS

.rating {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
}

.rating__icon {
  display: flex;
}

Grupo de estrelas cinzas tamanho grande

Preview

HTML

<div class="rating">
   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 20 20" fill="none">
         <path d="M9.99995 14.1667L5.10162 17.1583L6.43328 11.575L2.07495 7.84168L7.79578 7.38334L9.99995
         2.08334L12.2041 7.38334L17.9258 7.84168L13.5666 11.575L14.8983 17.1583L9.99995 14.1667Z" fill="#A7A7A7" />
      </svg>
   </span>

   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 20 20" fill="none">
         <path d="M9.99995 14.1667L5.10162 17.1583L6.43328 11.575L2.07495 7.84168L7.79578 7.38334L9.99995
         2.08334L12.2041 7.38334L17.9258 7.84168L13.5666 11.575L14.8983 17.1583L9.99995 14.1667Z" fill="#A7A7A7" />
      </svg>
   </span>

   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 20 20" fill="none">
         <path d="M9.99995 14.1667L5.10162 17.1583L6.43328 11.575L2.07495 7.84168L7.79578 7.38334L9.99995
         2.08334L12.2041 7.38334L17.9258 7.84168L13.5666 11.575L14.8983 17.1583L9.99995 14.1667Z" fill="#A7A7A7" />
      </svg>
   </span>

   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
         <path
            d="M9.99997 15.2167L4.12247 18.5067L5.43497 11.9L0.489136 7.32666L7.1783 6.53332L9.99997
            0.416656L12.8216 6.53332L19.5108 7.32666L14.565 11.9L15.8775 18.5067L9.99997 15.2167ZM9.99997
            13.3067L13.5391 15.2875L12.7483 11.31L15.7258 8.55582L11.6983 8.07832L9.99997 4.39582L8.30164
            8.07916L4.27414 8.55582L7.25164 11.31L6.4608 15.2875L9.99997 13.3067Z"
            fill="#A7A7A7" />
      </svg>
   </span>

   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
         <path
            d="M9.99997 15.2167L4.12247 18.5067L5.43497 11.9L0.489136 7.32666L7.1783 6.53332L9.99997
            0.416656L12.8216 6.53332L19.5108 7.32666L14.565 11.9L15.8775 18.5067L9.99997 15.2167ZM9.99997
            13.3067L13.5391 15.2875L12.7483 11.31L15.7258 8.55582L11.6983 8.07832L9.99997 4.39582L8.30164
            8.07916L4.27414 8.55582L7.25164 11.31L6.4608 15.2875L9.99997 13.3067Z"
            fill="#A7A7A7" />
      </svg>
   </span>
</div>

CSS

.rating {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}

.rating__icon {
  display: flex;
}

Grupo de estrelas cinzas tamanho médio

Preview

HTML

<div class="rating">
   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 16 16" fill="none">
         <path d="M8.00003 11.3333L4.08137 13.7267L5.1467 9.25999L1.66003 6.27332L6.2367 5.90666L8.00003
         1.66666L9.76337 5.90666L14.3407 6.27332L10.8534 9.25999L11.9187 13.7267L8.00003 11.3333Z" fill="#A7A7A7" />
      </svg>
   </span>

   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 16 16" fill="none">
         <path d="M8.00003 11.3333L4.08137 13.7267L5.1467 9.25999L1.66003 6.27332L6.2367 5.90666L8.00003
         1.66666L9.76337 5.90666L14.3407 6.27332L10.8534 9.25999L11.9187 13.7267L8.00003 11.3333Z" fill="#A7A7A7" />
      </svg>
   </span>

   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 16 16" fill="none">
         <path d="M8.00003 11.3333L4.08137 13.7267L5.1467 9.25999L1.66003 6.27332L6.2367 5.90666L8.00003
         1.66666L9.76337 5.90666L14.3407 6.27332L10.8534 9.25999L11.9187 13.7267L8.00003 11.3333Z" fill="#A7A7A7" />
      </svg>
   </span>

   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
         <path
            d="M8.00002 12.1733L3.29802 14.8053L4.34802 9.52001L0.391357 5.86134L5.74269 5.22668L8.00002
            0.333344L10.2574 5.22668L15.6087 5.86134L11.652 9.52001L12.702 14.8053L8.00002 12.1733ZM8.00002
            10.6453L10.8314 12.23L10.1987 9.04801L12.5807 6.84468L9.35869 6.46268L8.00002 3.51668L6.64136
            6.46334L3.41936 6.84468L5.80136 9.04801L5.16869 12.23L8.00002 10.6453Z"
            fill="#A7A7A7" />
      </svg>
   </span>

   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
         <path
            d="M8.00002 12.1733L3.29802 14.8053L4.34802 9.52001L0.391357 5.86134L5.74269 5.22668L8.00002
            0.333344L10.2574 5.22668L15.6087 5.86134L11.652 9.52001L12.702 14.8053L8.00002 12.1733ZM8.00002
            10.6453L10.8314 12.23L10.1987 9.04801L12.5807 6.84468L9.35869 6.46268L8.00002 3.51668L6.64136
            6.46334L3.41936 6.84468L5.80136 9.04801L5.16869 12.23L8.00002 10.6453Z"
            fill="#A7A7A7" />
      </svg>
   </span>
</div>

CSS

.rating {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
}

.rating__icon {
  display: flex;
}

Grupo de estrelas cinzas tamanho pequeno

Preview

HTML

<div class="rating">
   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 12 12" fill="none">
         <path d="M6 8.5L3.061 10.295L3.85999 6.945L1.245 4.705L4.6775 4.43L6 1.25L7.3225 4.43L10.7555
         4.705L8.14 6.945L8.939 10.295L6 8.5Z" fill="#A7A7A7" />
      </svg>
   </span>

   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 12 12" fill="none">
         <path d="M6 8.5L3.061 10.295L3.85999 6.945L1.245 4.705L4.6775 4.43L6 1.25L7.3225 4.43L10.7555
         4.705L8.14 6.945L8.939 10.295L6 8.5Z" fill="#A7A7A7" />
      </svg>
   </span>

   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 12 12" fill="none">
         <path d="M6 8.5L3.061 10.295L3.85999 6.945L1.245 4.705L4.6775 4.43L6 1.25L7.3225 4.43L10.7555
         4.705L8.14 6.945L8.939 10.295L6 8.5Z" fill="#A7A7A7" />
      </svg>
   </span>

   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
         <path
            d="M5.99996 9.13L2.47346 11.104L3.26096 7.14L0.293457 4.396L4.30696 3.92L5.99996 0.25L7.69296
            3.92L11.7065 4.396L8.73896 7.14L9.52646 11.104L5.99996 9.13ZM5.99996 7.984L8.12346 9.1725L7.64896
            6.786L9.43546 5.1335L7.01896 4.847L5.99996 2.6375L4.98096 4.8475L2.56446 5.1335L4.35096 6.786L3.87646 9.1725L5.99996 7.984Z"
            fill="#A7A7A7" />
      </svg>
   </span>

   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
         <path
            d="M5.99996 9.13L2.47346 11.104L3.26096 7.14L0.293457 4.396L4.30696 3.92L5.99996 0.25L7.69296
            3.92L11.7065 4.396L8.73896 7.14L9.52646 11.104L5.99996 9.13ZM5.99996 7.984L8.12346 9.1725L7.64896
            6.786L9.43546 5.1335L7.01896 4.847L5.99996 2.6375L4.98096 4.8475L2.56446 5.1335L4.35096 6.786L3.87646 9.1725L5.99996 7.984Z"
            fill="#A7A7A7" />
      </svg>
   </span>
</div>

CSS

.rating {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
}

.rating__icon {
  display: flex;
}

Estrela azul grande com label

Preview

HTML

<div class="rating">
   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
         <path d="M10 15.7167L4.1225 19.0067L5.435 12.4L0.489166 7.82669L7.17833 7.03335L10
         0.916687L12.8217 7.03335L19.5108 7.82669L14.565 12.4L15.8775 19.0067L10 15.7167Z" fill="#01141E" />
      </svg>
   </span>
   <span class="rating__number">4.5</span>
</div>

CSS

.rating {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}

.rating__icon {
  display: flex;
  height: 25px;
}

.rating__number {
  color: #01141E;
  font-size: 18px;
  font-weight: 500;
  line-height: 25px;
}

Estrela azul média com label

Preview

HTML

<div class="rating">
   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
         <path d="M8 12.1733L3.298 14.8053L4.348 9.51998L0.391335 5.86131L5.74267
         5.22665L8 0.333313L10.2573 5.22665L15.6087 5.86131L11.652 9.51998L12.702 14.8053L8 12.1733Z" fill="#01141E" />
      </svg>
   </span>
   <span class="rating__number">4.5</span>
</div>

CSS

.rating {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}

.rating__icon {
  display: flex;
}

.rating__number {
  color: #01141E;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

Estrela azul pequena com label

Preview

HTML

<div class="rating">
   <span class="rating__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
         <path d="M6 9.13L2.4735 11.104L3.261 7.14L0.293503 4.396L4.307 3.92L6 0.25L7.693
         3.92L11.7065 4.396L8.739 7.14L9.5265 11.104L6 9.13Z" fill="#01141E" />
      </svg>
   </span>
   <span class="rating__number">4.5</span>
</div>

CSS

.rating {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}

.rating__icon {
  display: flex;
}

.rating__number {
  color: #01141E;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

Ícone de coração 'outline' cinza

Preview

HTML

<span class="rating__icon">
   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
      <path
         d="M10.0008 3.77416C11.9583 2.01667 14.9833 2.075 16.8691 3.96417C18.7541 5.85416 18.8191
         8.86416 17.0658 10.8275L9.99913 17.9042L2.93413 10.8275C1.1808 8.86416 1.24663 5.84916
         3.1308 3.96417C5.0183 2.0775 8.03746 2.01417 10.0008 3.77416ZM15.6891 5.14166C14.4391 3.89
         12.4225 3.83917 11.1141 5.01417L10.0016 6.0125L8.8883 5.015C7.5758 3.83833 5.5633 3.89
         4.30996 5.14333C3.0683 6.385 3.0058 8.3725 4.14996 9.68583L9.99996 15.545L15.85
         9.68666C16.995 8.3725 16.9325 6.3875 15.6891 5.14166Z"
         fill="#A7A7A7" />
   </svg>
</span>

CSS

.rating__icon {
   display: block;
   width: 20px;
   height: 20px;
}

Ícone de coração cinza

Preview

HTML

<span class="rating__icon">
   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
      <path
         d="M10.0008 3.77416C11.9583 2.01667 14.9833 2.075 16.8691 3.96417C18.7541 5.85416
         18.8191 8.86416 17.0658 10.8275L9.99913 17.9042L2.93413 10.8275C1.1808 8.86416 1.24663
         5.84916 3.1308 3.96417C5.0183 2.0775 8.03746 2.01417 10.0008 3.77416Z"
         fill="#A7A7A7" />
   </svg>
</span>

CSS

.rating__icon {
   display: block;
   width: 20px;
   height: 20px;
}

Ícone de coração colorido

Preview

HTML

<span class="rating__icon">
   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
      <path
         d="M10.0008 3.77441C11.9583 2.01691 14.9833 2.07524 16.8691 3.96441C18.7541 5.85441
         18.8191 8.86441 17.0658 10.8277L9.99913 17.9044L2.93413 10.8277C1.1808 8.86441 1.24663
         5.84941 3.1308 3.96441C5.0183 2.07774 8.03746 2.01441 10.0008 3.77441Z"
         fill="#FF3939" />
   </svg>
</span>

CSS

.rating__icon {
   display: block;
   width: 20px;
   height: 20px;
}