This is a non-interactive, display-only star rating pattern. For an interactive user-selectable star rating selection pattern, please refer to Star Rating Select .

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.

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