<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<i class="Icon Icon--star"></i>
<i class="Icon Icon--small Icon--star"></i>
</body>
</html>
.Icon {
width: 3em;
height: 3em;
display: inline-block;
}
.Icon--small {
width: 2em;
height: 2em;
}
.Icon--star {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20d%3D%22M32.194%207.106c-13.689%200-24.826%2011.137-24.826%2024.826%200%2013.69%2011.137%2024.828%2024.826%2024.828S57.02%2045.622%2057.02%2031.932c.001-13.689-11.136-24.826-24.826-24.826zm13.717%2023.011v.001l-7.187%205.2%202.768%208.46c.044.132.067.273.067.417%200%20.739-.598%201.339-1.337%201.339-.294%200-.564-.094-.784-.253l-7.243-5.239-7.243%205.239c-.22.159-.49.253-.783.253-.74%200-1.339-.599-1.339-1.339%200-.145.024-.285.068-.417l2.769-8.46-7.187-5.2v-.001c-.336-.242-.554-.637-.554-1.083%200-.739.598-1.337%201.338-1.337h8.897l2.755-8.421c.168-.547.677-.945%201.28-.945.602%200%201.112.398%201.279.945l2.755%208.421h8.897c.739%200%201.338.598%201.338%201.337-.001.446-.219.841-.554%201.083z%22%2F%3E%3C%2Fsvg%3E");
}
.Icon--star:hover {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22tomato%22%20d%3D%22M32.194%207.106c-13.689%200-24.826%2011.137-24.826%2024.826%200%2013.69%2011.137%2024.828%2024.826%2024.828S57.02%2045.622%2057.02%2031.932c.001-13.689-11.136-24.826-24.826-24.826zm13.717%2023.011v.001l-7.187%205.2%202.768%208.46c.044.132.067.273.067.417%200%20.739-.598%201.339-1.337%201.339-.294%200-.564-.094-.784-.253l-7.243-5.239-7.243%205.239c-.22.159-.49.253-.783.253-.74%200-1.339-.599-1.339-1.339%200-.145.024-.285.068-.417l2.769-8.46-7.187-5.2v-.001c-.336-.242-.554-.637-.554-1.083%200-.739.598-1.337%201.338-1.337h8.897l2.755-8.421c.168-.547.677-.945%201.28-.945.602%200%201.112.398%201.279.945l2.755%208.421h8.897c.739%200%201.338.598%201.338%201.337-.001.446-.219.841-.554%201.083z%22%2F%3E%3C%2Fsvg%3E");
transition: background-image ease 0.2s
}
/* Demo only */
body {
margin: 1em;
}