Making a lightweight web pages has become the necessity these days. Everybody knows that Google is giving more importance to the lightweight and mobile friendly websites. With the introduction of AMP (Accelerated Mobile Pages) it has become more evident that speed is the key factor for top search engine rankings.
Every web designer tries to write neat and clean code to make HTML less cluttered. Less use of javascript and jquery has been the necessity to reduce the server requests. WIth the evolution of CSS3, the frontend animation and special effects have become easy for web designers who do not have enough command over handling javascript. CSS has also come a long way ahead giving the designer more flexibility and power with the introduction of some lightweight animations and special effects that eliminates the need of javascript. To reduce the http requests the use of web based svg fonts has been encouraged. This has made the flat icons appear sharp, neat and clean as well as scalable on all devices.
But what if you dont want to use the SVG based icons and still want to get the clean icons with the help of pure CSS? Yes, its very much possible now! Have you heard about CSS Icons?
Introducing CSS Icons to Code Lightweight Web Pages!
Adobe designer Wenting Zhang has created a library of such nice and lightweight icons made purely using CSS. This collection contains icons those are made using DIVs and not SVG. This awesome resource can be found at CSS Icon.
These various complex shapes are made using css classes annd you can easily embed them in your web pages. Take some time to explore this amazing library and try to utilise these incredibly lightweight icons in your web projects.
Please share your feedback on how did you found these CSS icons. Your opinions and experience will help other fellow web designers.
Cheers!
Certainly this looks interesting. I will try it for my web pages. Thanks for sharing!