Tags: icons

27

sparkline

History of Icons – a visual brief on icon history by FUTURAMO

An illustrated history of digital iconography.

Free Icon Design Guide - Icon Utopia

Here you go: a free book on icon design in three parts, delivered via email.

Hiding inline SVG icons from screen readers | 456 Berea Street

A good reminder from Roger on how to hide images from an SVG sprite from assistive technology (use aria-hidden) and how to expose them (use title elements within the sprite).

Inline SVG spriting and currentColor | Charlotte Jackson, Front-end developer

The currentColor value in CSS comes in very handy when you’ve got an SVG sprite and you want icons to inherit their colour from the surrounding text.

A Semiotic Approach to Designing Interfaces // Speaker Deck

This looks like a terrific presentation from Alla on iconography, semiotics, and communication.

A Complete Guide to SVG Fallbacks | CSS-Tricks

An up-to-date round-up of the various techniques available when you want to provide a fallback for SVG.

Thomas Byttebier - The best icon is a text label

A look at the risks of relying on a purely graphical icon for interface actions. When in doubt, label it.

Origins of Common UI Symbols

A lovely little tour of eleven ubiquitous icons.

Unify – Unicode support on browsers and devices

Some excellent research for web developers: find out which unicode characters have the widest support—release useful for choosing icons.

A List Apart Issue № 371

This issue of A List Apart is a great double-whammy. Lara Swanson has a ton of practical tips for front-end performance enhancements, and Brian dives deep into making your own icon fonts.

Asset Fonts

The slides from Josh’s super-quickfire presentation at the Responsive Day Out.

Sparkicons and the humble hyperlink by Mark Boulton

I really like Mark’s idea of standardised “sparkicons” …for a while there, reading this, I was worried he was going to propose something like Snap Preview. shudder

❍ IcoMoon

This is a great free service for generating small subsetted icon fonts. Launch the app and have a play around — you can choose from the icons provided or you can import your own SVG shapes.

Nice touch: you can get the resulting font (mapped to your choice of unicode characters) base-64 encoded for your stylesheet.

JoshEmerson.co.uk · Blog · Using Fonts for Resolution Independent Assets

Josh gives a blow-by-blow account of he created a custom icon font for an upcoming redesign of the Clearleft website: completely scalable and resolution-independent.

I truly believe it won’t be all that long until bitmap image formats will be the exception rather than the rule on the web.

Fontello - easy iconic fonts composer

A nifty service for creating a custom font with just the icons you need.

Symbolset

It’s really good to see more providers of icon font sets. These look very nicely designed indeed.

We need a standard show navigation icon for responsive web design | Stuff & Nonsense

Andy documents the kinds of symbols being used to represent revealable navigation on mobile.

Pictos

In an interesting new twist, Pictos now allows you to put together a custom subset of their icons as a font that can be served from their server just like any other webfont service.

The Icon Handbook | The Hickensian | Hicksdesign

Jon gives us a run-through on what to expect from his new book. I’ve had a sneak peek and it looks amazing—I can’t wait to get my hands on a copy.

Emoji Dick

Melville’s masterpiece, translated into Japanese emoticons. All 6438 sentences. Made possible with Kickstarter and Amazon’s Mechanical Turk.