Categories: Web Designing

Incredible CSS Based Icons for Lightweight Web Pages!

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.


This post was last modified on August 25, 2017 6:44 am

View Comments


Recent Posts

5 Best Ecommerce Tools Every Merchant Needs to Know!

The world is going online. With the new infrastructural developments taking place globally, more and more businesses are opting to… Read More

November 21, 2018 8:48 pm

Google Ads Brings Merchant Promotions to Shopping Actions by @MattGSouthern

Google Ads is bringing its Merchant Promotions program to Shopping Actions for retailers. This integration allows online retailers to add… Read More

November 21, 2018 4:48 pm

Popular AMP for WordPress Plugin Patches Critical Security Flaw by @MattGSouthern

The top AMP plugin for WordPress, AMP for WP, has released a released a patch for a critical security vulnerability.… Read More

November 21, 2018 12:39 pm

How SEO & PPC Keyword Research Can Work Together by @TaylorDanRW

A well-orchestrated PPC campaign can benefit a good SEO campaign, as Sergey Grybniak explores in How to Combine SEO &… Read More

November 21, 2018 8:38 am

3 Social Media Tools to Jumpstart Your Influencer Marketing

Social Media Marketing Industry Report In our 10th annual social media study (44 pages, 70+ charts) of 5700+ marketers, you'll… Read More

November 21, 2018 6:28 am

Digital Extortion: Don’t Let Your Data Be Held Hostage by @tonynwright

Recently, our firm took over the digital marketing efforts for a small company. Their previous digital marketing efforts were led… Read More

November 20, 2018 8:18 pm