#313: Open-Source Icons, Fonts and Goodies

With free icons, gradients, and illustrations to give your project the finishing touch. Issue #313 August 10, 2021 View in the browser 💨

Smashing Newsletter

Howdy Smashing Friends,

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

Flagpack

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.

Absurd Illustrations

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)


From our sponsor

Resizing Images In Angular Is Now A Child’s Play With ImageKit

Resizing Images In Angular Is Now A Child’s Play With ImageKit
Confused if you should restrict the image size before upload or leave the resizing to the client device? Fret not, here is your go-to guide to learn different techniques to resize images in angular. Adopt new cropping strategies, overlay text/images to get your desired output.


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.

Health Icons

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.

Smashing Online Events
Front-end and design can sometimes feel like you’re riding some pretty wild waves! We’ve got your back with personal and inclusive events.

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.


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.

Bioicons

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)


From our sponsor

Create A Winning Homepage For Your Clients

Create A Winning Homepage For Your Clients
Discover how Editor X created their powerful homepage with a deep dive into the process from concept to build. The team share their design, development, UX, and BI principles along with the features used and how to apply them for stand-out web creation. Watch webinar now →


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.

Weather Icons

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.

Flat illustrations

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.

Mesh gradients

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)


From our sponsor

Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern Information Design and Strategy.
Earn your master’s degree online.


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.

Blank VHS tape

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)


10. New On Smashing Job Board


10. Our Current Most Popular 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

#312: Next.js Boilerplates and Guides

Tuesday, August 3, 2021

With Next.js boilerplates and tutorials to help you get started or boost your existing Next.js setup. Issue #312 • August 3, 2021 • View in the browser 💨 Smashing Newsletter Howdy Smashing Friends,

#311: CSS Global Resets, Gradients and Transitions

Tuesday, July 27, 2021

Transitioning CSS gradients, CSS charts, CSS scrollbar gutters, whimsical 3D CSS Button, CSS clamp() generator and CSS margin collapsing.Issue #311 • July 27, 2021 • View in the browser 💨 Smashing

#310: Interface Design Patterns

Tuesday, July 20, 2021

With interface design components: from buttons and text fields to command palette interfaces and signup confirmation emails. Issue #310 • July 20, 2021 • View in the browser 💨 Smashing Newsletter Nǐ

#309: Web Performance Optimization

Tuesday, July 13, 2021

With smashing new design, partial hydration, third-party scripts, taming CSS with styled components and system fonts.Issue #309 • July 13, 2021 • View in the browser 💨 Smashing Newsletter Salut

#308: Designing and Building Dark Mode

Tuesday, July 6, 2021

With a complete guide to dark mode, designing in Figma and Sketch, how to choose colors and implementation details for dark mode. Issue #308 • July 6, 2021 • View in the browser 💨 Smashing Newsletter

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