DEV Community

Cover image for Yin and yang - Pure CSS, transparent, single element icon

Posted on


Yin and yang - Pure CSS, transparent, single element icon

As you might already know I have created recently a pure CSS Icon library.
So now on the v2 I am trying to add 200 more icons for a 700 total.

This library has some restrictions such as:

  1. Single HTML tag
  2. No colored negative space, only transparent
  3. Scale Good
  4. No path
  5. No data-uri PNG or SVG

So everything is harder as if I would do it on multiple tags and not transparent.

So here is my approach.

Step 1

First I created as usual a circle with 2px border and note how I do not specify when not needed the color so it inherits from the parent, when is a must I use currentColor.

.gg-yinyang {
  box-sizing: border-box;
  position: relative;
  display: block;
  /* ^ this is only to contain the icon as box is applied on all icons */

  width: 20px;
  height: 20px;
  border: 2px solid;
  border-radius: 22px

Enter fullscreen mode Exit fullscreen mode

Step 2

Now second step to create pseudo elements with half of the parent width minus the border and positioned center vertically. I do always fixed pixels to contain it and for better cross-browser support.

.gg-yinyang::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 10px;
  top: 4px

Enter fullscreen mode Exit fullscreen mode

Step 3

The ::before pseudo selector needs to be on the left and with standard border

.gg-yinyang::before {
  border: 2px solid;
  left: 0
Enter fullscreen mode Exit fullscreen mode

Step 4

Now comes the most challenging, tricky & ugly part where I cover the rest of the area with the box shadow of the ::after pseudo selector

.gg-yinyang::after {
  border: 2px solid transparent;
  right: 0;
    inset 0 0 0 4px,
    0 -3px 0 1px,
    -2px -4px 0 1px,
    -8px -5px 0 -1px,
    -11px -3px 0 -2px,
    -12px -1px 0 -3px,
    -6px -6px 0 -1px
Enter fullscreen mode Exit fullscreen mode

Final Result


This version also has as unit em where I am looking to switch for all the icons, better performance specially on animation.

For more please check the current icons on github and give it a ⭐ if you like it.

GitHub logo astrit /

700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API

Would love to see your approach on this with as less CSS as possible.


Top comments (2)

lukeshiru profile image
Luke Shiru

Thanks for the explanation, Astrit! You achieve a lot by just using "3 elements" (1 element and 2 pseudo), is great! 💖

mgohin profile image

You are crazy, and I love it !

16 Libraries You Should Know as a React Developer

Being a modern React developer is not about knowing just React itself. To stay competitive, it is highly recommended to explore the whole ecosystem. This article contains some of the most useful React component libraries to speed up your developer workflow.