COMPONENT: Stars
VARIANTS: sm | default | lg + optional count label

Read-only 5-star rating display. Caller emits filled (fa-solid fa-star), half (fa-solid fa-star-half-stroke) and empty (fa-light fa-star) icons; the component styles the wrapper + icon color/opacity. The row you draw must match the value you announce — see Half-star ratings below.

Integer ratings (1–5)

Rating 1:
Rating 2:
Rating 3:
Rating 4:
Rating 5:
<div class="stars"><i class="fa-solid fa-star"></i>...</div>

Half-star ratings

Half stars: use fa-solid fa-star-half-stroke (Font Awesome Pro 6) — zero extra CSS, and it measures the same box as fa-star (11.81 × 10.5px at .stars-sm), so a half star never shifts the row. Always fa-solid, never fa-light. Until 2026-08-12 the docs told callers to render 4 filled stars for a 4.5 rating while the aria-label announced “4.5”, so sighted users saw one value and screen-reader users heard another.

Rating 0.5:
Rating 1.5:
Rating 2.5:
Rating 3.5:
Rating 4.5:
<div class="stars" role="img" aria-label="4.5 out of 5 stars">
  <i class="fa-solid fa-star"></i> ×4
  <i class="fa-solid fa-star-half-stroke"></i>
</div>

Size variants

sm (12px):
default (14px):
lg (17.5px):

With count label

Append a .stars-count span after the icons.

Precision: .stars renders to half-star granularity. An aggregate average finer than that (4.8) may keep its exact figure in the aria-label only because the same figure is on screen as .stars-count text — both audiences get the same number beside the same rounded row. With no visible number, round the value to the nearest half and label it as drawn; never let the label assert a precision no viewer can see.

<span class="stars-count">4.8 · 124 reviews</span>