можно попробовать вставить svg картинку фоном у псевдоэлемента, а внутри менять значение fill="#color"
.star:after {
content: "";
display: inline-block;
width: 40px;
height: 40px;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;utf8,<svg enable-background='new 0 0 64 64' height='64px' id='Layer_1' version='1.1' viewBox='0 0 64 64' width='64px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g><path fill='#FF0000' d='M32,5.815c0,0-10.073,7.816-10.073,27.016c0,12.314,3.724,20.013,8.573,21.329V41.766c0-0.828,0.671-1.5,1.5-1.5 s1.5,0.672,1.5,1.5V54.16c4.849-1.315,8.573-9.015,8.573-21.329C42.073,13.409,32,5.815,32,5.815z M31.882,20.633 c-1.729,0-3.418-0.155-4.914-0.438c1.465-4.721,3.531-7.901,5.051-9.761c1.516,1.837,3.572,4.989,5.027,9.715 C35.492,20.463,33.712,20.633,31.882,20.633z'/><path fill='#0000FF' d='M19.224,41.319c-3.007,0-5.444,2.081-5.444,4.648v12.218l9.862-7.296c-1.463-2.496-2.556-5.737-3.201-9.57H19.224z'/><path fill='#0000FF' d='M44.776,41.319H43.56c-0.645,3.833-1.738,7.074-3.201,9.57l9.862,7.296V45.967C50.22,43.4,47.783,41.319,44.776,41.319z'/></g></svg>");
background-size: contain;
background-position: center;
}
Средний
