<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
<symbol class="icon--plug" id="plug" viewBox="0 0 64 64">
<title>Plug</title>
<description>Electrical cord with plug</description>
<path d="M27.41 16.754h-.703c-.824 0-1.491.612-1.491 1.368v5.794h3.686v-5.794c-.001-.755-.668-1.368-1.492-1.368zm9.882 0h-.704c-.823 0-1.49.612-1.49 1.368v5.794h3.685v-5.794c0-.755-.667-1.368-1.491-1.368z"/><path d="M32 6.621c-14.313 0-25.957 11.644-25.957 25.957 0 6.91 2.684 13.413 7.558 18.311 2.886 2.9 6.458 5.102 10.329 6.366.258.085.52.125.777.125 1.052 0 2.031-.67 2.376-1.725.429-1.313-.288-2.724-1.6-3.152-3.123-1.021-6.006-2.799-8.337-5.142-3.935-3.954-6.102-9.204-6.102-14.783 0-11.556 9.401-20.957 20.957-20.957s20.957 9.401 20.957 20.957c0 5.6-2.178 10.859-6.134 14.816-1.518 1.364-5.286 4.104-7.548 4.104-1.162 0-2.031-.366-2.737-1.151-1.789-1.993-2.181-6.029-2.165-8.839 4.339-.219 7.793-3.796 7.793-8.19v-7.78H21.833v7.78c0 4.307 3.318 7.833 7.537 8.177-.026 3.35.444 8.84 3.441 12.184 1.652 1.845 3.888 2.819 6.465 2.819 4.836 0 10.341-4.885 10.952-5.441l.081-.076c4.932-4.908 7.648-11.443 7.648-18.403C57.957 18.265 46.313 6.621 32 6.621z"/>
</symbol>
<symbol class="icon--star" id="star" viewBox="0 0 64 64">
<title>Star</title>
<description>Star with circular background</description>
<path d="M32.194 7.106c-13.689 0-24.826 11.137-24.826 24.826 0 13.69 11.137 24.828 24.826 24.828S57.02 45.622 57.02 31.932c.001-13.689-11.136-24.826-24.826-24.826zm13.717 23.011v.001l-7.187 5.2 2.768 8.46c.044.132.067.273.067.417 0 .739-.598 1.339-1.337 1.339-.294 0-.564-.094-.784-.253l-7.243-5.239-7.243 5.239c-.22.159-.49.253-.783.253-.74 0-1.339-.599-1.339-1.339 0-.145.024-.285.068-.417l2.769-8.46-7.187-5.2v-.001c-.336-.242-.554-.637-.554-1.083 0-.739.598-1.337 1.338-1.337h8.897l2.755-8.421c.168-.547.677-.945 1.28-.945.602 0 1.112.398 1.279.945l2.755 8.421h8.897c.739 0 1.338.598 1.338 1.337-.001.446-.219.841-.554 1.083z"/>
</symbol>
<symbol class="icon--umbrella" id="umbrella" viewBox="0 0 64 64">
<title>Umbrella</title>
<description>Umbrella with rounded handle and rain drops</description>
<path d="M18.228 16.441c2.002 0 3.625-1.623 3.625-3.625 0-2.583-3.625-6.625-3.625-6.625s-3.625 4.042-3.625 6.625c0 2.002 1.623 3.625 3.625 3.625zm-6.439-6.214c0-1.573-2.209-4.036-2.209-4.036s-2.208 2.463-2.208 4.036c0 1.22.989 2.209 2.208 2.209 1.219 0 2.209-.989 2.209-2.209z"/><path d="M34.865 9.072v-.254c0-.957-.795-1.733-1.775-1.733-.981 0-1.776.776-1.776 1.733v.256c-2.749.207-5.354.907-7.758 1.977.185.599.298 1.195.298 1.764 0 3.102-2.523 5.625-5.625 5.625-1.172 0-2.26-.361-3.162-.976-3.366 4.027-5.427 9.183-5.481 14.831.062-3.192 2.665-5.764 5.872-5.764 3.248 0 5.88 2.632 5.88 5.878 0-3.246 2.632-5.878 5.878-5.878 1.226 0 2.363.376 3.305 1.017v23.367c0 3.743 2.999 6.799 6.721 6.891l.172.002v-.002c3.722-.092 6.721-3.147 6.721-6.891 0-1.381-1.119-2.5-2.5-2.5s-2.5 1.119-2.5 2.5c0 1.015-.803 1.846-1.807 1.891-1.004-.045-1.807-.876-1.807-1.891V27.66c.97-.706 2.161-1.128 3.453-1.128 3.247 0 5.879 2.632 5.879 5.878 0-3.246 2.632-5.878 5.879-5.878 3.247 0 5.879 2.632 5.879 5.878 0 .039.019.114.019.114-.002-12.399-9.596-22.55-21.765-23.452z"/>
</symbol>
</svg>
<svg class="Icon">
<use xlink:href="#plug" />
</svg>
<svg class="Icon">
<use xlink:href="#star" />
</svg>
<svg class="Icon">
<use xlink:href="#umbrella" />
</svg>
<svg class="Icon Icon--small">
<use xlink:href="#umbrella" />
</svg>
</body>
</html>
.Icon {
width: 4em;
height: 4em;
}
.Icon--small {
width: 2em;
height: 2em;
}
/* Demo only */
body {
margin: 1em;
}