Smashing Magazine - #388: Open-Source Icons and Fonts

With open-source health and business icons, doodles and open-source fonts, free for personal and commercial use. Issue #388 Jan 17, 2023 View in the browser 💨

Smashing Newsletter

Buenas tardes Smashing Friends,

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!.

Altavista
Do you remember Altavista? A search engine from the past.

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.

SmashingConf Front-End and SmashingConf Freiburg 2023

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.

Health Icons

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.

Atlas 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.

Glyphs

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)


From our sponsor

Code Documentation Doesn’t Have To Be A Pain

Swimm
Most devs aren’t a fan of documenting code, and it’s most probably because they’re using tools that weren’t entirely built for them. Swimm helps you create internal documentation that is discoverable in your IDE & integrated with code itself, so that docs are always up to date.


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.

Onest

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.

Smashing Online Events
With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

As always, here’s a quick overview:


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.

Mona Sans and Hubot Sans

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)


From our sponsor

Northwestern’s Online MS in Information Design and Strategy

Northwestern’s Online MS in Information Design and Strategy
Prepare for a range of dynamic communication roles and build the skills needed to lead communication strategy, translate complex data, and drive user interactions. Choose from specializations in content strategy, UX/UI, communication with data, and learning design. Learn more.


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.

Doodle Icons

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)


8. New On Smashing Job Board


9. Recent Smashing Articles


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).


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#387: Design Systems

Tuesday, January 10, 2023

Design tokens, multi-lingual design system, deciding on new components and design system canvas. Issue #387 • Jan 10, 2023 • View in the browser 💨 Smashing Newsletter Boa noite Smashing Friends,

#386: CSS

Tuesday, January 3, 2023

With CSS skewed highlights, CSS trees, CSS overlaps and shiny new CSS techniques. Issue #386 • Jan 23, 2023 • View in the browser 💨 Smashing Newsletter Namaste Smashing Friends, 2023 is here, a new

#385: Getting Ready For 2023!

Tuesday, December 27, 2022

Keyboard shortcuts, tech teams app stacks, AI tooling for designers, terms of services and licenses explained. Issue #385 • December 27, 2022 • View in the browser 💨 Smashing Newsletter Dobroho vechora

#384: Color and Data Visualization

Tuesday, December 20, 2022

Color management, data visualization guidelines, typography for data charts, color contrast and accessible data visualizations. Issue #384 • December 20, 2022 • View in the browser 💨 Smashing

#383: Psychology and UX

Tuesday, December 13, 2022

Behavioral science, user interviews, product design methods, UX research and design system ROI calculator. Issue #383 • December 13, 2022 • View in the browser 💨 Smashing Newsletter Goeije 'n avend

You Might Also Like

🐺 How to create a high impact press page.

Friday, February 14, 2025

͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏

#494: UX and Product Design

Friday, February 14, 2025

Redesigning complex navigation, product design process, UX in legacy systems, UX workshops with users. Issue #494 • Feb 11, 2025 • View in the browser Smashing Newsletter Halò Smashing Friends, How do

Nick Mafi on Capturing LA’s Loss

Friday, February 14, 2025

View in your browser | Update your preferences ADPro 77 Stories Shared As we watched the worst fires in Los Angeles history spread across the city, the editors at AD came together to discuss the

🐺 Content that Converts - the replay is up!

Friday, February 14, 2025

And everyone who joined loved it! ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌

Designer or Couple’s Therapist?

Friday, February 14, 2025

View in your browser | Update your preferences ADPro Let's Make a Deal There's no shortage of spoils in the wonderfully eclectic Hudson Valley home of actor Walton Goggins and writer-director

178 / Visualize your dreams in 2025

Wednesday, January 15, 2025

Product Disrupt Logo Product Disrupt Half-Monthly Jan 2025 • Part 1 View in browser Welcome to Issue 178 Ever get curious about how this newsletter is doing? I shared the 2024 behind-the-scenes and

Mayer Rus on Loss, and Living, in LA

Tuesday, January 14, 2025

View in your browser | Update your preferences ADPro LA, I Love You Los Angeles has been my home for nearly 20 years, and the devastation here, now, is unfathomable. Entire neighborhoods have been

🐺 How to make a great first impression

Tuesday, January 14, 2025

With real examples. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

#490: Interface Design

Tuesday, January 14, 2025

How to design better interfaces, how to choose icons, optical effects, iconography, Gestalt principles and icon design. Issue #490 • Jan 14, 2025 • View in the browser Smashing Newsletter Buona

🐺LAST CHANCE to get 20%-off our PR Masterclass Series

Monday, January 13, 2025

Make 2025 your biggest press year yet. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏