January 17, 2023 Smashing Newsletter: Issue #388
This newsletter issue was sent out to 215,253 subscribers on Tuesday, January 17, 2023.
Editorial
Some days will always stay with you throughout your entire life. For me, it was a random Saturday evening in late April 1997. This was the day when, as a curious 12-year-old kid, I discovered the web for the very first time. I landed on Altavista, quickly followed by Yahoo!.
After that day, I would spend my weekends going through absolutely random websites, from DIY repair hobbyists to amateuer poetry pages. It felt almost magical, and I cherished every single moment, day and night.
One thing that surprised me the most was that people around the world were taking the time to publish all these things on the web for everybody to use. For free for everyone to learn and get inspired from. And even better, I could view-source the code on each page and copy and refine and play with it — and so, of course, I did.
It’s only later when I truly understood and learned the power of open source. And throughout all these years, I couldn’t be more grateful for the incredible contributions of the community around the world, sharing their work for free for everyone to use and learn from. And in this newsletter, we celebrate some of the incredible open-source resources for designers — we hope you’ll find them useful.
In Smashing news, we have SmashingConf Front-End 2023 coming up this May — with cutting-edge JavaScript, CSS, accessibility and web performance (and maybe Altavista). Get your early-bird ticket (only 50 tickets!). First speakers have been announced and we will be streaming live from the event.
Later in September, we’ll be running SmashingConf Freiburg 2023 where we shine the spotlight on design systems, Figma, front-end, accessibility and type. We’d love to see you there!
For now though: stay smashing, everyone!
— Vitaly (vitalyf)
1. 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 resource for health projects worldwide. It includes more than 1,100 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 ask for. Each icon comes in two styles (outlined and filled) and is available in SVG and PNG formats. There’s also a Figma plugin that makes it even easier to find and include the icons in your next design. (cm)
2. Super-Versatile Open-Source Icons
If you’re looking for an open-source icon library that gets every job done, Atlas Icons has got you covered. The library is made to be a multi-purpose companion for amazing designs and features more than 2,300 icons.
Covering everything from basic UI icons to marketing, virtual reality, hand gestures, furniture, seasonal icons, transport, and much more, the icons are available in SVG format, as a web font, and as ready-to-use packages for Figma, React, Vue, and Flutter. You can customize the stroke weight, adjust the size, and recolor the icons to your liking. Atlas Icons are available under an MIT license. (cm)
3. An Open-Source Icon Design System
Glyphs is on a mission to become “the mightiest icons on the web”. To achieve this, it provides a truly open-source icon design system that leverages Figma’s REST API and Plugin API to improve and simplify management of large icon sets.
At the heart of the project is a smart Figma icon set with more than 6,000 easily editable assets, ranging from shapes and arrows to UI elements and topics like humans, nature, flags, and brand logos. Each icon comes in different variants, and color, size, and stroke width can be customized to your liking.
To enable easy integration with other design and development projects, Glyphs features a command line utility that makes it possible to export icons from a Figma file to any environment. It helps generate web components based on exported SVG assets, making it a matter of minutes to create custom icon sets for the web. (cm)
4. A Smart And Honest Typeface
Onest is a typeface with a mission. It’s designed for Moldova, a country with six spoken languages and two different writing systems to make communication between the state and the citizen honest and understandable. But no matter where in the world you might be located, the typeface has some smart features that make it interesting for everyone.
A hybrid of geometric and humanistic grotesque, Onest combines capaciousness and legibility to save space without losing readability. With different variations for the same glyphs, Onest can adapt to the text and give the best possible layout for each element in any context — or as its makers put it: “Just the way we use intonation to convey extra meaning to our words, Onest does it with different lettering options.” The typeface comes in seven weights with 315 characters each and is available in TTF and WOFF formats. You can use it for free in personal and commercial projects. (cm)
5. Upcoming Online Workshops
That’s right! We run online workshops on front-end and design, be it accessibility, performance, or design patterns. 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.
As always, here’s a quick overview:
- Designing For Complex UI Masterclass UX
with Vitaly Friedman. Jan 19 – Feb 2 (starting this week!) - New Front-End Adventures, 2023 Edition DEV
with Vitaly Friedman. Feb 8–22 - Universal Principles of Typography Masterclass UX
with Elliot Jay Stocks. Mar 2–16 - Interface Design Patterns UX Training UX
with Vitaly Friedman. Mar 10 – Apr 7 - Figma Auto Layout Masterclass UX
with Christine Vallaure. Mar 27 - Smart Interface Design Patterns Video Course UX
9h-video + UX training on interface design with Vitaly Friedman - Jump to all workshops →
6. GitHub’s Variable Fonts
Mona Sans and Hubot Sans are the typefaces that the GitHub team uses across the GitHub.com web pages, and now you can use them, too. Both typefaces have been open-sourced as extremely flexible variable fonts.
The GitHub team describes Mona Sans as the star of the show: a strong and versatile typeface inspired by industrial-era grotesques. Its variable width and weight makes it expressive across product, web, and print.
Hubot Sans is Mona’s robotic sidekick designed to be even more expressive. It has more geometric accents than Mona Sans, which lend it a distinctive, technical feel that is perfect for headers and pull quotes.
Both typefaces are available as static and as variable fonts. Each comes with three variable axes: weight (ultra-thin to extra heavy), width (condensed to expanded), and slant (regular to italics). Combining these axes freely gives you infinite creative possibilities. (cm)
7. Doodle And Animated Icons
How about some hand-drawn icons? The Doodle Icons that Khushmeen Sidhu created are bound to add a friendly, playful touch to any project. The set includes more than 400 icons in more than 15 categories that you can use for free in your next project, whether it’s personal or commercial. The icons are available in PNG, SVG, and Figma formats.
Khushmeen also designed a beautiful set of icons that shine with some delightful animated effects: Unicorn Icons. There are no unicorns involved, but useful UI symbols and a few nice little surprises. Each icon comes in a duotone and a monotone version, and you can customize the color, stroke width, and background with just a few clicks. The Unicorn Icons are available for download as JSON and SVG and can be used in personal and commercial projects (but please remember to give credit). (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.