Icons in Pure CSS

In my previous post about Reimagine Atomic CSS, I introduced a preset of UnoCSS that provides the ability to use any icons on-demand in purely CSS. Today in this post, I’d like to share with you how we made it possible.

If you are interested in how I get here, there is an index of my previous post about the stories of my icon explorations and experiments.

I know there is a Pure CSS icon solution called css.gg, which is a great idea to use pseudo-elements (::before, ::after) to construct the icons. However, that could require some expert knowledge of how CSS works, but I imagine that approach could be hard to create more complex icons. Instead of the limited choices in a specific set, I am seeking a more general solution that could apply to any icons.

The idea come from this feature request created by @husayt to unplugin-icons and the initial implementation in this pull request by @userquin. The idea here is quite straightforward - to generate CSS with the icons in DataURI as the background image.

Leave a Comment