Tags: icon

68

sparkline

The ineffectiveness of lonely icons | Matt Wilcox, Web Developer & Tinkerer

When in doubt, label your icons.

When not in doubt, you probably should be.

The Many Ways to Change an SVG Fill on Hover (and When to Use Them) | CSS-Tricks

This article by Cassie is so, so good!

First off, there’s the actual practical content on how to change the hover styles of SVGs that aren’t embedded. Then there’s the really clear walkthrough she give, making some quite complex topics very understandable. Finally, there’s the fact that she made tool to illustrate the point!

Best of all, I get to work with the super-smart developer who did all this.

Building a Progressively-Enhanced Site | Jim Nielsen’s Blog

This is an excellent case study!

The technical details are there if you want them, but far more important is consideration that went into every interaction. Every technical decision has a well thought out justification.

Making single color SVG icons work in dark mode

Another good reason to use the currentColor value in SVGs.

Letterform Archive – From the Collection: Blissymbolics

The fascinating story of Charles K. Bliss and his symbolic language:

The writing system – originally named World Writing in 1942, then Semantography in 1947, and finally Blissymoblics in the 1960s – contains several hundred basic geometric symbols (“Bliss-characters”) that can be combined in different ways to represent more complex concepts (“Bliss-words”). For example, the Bliss-characters for “house” and “medical” are combined to form the Bliss-word for “hospital” or “clinic”. The modular structure invites comparison to the German language; the German word for “hospital ” – “krankenhaus” – translates directly to “sick house”.

Evolving the Firefox Brand - Mozilla Open Design

I’m impressed by Mozilla’s commitment to designing in the open—one of the hardest parts of any kind of brand work is getting agreement, and this process must make that even more difficult.

I have to say, I quite like both options on display here.

A Directory of design and front-end resources

A collection of collections.

This site is dedicated to compiling and sharing useful resources for Designers and UI Developers.

The Woman Who Gave the Macintosh a Smile | The New Yorker

A profile of Susan Kare, icon designer extraordinaire.

I loved the puzzle-like nature of working in sixteen-by-sixteen and thirty-two-by-thirty-two pixel icon grids, and the marriage of craft and metaphor.

The first visual identity for UK Parliament

Some lovely branding work for the UK Parliament, presented very nicely.

Finding the Exhaust Ports | Jon Gold’s blog

Perhaps when Bush prophesied lightning-quick knowledge retrieval, he didn’t intend for that knowledge to be footnoted with Outbrain adverts. Licklider’s man-computer symbiosis would have been frustrated had it been crop-dusted with notifications. Ted Nelson imagined many wonderfully weird futures for the personal computer, but I don’t think gamifying meditation apps was one of them.

edent/SuperTinyIcons: Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos

These are lovely little SVGs of website logos that are yours for the taking. And if you want to contribute an icon to the collection, go for it …as long as it’s less than 1024 bytes (most of these are waaay less).

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.

Your Social Media Fingerprint

Clever! By exploiting the redirect pattern that most social networks use for logging in, and assuming that site’s favicon isn’t stored in a CDN, it’s possible to figure out whether someone is logged into that site.

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.