Tags: icons

30

sparkline

Fidget Spinners — Real Life

A look at our relationship with waiting, and how that is manifested in the loading icons in our interfaces.

For me, in my moments of boredom, as I turn to my phone and refresh my social media feed, I imagine that what’s on the other side of the buffering icon might be the content that will rid me of boredom and produce a satisfying social connection. The buffering icon here represents my hopes for the many ways that my social media feeds can satisfy my longings at any given moment. They rarely do, though I believe that we are half in love with the buffering icon here because it represents the promise of intimacy or excitement across the distances that separate us.

microicon

These icons-as-a-service could be really useful for making quick’n’dirty HTML prototypes.

PWABuilder

A useful tool to help you generate a manifest file, icons, and a service worker for your progressive web appsite.

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.