CSS Icon: Pictograms in Pure CSS, Optionally Animated

The freely usable web app "CSS Icon" does not only deliver pictograms in pure CSS for free, but it also allows you to define animated transitions between any two of the package's symbols.

Adobe Designer With Love For Detail

Wenting Zhang works as a UX designer for Adobe's Typekit. Thus, it is no surprise that he has a thing for typography and icon design. To facilitate this passion, aside from his primary occupation, he runs tons of side projects in this field. The project "Type Detail" is one of them. Here, he gives a meticulous explanation regarding the characteristics of different popular, and less popular fonts. Typography fans should definitely take a look at the project. [caption id="attachment_82319" align="alignnone" width="640"] Type Detail Dissects Fonts. (Screenshot: Noupe)[/caption] His project underline.js seems even nerdier, as it's all about finding the perfect underlining. As you can see, this man is serious when it comes to details.

CSS Icon Animate: Pure CSS Icons, With Morphing Animation Options

His project "CSS Icon" is also useful for those designers that are not that much in love with details. Here, he originally stored 512 pictograms, made exclusively with CSS, without any dependencies, making them usable on their own, if necessary. The evolution of the project doesn't provide the full extent of symbols, but it has become a lot more attractive. [caption id="attachment_82318" align="alignnone" width="640"] CSS Icon: Landing Page. (Screenshot: Noupe)[/caption]

CSS Icon: Code Snippets to Copy and Paste

In the current version of "CSS Icon," you'll find about 200 symbols. Zhang promises to add more on a regular basis. The web app comes with to functionalities. Clicking a single icon opens a detail window on the right side of the overview, allowing you to copy and paste the entire required source code for this icon. [caption id="attachment_82316" align="alignnone" width="640"] On the Right, A Selected Icon Appears in the Detail View With its Entire Code Snippet. (Screenshot: Noupe)[/caption] To toy around with the configuration a bit, there's also the option to switch over to Codepen with the snippets, and experiment in the browser on there.

CSS Icon Animate: Morphing Light Between Two Icons

Access the second functionality by clicking the small word "animate" in the top left of the browser window. Now, you have the option to select two pictograms. The first one turns into symbol A; the second one becomes symbol B. Now, the detail window we already know opens, including the required code snippets. However, this time, you won't only find HTML and CSS, but JavaScript as well. [caption id="attachment_82317" align="alignnone" width="640"] Choose Two Icons; the Animation is Created Automatically. (Screenshot: Noupe)[/caption] Using the option "Animate," the web app creates animated transitions between the two selected icons. In my example, the left-pointing arrow is morphed into a reight-pointing one. This generally works with all symbols, but, as you can imagine, doesn't look nearly as good and convincing for all of them. For example, if you let the icon "Nine o'Clock" turn into "Three o'Clock," the small watch hand is only pushed from left to right. Of course, usually, nobody would animate it like this. In contrast to that, the animation from the icon "Full Battery" to "Empty Battery" looks just like you would expect. In any case, "CSS Icon" is an enrichment for your design toolbox.

CSS Icons: Freely Usable Under CC0

Zhang provides his project under the license Creative Commons Zero, which is roughly equivalent to Public Domain, meaning it is completely free for anyone and any purpose. Thus, you can use the icons without any worries, even for commercial purposes and, more importantly, alter them however you like. The project is available on Github as open source. To only use it, a visit to the project site CSS Icons does the trick.