Detta galleri av rena CSS-ikoner är vad alla Frontend-utvecklare vill ha

Adobe-designer Wenting Zhang skapade en intressant webbapp för genererar rena CSS-ikoner. Det heter helt enkelt “CSS-ikonen” och det kan vara en av de coolaste ikongeneratorer för frontendutvecklare.

Detta projekt är helt gratis och öppet på GitHub så du kan ladda ner och röra med någon av koderna.

Dessa ikoner har inga CSS-beroenden eller behöver några speciella webbläsarfunktioner. Vid första anblicken kan det verka som ikonerna är byggda på SVG men men de är faktiskt bara divs.

Genom CSS magi kan du bygga anpassade radikoner för gemensamma gränssnittselement till exempel hamburgarens meny, trepunktsikonen eller utskriftsikonen (bland många andra).

Du kan välja mellan tunna linje ikoner eller mörka fyllda ikoner. De använder båda liknande CSS-egenskaper och du kan även se vad de är genom att klicka på en ikon i listan. Du får se en glidande sidofält med HTML och CSS-koden tillsammans med ikonen förstorad.

Om du tittar mot det övre högra hörnet av kodfälten ser du en liten kopiaikon. Klicka på det för att Kopiera automatiskt koden till ditt urklipp. Åh, och den kopia ikonen? Också byggd med Wentings rena CSS-kod.

Till ändra färg av någon ikon, bara hitta Färg fast egendom i huvudikonen klass. Uppdaterar den där Färg fast egendom kommer att förändra allt annat också.

Eftersom dessa ikoner är ganska enkelt, de kommer förmodligen inte att fungera för varje webbplats. Men det här är en coolt alternativ till bilder eller ikon typsnitt och det är det helt gratis.

Kolla in CSS Icon hemsida till se fler exempel och till kopiera / redigera källan. Du kan också testa varje ikon separat i CodePen om du vill leksak runt med källan i din webbläsare.