---
title: "Star Ratings: Replace icons"
description: "### Basics The basic structure of star ratings looks as follows: - 1 icon for the gray (inactive) background - 1 icon for the yellow (active) foreground For a 4-star product rating, 4 active and 1 inactive star will be…"
url: "https://getaawp.com/docs/article/star-ratings-replace-icons/"
updated: "2016-10-19"
category: "Extending & Styling"
---

# Star Ratings: Replace icons

### Basics

The basic structure of star ratings looks as follows:

- 1 icon for the gray (inactive) background
- 1 icon for the yellow (active) foreground

For a 4-star product rating, 4 active and 1 inactive star will be shown.

### Icon sources

On the one hand you can create your own icons with almost every picture editing tool. On the other hand you can make use of a public resource like [Iconfinder](https://www.iconfinder.com/). Anyway the file format should be SVG, alternatively PNG or GIF. After getting your icons, please upload them on your server (e.g. via WordPress media).

### Default sizes

On the plugin settings page (or via shortcode) you can choose between the following star rating sizes:

- Small = 16px * 16px
- Medium = 20px * 20px
- Large = 30px * 30px

Please be aware that the new icons should be at least 30px * 30px in order to fit all sizes.

## Replacing icons via CSS

On the plugin settings page (tab "output") please select "Custom style" under the star ratings section. Afterwards you can replace the graphics easily as follows:

#### Variant 1: Replacing both icons

`.aawp .aawp-star-rating--custom,
.aawp-star-rating--custom,
a.aawp-star-rating--custom {
background-image: url('https://domain.de/path-to-images/star.png');
}`

.aawp .aawp-star-rating--custom > span,
 .aawp-star-rating--custom > span,
 a.aawp-star-rating--custom > span {
 background-image: url('https://domain.de/path-to-images/star-active.png');
 }

---

#### Variant 2: Replacing both icons and defining a custom size

This example sets a custom size of 32px * 16px for a horizontal icon.
 `.aawp .aawp-star-rating--custom,
.aawp-star-rating--custom,
a.aawp-star-rating--custom {
height: 16px;
width: 32px;`

background-size: 32px 16px;
 background-image: url('https://domain.de/path-to-images/star.png');
 }

.aawp .aawp-star-rating--custom > span,
 .aawp-star-rating--custom > span,
 a.aawp-star-rating--custom > span {
 height: 16px;
 width: 32px;

background-size: 32px 16px;
 background-image: url('https://domain.de/path-to-images/star-active.png');
 }

---

#### Variant 3: Eliminating the background icon

This example eliminates the inactive background icon.
 `.aawp .aawp-star-rating--custom,
.aawp-star-rating--custom,
a.aawp-star-rating--custom {
background-image: none;
}`

.aawp .aawp-star-rating--custom > span,
 .aawp-star-rating--custom > span,
 a.aawp-star-rating--custom > span {
 background-image: url('https://domain.de/path-to-images/star-active.png');
 }

---

All previously showed styles should be placed into the settings field "Custom CSS" (tab "output"). Alternatively you can place them into your child-/theme's styles. Therefore please put *.aawp-custom* in front of every declaration: e.g. `.aawp-custom .aawp .aawp-star-rating--custom { ... }`