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

Key phrases

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

#391: Privacy and Security

Tuesday, February 7, 2023

Deceptive patterns, privacy UX, website tracking flowcharts, authentication UX and behavioral insights. Issue #391 • Feb 7, 2023 • View in the browser Smashing Newsletter He lā maikaʻi Smashing Friends

The 12 Best Design Districts Around the World

Tuesday, February 7, 2023

Plus, collectible Mexican design just got easier to source View in your browser | Update your preferences Architectural Digest AD PRO Logo collectible Mexican design exhibition COLLECTIBLE MEXICAN

My Tattoo Artist Ifé Toussaint Fetches The Boltcutters

Tuesday, February 7, 2023

Conversations about craft, cash, and compromise, with Emily Gould. My Tattoo Artist Ifé Toussaint Fetches The Boltcutters Illustration: by Samantha Hahn Workplaces, especially offices, are often called

One West Village Studio Suitable For Two

Tuesday, February 7, 2023

Design editor Wendy Goodman takes you inside the city's most exciting homes and design studios. Design Hunting A visual diary by Design Editor Wendy Goodman Photo: William Jess Laird When

Latest stories

Tuesday, February 7, 2023

Submit Story How Optimized Videos Create a Better User Experience When videos move at a snail's pace, take an age to load, or stall throughout playback, they bore and frustrate your users—who don

AI and Design, Grid Areas, FigStats, ChatGPT, Payments UX

Tuesday, February 7, 2023

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar February 7 2023 Combining AI and Design: A Step-by-Step Guide

Game On! 23 Glorious Game Rooms From the AD Archive

Monday, February 6, 2023

Plus, The Future Perfect spotlights contemporary Korean design & more news View in your browser | Update your preferences Architectural Digest AD PRO Logo moon jars on a shelf THE FUTURE PERFECT

🏡 Flawless Smart Home Mobile Apps + 🏆 Challenge Updates

Monday, February 6, 2023

Your UpLabs Design Fix Is Here 🙌 First and foremost, we want to congratulate RH Agency, the winner of our latest 📑 Asana Redesign Challenge! Congrats! Secondly, the end of January has brought us an

Accessibility Weekly #330: Modern Health, Frameworks, Performance, and Harm

Monday, February 6, 2023

Sponsored by Automattic. They're hiring. February 6, 2023 • Issue #330 View this issue online or browse the full issue archive. Featured: Modern Health, frameworks, performance, and harm “A person

Latest stories

Monday, February 6, 2023

Submit Story Techcopes – The best free online SEO tools you will ever need Unlock the Full Potential of Your Youtube Channel with These Must-Have Free Online SEO Tools and more Find used fonts on any