Introduction 📖

The default star icons in our widgets can be replaced with your own Custom Icons to make your widgets fit in with your brand and the design of your site!

Before & After

Requirements

⭐️ Active REVIEWS.io account

Instructions ⚙️

Product Rating Snippet

To implement your custom icons into your site, you will need to add a style block at the end of your page. To display the icon that you would like on your site, you would need to use the style block below👇

<style>
  .ruk_rating_snippet {
    --customStarIcon: url(https://assets.reviews.io/documentation/styles-documentation/widgets/custom-icons/custom-icon-heart.svg);
    --customStarSize: 22px;
  }

  .ruk_rating_snippet i {
    font-size: var(--customStarSize) !important;
    vertical-align: middle;
    position: relative;
    color: transparent;
    background-image: none;
    -webkit-background-clip: initial;
    -moz-background-clip: initial;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
  }

  .ruk_rating_snippet i:after {
    position: absolute;
    color: transparent;
    background-image: none;
    -webkit-background-clip: initial;
    -moz-background-clip: initial;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    content: "";
    background-image: var(--customStarIcon);
    background-size: 80% 80%;
    background-repeat: no-repeat;
    background-position: center center;
    mix-blend-mode: luminosity;
    opacity: 0.4;
    display: inline-block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 2;
  }

  .ruk_rating_snippet i:before {
    background-image: var(--customStarIcon);
    background-size: 80% 80%;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    z-index: 4;
  }

  .ruk-icon-percentage-star--100:before {
    clip-path: none;
  }

  .ruk-icon-percentage-star--75:before {
    clip-path: inset(0px 25% 0px 0px);
  }

  .ruk-icon-percentage-star--50:before {
    clip-path: inset(0px 50% 0px 0px);
  }

  .ruk-icon-percentage-star--25:before {
    clip-path: inset(0px 75% 0px 0px);
  }

  .ruk-icon-percentage-star--0:before {
    clip-path: inset(0px 100% 0px 0px);
  }

  .ruk-rating-snippet-count {
    margin-left: 5px;
  }
</style>

IMPORTANT: The customStarIcon variable can support any SVG or PNG

The CSS variable 'customStarIcon' has to be modified to change the icons used. This CSS variable controls which icon will be used. A URL path is provided to change the icon. For example, you could set your 'customStarIcon' variable to the URL below to customize your widget to display heart icons instead of stars ⬇️

.ruk_rating_snippet {
    --customStarIcon: url(https://assets.reviews.io/documentation/styles-documentation/widgets/custom-icons/custom-icon-heart.svg);
    --customStarSize: 22px;
}

Important: The style block will need to be added at the very bottom of the page to change the rating snippet widget icons correctly.

Here is an example of where you would need to add this code👇

Custom Icons for other REVIEWS.io Widgets

The icons can be implemented in our other widgets. Below is a list of the widgets that can support this change 👇

Product Reviews Widget
Carousel Widget
Floating Widget

To make the changes in those widgets, you will need the following code block:

<style>
    .R-RatingStars {
        --customStarIcon: url(https://assets.reviews.io/documentation/styles-documentation/widgets/custom-icons/custom-icon-heart.svg);
    }
    .R-RatingStars .R-RatingStars__stars {
        display: inline-flex;
        grid-column-gap: 0.1em;
    }
    .R-RatingStars .R-RatingStars__stars .stars__icon {
        position: relative;
        color: transparent;
        background-image: none;
        -webkit-background-clip: initial;
        -moz-background-clip: initial;
        -webkit-text-fill-color: transparent;
        -moz-text-fill-color: transparent;
    }
    .R-RatingStars .R-RatingStars__stars .stars__icon:before,
    .R-RatingStars .R-RatingStars__stars .stars__icon:after {
        background-image: var(--customStarIcon);
        background-size: 80% 80%;
        background-repeat: no-repeat;
        background-position: center center;
    }
    .R-RatingStars .R-RatingStars__stars .stars__icon:before {
        position: relative;
        z-index: 4;
    }
    .R-RatingStars .R-RatingStars__stars .stars__icon:after {
        content: "";
        mix-blend-mode: luminosity;
        opacity: 0.4;
        display: inline-block;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: 2;
    }
    .R-RatingStars .R-RatingStars__stars .stars__icon--0:before {
        clip-path: inset(0px 100% 0px 0px);
    }
    .R-RatingStars .R-RatingStars__stars .stars__icon--25:before {
        clip-path: inset(0px 75% 0px 0px);
    }
    .R-RatingStars .R-RatingStars__stars .stars__icon--50:before {
        clip-path: inset(0px 50% 0px 0px);
    }
    .R-RatingStars .R-RatingStars__stars .stars__icon--75:before {
        clip-path: inset(0px 25% 0px 0px);
    }
    .R-RatingStars .R-RatingStars__stars .stars__icon--100:before {
        clip-path: none;
    }
</style>

After installing the style block at the very bottom of the page, your widget should start to display the custom icons! 🌟

As you can see in the example below, this widget went from using our stars to something a bit more on-brand! ❤️

Squarespace Integration

Floating Review Widget

BigCommerce App