Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

September 05 2012


Sosa – 121 Icons in One Free Webfont


Ed Merritt, Designer from Bournemouth, took a pragmatic approach. Sosa is a tailored icon font, which carries all the symbols he needed most frequently in his daily development work. As Ed is a designer, just as probably most of you are, it doesn’t seem far-fetched to expect, what Ed needs most might be identical to what you need most, too. Since Sosa is free for both personal and commercial projects, why not take a closer look?

Sosa: Icon font without a specific use case

If you know common icon sets, Sosa might surprise you. Despite the relatively small amount of just 120 symbols, the set is able to cover a variety of potential use cases. You’ll find device-icons as well as brand-icons, icons for user interfaces and more. Even weather-symbols and currency-icons are provided.

With only 95k, the download is rather lean and contains the icons in the formats TTF, EOT, WOFF and SVG. Sosa has to be integrated in your own website via @font-face. Merritt didn’t deliver the necessary related files, which shouldn’t impose a major problem to the average designer. Sosa’s project website has an overview of which key on your keyboard produces which icon.

Sosa: Contents of the downloaded archive

Even though Sosa is offered free of charge, its developer is always happy to accept donations via PayPal as to keep up font-development. There are no restrictions regarding how to use the icon font. Of course you’re not allowed to offer the set as a download from third-party domains or imply that you’re its developer. Backlinks are always appreciated, but not presupposed for the use of the product.

September 04 2012


Typicons: Free Icon Font with 88 Symbols


Stephen Hutchings from Australia undoubtedly brought forward an intelligent new term when he called his icon font Typicons. Nevertheless, Typicons are just that, an icon font, but a good one with 88 pieces. Typicons are especially useful in app-design as most of the symbols relate to user interface aspects typically needed for controlling functionality. I guess, Hutchings had development for mobile clients in mind when he created the symbols.

Typicons: only a few examples

Typicons: a grid of 24 square pixel, but scalable to any size

Even though they have their downsides, web design without icons is unthinkable these days. Several methods of icon usage have been established. At first, icons were implemented via separate files, which led to separate http-requests for every single file. For reasons of performance optimization, modern websites should try to invoke only as many requests as absolutely unavoidable. Separate icon files have proven not to be the right method. Next came and still stay the so-called sprites. Here we have only one file which includes all the icons needed. To display a certain symbol, we use CSS to locate only a part of the whole file and show this sprite to the user. This method is established, but has its downsides too. If you’d want to serve different devices and/or different resolutions, you’d have to provide different sprite-files, which certainly means a higher effort in producing them. These would have to be targeted using media queries, which you’ll not always want to use.

Freely scalable icon fonts are the cure to these pains. You don’t need to worry about their resolution even on the new iPad, the new MacBook Pro or other HiDPI-screens. That’s where Typicons come in.

The download weighs in at 1,6 MB and contains the necessary font files (EOT, SVG, TTF, WOFF) as well as the corresponding CSS for easy implementation into your own website. On top of this, Hutchings provides you with vector files in the formats of Adobe Illustrator and EPS (encapsulated Postscript), thus leaving nothing to be desired. Experienced designers can take and modify the icon set to open up new use cases.

Typicons are shared under a Creative Commons Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) license. That means they can be used free of charge for personal as well as commercial projects. You must attribute the work in the projects you use it, typically by providing a backlink. If you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to the one, Hutchings shares it under. Fair enough…

Related links:

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...