<div class="example">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100px" height="100px">
<title>Twitter</title>
<path d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12c6.6,0,12-5.4,12-12S18.6,0,12,0z M18,9.7c0,0.1,0,0.2,0,0.4c0,3.8-2.9,8.2-8.2,8.2c-1.6,0-3.2-0.5-4.4-1.3c0.2,0,0.5,0,0.7,0c1.4,0,2.6-0.5,3.6-1.2c-1.3,0-2.3-0.9-2.7-2c0.2,0,0.4,0.1,0.5,0.1c0.3,0,0.5,0,0.8-0.1C6.9,13.5,6,12.3,6,10.9c0,0,0,0,0,0c0.4,0.2,0.8,0.3,1.3,0.4C6.5,10.7,6,9.9,6,8.8c0-0.5,0.1-1,0.4-1.5c1.4,1.8,3.6,2.9,6,3c-0.1-0.2-0.1-0.4-0.1-0.7c0-1.6,1.3-2.9,2.9-2.9c0.8,0,1.6,0.3,2.1,0.9c0.7-0.1,1.3-0.4,1.8-0.7c-0.2,0.7-0.7,1.2-1.3,1.6c0.6-0.1,1.1-0.2,1.7-0.5C19.1,8.8,18.6,9.3,18,9.7z"> </path>
</svg>
</div>
xxxxxxxxxx
.example {
text-align: center;
}
svg {
fill: #555;
}
svg > path:hover {
fill: #e76269;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.