Remix Icon - Open source icon library
I love how easy it is to use these icons: you can copy and paste the SVG or even get it encoded as a data URL.
Link tags: icons
48
11ty/api-indieweb-avatar: Return an optimized avatar image from a domain name input.
Here’s a nifty little service from Zach: pass in a URL and it returns an image of the site’s icon.
Think of it as the indie web alternative to showing Twitter avatars.
supercookie • workwise
Favicons are snitches.
Works offline
How do we tell our visitors our sites work offline? How do we tell our visitors that they don’t need an app because it’s no more capable than the URL they’re on right now?
Remy expands on his call for ideas on branding websites that work offline with a universal symbol, along the lines of what we had with RSS.
What I’d personally like to see as an outcome: some simple iconography that I can use on my own site and other projects that can offer ambient badging to reassure my visitor that the URL they’re visiting will work offline.
Round 1: post your ideas / designs · Issue #1 · works-offline/logo
This is an interesting push by Remy to try to figure out a way we can collectively indicate to users that a site works offline.
Well, seeing as browsers have completely dropped the ball on any kind of ambient badging, it’s fair enough that we take matters into our own hands.
Lea Verou on Twitter
Now that all modern browsers support SVG favicons, here’s how to turn any emoji into a favicon.svg:
<svg xmlns="http://w3.org/2000/svg" viewBox="0 0 100 100"> <text y=".9em" font-size="90"> 💩 </text> </svg>Useful for quick apps when you can’t be bothered to design a favicon!
Less… Is More? Apple’s Inconsistent Ellipsis Icons Inspire User Confusion - TidBITS
The ellipsis is the new hamburger.
It’s disappointing that Apple, supposedly a leader in interface design, has resorted to such uninspiring, and I’ll dare say, lazy design in its icons. I don’t claim to be a usability expert, but it seems to me that icons should represent a clear intention, followed by a consistent action.
PWA asset generator based on Puppeteer.
Automatically generates icons and splash screens based on Web App Manifest specs and Apple Human Interface Guidelines. Updates manifest.json and index.html files with the generated images.
A handy command line tool. Though be aware that it will generate the shit-ton of link elements for splash screens that Apple demands you provide for a multitude of different screen sizes.
An oral history of the hamburger icon (from the people who were there)
From the days of Xerox PARC:
In your garage organization, there’s always a bucket for miscellaneous. You’ve got nuts and bolts and screws and nails, and then, stuff, miscellaneous stuff. That’s kind of what the hamburger menu button was.
Same as it ever was.
Accessible Icon Buttons — Sara Soueidan – Freelance-Front-End UI/UX Developer
Sara runs through the many ways of providing an accessible name to an icon button, backed up with Scott’s testing.
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.
Making single color SVG icons work in dark mode
Another good reason to use the currentColor value in SVGs.
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.
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.