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

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

astrit profile image Astrit ・2 min read

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::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;
    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


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 / css.gg

500+ CSS Icons. Customizable, Retina Ready with API & NPM


Minimalistic Icon library Designed by code.
Customizable & Retina-Ready icons entirely built in CSS.

App: https://css.gg

css.gg GitHub package.json version npm GitHub last commit Website npm GitHub issues GitHub stars



  1. API endpoint
  2. Lightweight
  3. Accessible
  4. Agile
  5. Retina Ready
  6. Compilable

Getting started

Access all the icons as package:

Name Source
CLI npm i -S css.gg
CSS https://css.gg/c
JSON https://css.gg/json
XML https://css.gg/xml

This package CDN alternatives


Add icons in your project

1. Markup

The class name starts always with "gg-" followed by icon name.

<i class="gg-icon-name"></i>

To resize an icon you just need to change the value of a css variable "--ggs" to any value you like if not specified it falls back to 1 or the actual size.

.gg-icon-name {
    /* This value will multiple the actual size  */
    --ggs: 10

The variable can be added to the parent, custom class,body or root…

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


Posted on Feb 7 by:

astrit profile



Front-end Developer, creator of https://css.gg


markdown guide

You are crazy, and I love it !


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