You can create custom icons using CSS by utilizing its shape-drawing capabilities, such as squares, circles, triangles, and more complex shapes using the ::before and ::after pseudo-elements.
Here’s an example of creating a heart shape:
```
.heart {
position: relative;
width: 100px;
height: 90px;
}
.heart::before, .heart::after {
position: absolute;
content: “”;
width: 52px;
height: 80px;
top: 40px;
left: 50px;
border-radius: 50px 50px 0 0;
background: red;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart::after {
left: 50px;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
```
You have to experiment with shapes, rotations, and positions to create more complex things like people, logos, and other icons.
But remember, the more complex shapes are, the harder it is to manage and keep the code clean. So SVGs are commonly used for more complex shapes or icons.
Because SVGs work everywhere, are scalable and can be simpler to work with inside of complex designs, SVGs are usually a better solution for icons that are not super simple. They sometimes can be a little trickier to get working, but utilities like Font Awesome make it simpler.
However, knowing how to create simple shapes and icons with CSS can be important in maintaining a small code size and an ability to create simple graphics on the fly.
