Rating Forms
Ícone de estrela 'outline' cinza
- Preview
- HTML
- CSS
<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>
.rating__icon {
display: block;
width: 20px;
height: 20px;
}
Ícone de estrela cinza
- Preview
- HTML
- CSS
<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>
.rating__icon {
display: block;
width: 20px;
height: 20px;
}
Ícone de estrela azul
- Preview
- HTML
- CSS
<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>
.rating__icon {
display: block;
width: 20px;
height: 20px;
}
Ícone de estrela azul parcialmente cheia
- Preview
- HTML
- CSS
<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>
.rating__icon {
display: block;
width: 20px;
height: 20px;
}
Grupo de estrelas azuis tamanho grande
- Preview
- HTML
- CSS
<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>
.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
- CSS
<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>
.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
- CSS
<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>
.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
- CSS
<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>
.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
- CSS
<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>
.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
- CSS
<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>
.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
- CSS
<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>
.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
- CSS
<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>
.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
- CSS
<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>
.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
- CSS
<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>
.rating__icon {
display: block;
width: 20px;
height: 20px;
}
Ícone de coração cinza
- Preview
- HTML
- CSS
<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>
.rating__icon {
display: block;
width: 20px;
height: 20px;
}
Ícone de coração colorido
- Preview
- HTML
- CSS
<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>
.rating__icon {
display: block;
width: 20px;
height: 20px;
}