DEV Community

Cover image for Why & How I built - A life story.

Posted on • Updated on • Originally published at

Why & How I built - A life story.

Ok, where do I start.

  • First thanks to Peter Thaleikis for suggesting this.
  • Second is not very technical.
  • Third is personal.

The why ?

Some times is not the reason why you think that drives a project forward.

To give you just some context on why happened at all I need to tell you that one of few things I love is CSS, I have learned all in my own no educational degree so that is why you might see some unusual stuff here and there.

On December 2018 I had to take one of the biggest decisions on my life at the time and that was quitting the company I co-founded because it had turned into a toxic - money chase working environment.

I felt like I was becoming obsolete on the role of the CTO, I felt that I was forgetting the reason why I started to do web on the first place.

I wanted to return again on the very basics.

Web was a passion as kid, luckily enough became a profession and I would not lose this passion for anything in world.

As a result I did quit and started to work as freelancer and this project.

The How ?

Version control:
Github all day, interface and just the feature set for me top.

VS Code - no explanation needed.

Initial it was named as "CSSpod" where I would post CSS pod's as codepen style but only CSS, when I saw was free I decided to go with it and the app would be called same since where ever is shared the domain would be on the brand and no way to lose visitors specially how competitive CSS as keyword is.

I challenged first my self that this is not going to be a project guided by trends and built it on React, Vue or any other framework.
I wanted it to be just CSS, HTML & PHP.

Then I started designing icons one by one directly in CSS no figma, sketch or any other tool at that time I had all in my mind what I wanted to do but did not lay down any practical plan so you get it, I could lie here that I did a style guide page and a system behind it. No I did not.

Time to start:
After quite some research on what style would I follow plus considering what properties I could use, I decided to do a outlined minimalistic set inspired be by Cole Bemis (This guy is a wonderful human being)

Markup was one of the obstacles to overcome but in the end it turned out good. Initially I used void tags such as

This was a no go since you must have nothing after it
or it would wrap it. Stupid. 
<gg-icon-name /> 

Then did this which was simply ugly for icons with long names

In the end decided to do it like font-awesome with the <i></i> tag.
<i class="gg-icon-name"></i>
Enter fullscreen mode Exit fullscreen mode

Why there are no self-closing void tags >>

Also one condition was to have only 1 element with pseudo selectors no more.

To name the icons I added "gg-" to prevent duplication and since it was normal CSS it could mix with the rest of style. Also a little bit of branding on each icon.

Why Classes:
Classes because after Id a class is highest on specificity level for more:

No general class:
One of the main things I decided right at this time was that I would not do a general class to add on each icon such as "gg-style" or something to contain repeating properties such as:

.gg-icon-name {
    box-sizing: border-box;
    position: relative;
Enter fullscreen mode Exit fullscreen mode

This would complicate things a-lot, icons would not be as depended as they are right now when you select just one or few not as package tho.

This kind of project of course you need a database, no I did not. I have every icon as single php file which contains main stuff such as tags, name, template. I do list icons from a .json file so practically is a flat file system or static call it how you want.

To color a icon was quite important question since if I applied hex, rgb, or hsl would make it a nightmare for other people to change every single on, replace or god forbid to use !important to overwrite;

/* currentColor to the rescue */ 
.gg-icon-name {
   color: currentColor; 
   background-color: currentColor; 
   border: 0 solid currentColor;
   box-shadow: 0 0 0 currentColor;
Enter fullscreen mode Exit fullscreen mode

This way where ever you color the parent it will inherit that color and we are good to go.

This along color was something people would tweak for the icons, so my solution was to create a custom CSS variable and resize with transform

.gg-icon-name {
    transform: scale(var(--ggs),1);
/* 1 is for fallback reasons if some one is mad enough to use this on IE* /
Enter fullscreen mode Exit fullscreen mode

For me using em or other units wasn't feasible at the time and depend the icon sizing on the paragraph, wanted to have something to control it directly since the variable can be added on the parent, body or :root.

Disclaimer: this article when it was written I think it wasn't very clear how the sizing works so I added now a box on the directly how to resize.

Main page:
I did the page as simple as I could with focus to explicitly explain what this library is about, would show icons on random order each time page is refreshed.

App page:
Or web app if I may call it was built as a simple grid with options to select a single icon alla Google Fonts style read the markup or download the same icon with filters and a simple search.
BTW the sidebar and filter is hidden with CSS, it sets a cookie via CSS and on the next time you visit based on cookie style will be applied.

I highly recommend to check the source.

Color preview:
This feature wasn't a must but nice addition to just check on how they look with other colors plus it was like a customization proof and a why not moment.

Single icon page:
This was designed with as much information as possible, you would see the icon before coming to the page but here you would see all specs and lear on the right side preview how it was done and why not copy the style directly.

In future I will add on some of them videos how I built as tutorial for beginners.

Also on page are related to the icon section for a better experience.

For those who use react, vue or any other framework could take advantage plus the CDN availability.

API or json object, XML
This is not quite an API but somewhat since it is public, no token and just the data is provided as json and easy way to transfer data between apps, for React, Vue & Angular projects. is a php page not a real json file.

  header('Content-Type: application/json');
  $data = array();
  $i = 0;
  $cont = array();

  // icon loop

  echo json_encode($data);
Enter fullscreen mode Exit fullscreen mode

Same applies to "CSS" - and "XML" -

I was aware that I could not provide a high end server to host it so I had gone with these alternatives which come any way after you publish on NPM.



Enter fullscreen mode Exit fullscreen mode

Well they are CSS-only so it is possible to animate at the end of the day so check some examples:

Ok this is the most nuts thing on the project.
I came to this point with no JS keep in mind so now comes the time when you have to do it, as I have said to my first article here I used Crooked Stylesheet method where I set a cookie from PHP as content on css

Like this:

/* Track download: increment on a .log file */  
a:active::before { content: url(/action?=download-icon-name); }

/* Track selection: set a cookie */ 
#icon-name:selected~main .gg-icon-name::before { content: url(/action?=select-icon-name); }

/* Track sizing: set a cookie */
#size-xl:selected~main [for="size-xl"]::before { content: url(/action?=size-xl); } 
Enter fullscreen mode Exit fullscreen mode

Page views, json calls, xml calls, css calls are recorded on a log file when you call the url, single page example:

    $counter_name = $_SERVER["DOCUMENT_ROOT"] . "/one/log/" . $namer . ".log";
    if (!file_exists($counter_name)) {
        $f = fopen($counter_name, "w");
    $f = fopen($counter_name,"r");
    $counterVal = fread($f, filesize($counter_name));
    $f = fopen($counter_name, "w");
    fwrite($f, $counterVal);
Enter fullscreen mode Exit fullscreen mode

I did minify all content with a php function along gzip compression on htaccess:

function ob_html_compress($buf){
    return preg_replace(
        array('/<!--(.*)-->/Uis',"/[[:blank:]]+/", '/(\>)\s*(\<)/m'),
        array('',' ', '$1$2'),
Enter fullscreen mode Exit fullscreen mode

All I did when launching this project was to just stay active on the communities here at,, etc. That's it no boosted posts, no paid articles nothing.

Also this is on Product Hunt:

Again this article: shows clearly on how it was written the main tagline "The 🌎's first icon library designed by code." obviously that is removed now since I realized is not fair at all, thanks to Chris Coyer for bringing it up.

Thumbs up to Nicolas Gallagher - who did it similarly not quite the same 10 years ago.

I made on the end of each icon a automated description which would rotate depending on the properties used and some fancy words for the sake of SEO.

For who is this:
For those who love CSS for those who care to the bit for the page speed and want to have something out of ordinary.

What I was looking for:
No views, no likes, no recognition no nothing just needed to put it out there and be me. But I got way more.


  • Is this perfect? Hell NO, some might say stupid. I welcome suggestions.
  • I learned a ton of things from this project.
  • 300+ Stars -
  • Feedback from the man, the one & only Cole Bemis - "The design and execution look stellar πŸ’―"
  • 100+ Upvotes on Product Hunt
  • A ton of shares on Twitter
  • and much more that I can't list here.

Reason why I said this is personal was that it really is part of a journey

At the end of the day this is just another icon set in CSS not the first for sure, not the best but is part of me and something that made me write 17,000+ lines CSS like it was nothing, all manually.

If you like please consider becoming a Github sponsor

Peace ✌️

Top comments (21)

adam_cyclones profile image
Adam Crockett πŸŒ€ • Edited

Normally I just don't get CSS icons, but when you present it like this, I think twice, that is the kind of reaction you could hope for on repeat. Congratulations on a job well done!

astrit profile image

Thank you πŸ™

adam_cyclones profile image
Adam Crockett πŸŒ€

I'm actually building a language that could make use of this, bookmarked.

Thread Thread
astrit profile image

Wow, that is amazing πŸ’ͺπŸ™

mindplay profile image
Rasmus Schultz

Don't get me wrong, this project is insanely cool! ✌️

The only deterrent for me, is what if I need an icon that doesn't exist?

Normally, I would be able to cobble something together from exist SVGs pretty quick, but this? Not everyone has the skills and patience to do what you do with CSS. It's pretty amazing. But therefore also a bit scary πŸ˜‰

cyntss profile image
Info Comment hidden by post author - thread only accessible via permalink
Cynthia πŸ³οΈβ€πŸŒˆ Sanchez

Hi Rasmus,

We've made a fully open-source icon set and we're backed by a big community. Our icons are available in several formats: SVG, PNG, Font with ligatures, NPM, Ruby Gem.

I think CSS icons are amazing, but I suggest that you take a look at ours since they may fit your use case better in this case, plus, you can just get in touch with us and we will add the new icon you need in no time!

astrit profile image

I agree with you is scary indeed, won't be able to cover very much, but I could up to 500 and 90 on the making. If you have something specific let me know and I will add to the list if doable with current resources.

Thing is I do not except people to include this in a corporate project , but portfolios and smaller projects.

Thank for the feedback any ways.

kawhyte profile image
Kenny Whyte

Great job! It's a really good website. I will have to bookmark and use it in one of my projects.

astrit profile image

Thanks, let me know if you do will share it.

kawhyte profile image
Kenny Whyte

Will do.

gktim profile image

Very well done. Looks stunning.
It’s simply awesome what you can do with css these days. Keep up the good work.

And the code is a very good inspiration. Learned a few things while looking through it.

Will use it in my current free time project. An Anime Watch List written in Ionic with a GraphQL API :)

adisreyaj profile image
Adithya Sreyaj

Looks awesome🀩

peterklein profile image
Peter Klein

Very cool. I will give it a try and use it in my current Project. Thanks Mate

jnario profile image
Jose Nario

Not only truly impressive, but inspirational in its execution. Congratulations on your success.

Would love to see more of this hand-crafted attention applied to what has become an internet of bloat.

bedwards05 profile image
Brandon Edwards

Normally I've just used fontawesome. But these are just amazing. Definitely being used πŸ™‚

astrit profile image

I am very grateful, thank you.

gvsakhil profile image
G.V.S Akhil

wow its very inspiring. I should also give a try :)

seanmclem profile image
Seanmclem • Edited

I would love more filetype icons. For programming languages..

astrit profile image

I am working on 90+ icons that will be launched on next version, so please let me know which languages you think would be good to cover.

How ever if you have a sample in mind let me know they need to be as minimal as possible.

luccabiagi profile image
Lucca Biagi

Hey Man, Congratulations!!! I really liked this.

johnsonberisha profile image

nice, amazing.

Some comments have been hidden by the post's author - find out more