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

You Might Also Like

Adobe AI, Remote, Stripe Sessions, Node.js Redesign, light-dark()

Thursday, March 28, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 28 2024 Defining experience quality in large language

Are Photorealistic Renderings Worth It?

Wednesday, March 27, 2024

Plus, the go-to garden stores of top designers and landscaping pros View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Home Decor, Lamp, Desk, Furniture,

CSS Variable Groups, Layout Rhythm, Animate Borders, Parallel Lives, Visualization Techniques

Wednesday, March 27, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 27 2024 Proposal: CSS Variable Groups lea.verou.me CSS

The History of Ikat

Tuesday, March 26, 2024

Plus, Kips Bay Decorator Show House New York announces designer lineup View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Art, and Painting SAVE YOUR

#449: UX Research

Tuesday, March 26, 2024

UX research impact, research invite emails, research without access to users, and UX research methods cheat sheet. Issue #449 • Mar 26, 2024 • View in the browser Smashing Newsletter Joh-eun jeonyeog-

Progress Indicator, Lissajous Curves, Pixel to Ink, Azulejo, Mac at 40

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 26 2024 Front-End solution: progress indicator piccalil.

Responsive Font Size, Icon Design, text-emphasis, Inclusive Sans, Accessible Forms

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 25 2024 A formula for responsive font-size jameshfisher.

👏 Impressive Dashboard Design Files + 🏆 Challenge Updates

Tuesday, March 26, 2024

🌟 Brighten Your Day with UpLabs' Design News! Firstly, let's congratulate Syndell, the winner of our latest 📝 Todoist Dashboard Redesign Challenge! Congratulations!! Secondly, don't forget

16 Designers Reveal Their All-Time Favorite IKEA Products

Monday, March 25, 2024

Plus, gardens every design lover must see in person View in your browser | Update your preferences Architectural Digest AD PRO Logo lush gardens with sparkling blue water and trees 14 GARDENS EVERY

Accessibility Weekly #389: On Popover Accessibility

Monday, March 25, 2024

March 25, 2024 • Issue #389 View this issue online or browse the full issue archive. Featured: On popover accessibility: What the browser does and doesn't do "One of the premises of the new