Star Rating Component

Method 1: Combined Stars

This is the simplest method for displaying star rating. To have more flexibility over individual stars, consider using Method 2 - Independent Stars.

Each non-interactive star-rating is available as an SVG symbol.

• 0
• 0-5
• 1
• 1-5
• 2
• 2-5
• 3
• 3-5
• 4
• 4-5
• 5

Below is the code example for how to use the "star-rating-2-5" symbol. Please refer to the icon section for full guidance on how to include and use SVG symbols.

<svg role="img" aria-label="Rating: 2.5/5" class="star-rating" height="16">
  <use href="#star-rating-2-5" />
</svg>

Method 2: Independent Stars

This is built using fine-grained pieces (individual stars) for optimal flexibility and for allowing potential independant star treatments (i.e. animations).

• 0
• 0-5
• 1
• 1-5
• 2
• 2-5
• 3
• 3-5
• 4
• 4-5
• 5

<div role="img" aria-label="Rating: 2.5/5" class="star-rating" data-stars="2-5">
  <svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
    <use href="#icon-star-dynamic" />
  </svg>
  <svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
    <use href="#icon-star-dynamic" />
  </svg>
  <svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
    <use href="#icon-star-dynamic" />
  </svg>
  <svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
    <use href="#icon-star-dynamic" />
  </svg>
  <svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
    <use href="#icon-star-dynamic" />
  </svg>
</div>