As you might already know I have created recently css.gg 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
}

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::after,
.gg-yinyang::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 10px;
  top: 4px
}

Step 3

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

.gg-yinyang::before {
  border: 2px solid;
  left: 0
}

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;
  box-shadow:
    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
}

Final Result

Animated

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.

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

AM