August 10, 2021 Smashing Newsletter: Issue #313
This newsletter issue was sent out to 178,696 subscribers on Tuesday, August 10, 2021.
Editorial
I remember November 2007 just like it was yesterday. A late evening, back at my parents’ kitchen, I was working on a freelance project for a small local publishing house from Germany. The company was small with wonderful and passionate people caring about every page of every book that they’d release.
In fact, they were publishing beautiful poetry and incredible fictional books, but as they had just a few dozens of books, they didn’t really have much budget. I remember spending almost the entire night looking for royalty-free icons and fonts that I could use on the site. The community saved me that day, as I managed to deliver on a tough schedule.
Anivers, a free typeface, designed by Jos Buivenga to celebrate the anniversary of Smashing Magazine.
The result of that night was an article featuring 40 excellent free fonts for professional design, with incredible work by Manfred Klein, Yanone and Jos Buivenga who later went on to design Museo and Anivers, designed to celebrate the anniversary of Smashing Magazine.
Fast forward 15 years, and here we are. With an incredible open source community releasing wonderful things for everybody to use. In this newsletter, we celebrate some of the wonderful open-source icons, designed by the community. All of these icons have slightly different licenses (so please check them), but they are free to use in private and commercial work. But of course, the credit is much appreciated.
If you’ve released something recently, please do let us know on Twitter and we’ll be happy to spread the word. Or perhaps even give you the Smashing platform to present your work. A huge round of applause for your passion and your kindness — you make the community what it really is.
— Vitaly (@smashingmag)
1. Open-Source Flag Icons
Icons are a fantastic way to help convey meaning and add some character to a design. An icon set that comes in particularly handy in e-commerce projects is Flagpack. It includes more than 250 open-source flag icons — from Afghanistan to Zimbabwe.
The Flagpack icons are optimized for small sizes which makes them a perfect fit for all your UI needs. They come with several predefined styles or you can customize the look to your liking, if you prefer. Two versions available: Designers can use the Flagpack in Figma and Sketch, developers can install it directly within their code project (React, Vue, and Svelte are supported). Nice! (cm)
2. Boring Avatars And Absurd Illustrations
Do you need some SVG-based avatars for your project? Boring Avatars has got you covered. But don’t let the name fool you: The avatars are anything but boring.
The tiny React library generates custom, SVG-based, round avatars from any username and color palette. Six different styles are available, abstract patterns just like friendly smileys. You can either choose a random color palette or create your own from scratch to tailor the avatars to your design. A friendly little detail.
Another fantastic resource with a name that might leave you puzzled for a moment are the Absurd Illustrations that Diana Valeanu created. Her series of illustrations combines absurdity and a deep sense of childishness and naivety to take every user on an individual journey through their imagination. A beautiful celebration of the imperfect that we’re sometimes missing in this digital era, absurdity that, well, makes sense. (cm)
3. Open-Source Health Icons
When people from all across the globe share the same vision and work together on one common goal, great things can happen. Things like the Health Icons project. The project is a volunteer effort to create a ‘global good’ for health projects all over the world. It includes more than 870 public-domain icons that can be used for free in any type of project.
Blood types, body parts and organs, diagnostics, medications, medical devices, vehicles, and people — the set covers everything health-related you could possibly ask for. Each icon comes in three different styles (outlined, filled, negative) and is available in SVG and PNG formats. There’s also a Figma plugin that makes it easy to find and include icons in your design. (cm)
4. Upcoming Front-End & UX Workshops
We regularly run online workshops around design and UX: be it around accessibility, forms, navigation, or landing pages. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.
For example, we have Rémi Parmentier’s workshop on building modern HTML emails. We also have plenty of other topics to choose from. As always, here’s an overview of our upcoming front-end & design workshops.
- Designing The Perfect Web Forms UX
with Vitaly Friedman. August 18–20. - Designing The Perfect Navigation UX
with Vitaly Friedman. August 31 – September 1. - Architecting Design Systems Workflow
with Nathan Curtis. September 2–10. - Vue.js: The Practical Guide Dev
with Natalia Tepluhina. September 14-28. - Jump to all online workshops →
5. Open-Source Life Science Icons
Vaccines, viruses, genetics, physiology, bioinformatics. These are just some of the topics that the fascinating Bioicons set that Simon Duerr created covers. In total, you’ll find 1700 open-source life science illustrations in the set — easily searchable and filterable, of course.
The site supports two modes: you can copy the icons as SVG into the clipboard and paste them directly into Illustrator to change colors or delete parts. Alternatively, you can download the SVG to use it on the web, in graphics software, and even Microsoft Office products. An encyclopedia-like set — if you don’t find what you’re looking for there, you probably won’t find it anywhere. (cm)
6. Weather-Themed Icons And CSS
222 weather-themed icons, complete with 28 moon phases, the Beaufort wind force scale, and maritime wind warnings — that’s what you’ll get in the free Weather Icons set that Erik Flowers created.
You can copy and paste the icons into your favorite design app right from the site. CSS makes it easy to style and customize the icons just like you would do with text, so feel free to change their color, add shadows, or scale, rotate, or flip them to make the icons fit into your design nicely. Popular weather API classes are also supported, by the way, in case you should need it. (cm)
7. Flat Illustrations With Character
No more boring business websites! The Flat Illustrations set that Getillustrations.com offers is bound to add some personality to your project. It features 100 compositions for businesses, online stores, and marketing. Characters in various poses and scenes, colorful, relaxed, and friendly.
The free version features PNG versions of the illustrations (link attribution is required), the paid version comes with customizable vectors for Figma, Sketch, Ai, SVG, AdobeXD, and Iconjar. Good vibes guaranteed. (cm)
8. Hand-Curated Mesh Gradients
Beautiful gradients? Yes, please! If you don’t have the time to create them yourself or are looking for some fresh inspiration, Gene Maryushenko’s hand-curated collection of mesh gradients is sure to have you covered.
Unhappy with what he found online, Gene created 100 gradients that will make your site stand out, without being loud. The gradients can be downloaded for free as JPEGs. CSS and SVG will be added later. Enjoy! (cm)
9. The Visual Glory Of Blank Tapes
Last but not least, not a real freebie, but inspiration and eye candy at its finest. Do you remember blank VHS tapes? Antony Terence dedicated an article to them in which he highlights why they remain a masterclass in visual design still today, with their “complicated relationship between typography and color” which “makes them all the more intriguing”, as he writes.
If you’re for up for more inspiration from the past, well, how about empty music tapes? The Japanese blog Tapefan is entirely dedicated to the beauty of the old Sonys, TDKs, Fujis, Maxells, and their fellows, that used to treasure people’s favorite music before modern technologies took their place. An inspiring trip back in time. (cm)
That’s All, Folks!
Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!
This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.