Tag: Icons

19 Aug

Free Open-Source Icons

by TBSCategories: News

It’s incredible to see people from all across the world putting all their love and lots of hours into something that they then release for free, for everybody to use. They help projects on a tight budget shine, without asking for anything in return — and, of course, they never cease to inspire.

In this post, we’ll celebrate some of these wonderful freebies that we came across recently. All of these free icons, illustrations, avatars, and animations 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 always much appreciated.

If you’re interested in more goodies like these ones, please do take a look at our lovely email newsletter, so you can get tips like these delivered right into your inbox.

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 Andorra to Zimbabwe.

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!

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.

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.

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.

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.

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 1,700 open-source life science illustrations in the set — easily searchable and filterable, of course.

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.

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.

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.

Summer And Tourism Icons

Barbecues, a trip to the beach, exploring a new city — summer is the time to make memories. To bring some of the summer feeling into your projects, you might want to take a look at the Summer Time and Tourism icon sets which the folks at Design Zone offer for free download. Each set includes 20 vector icons (in colored and linear versions) and comes in AI, EPS, and PNG formats. You can use the icons for both personal and commercial projects. Happy summer!

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 free compositions for businesses, online stores, and marketing. Characters in various poses and scenes, colorful, relaxed, and friendly.

The site features ever-changing free sets (link attribution is required), and also the commercial versions come with customizable vectors for Figma, Sketch, Ai, SVG, AdobeXD, and Iconjar. Good vibes guaranteed!

A World Of Open-Source Icons

What started as a semester project by Interaction and Communication Design students, has grown to a comprehensive open-source emoji and icon library: OpenMoji. Almost 4,000 icons have been carefully designed and reviewed for the project, ranging from UX and technology-themed emojis to animals, nature, food, people, activities, places, and much more. The icons are available in colored as well as outlined versions in SVG and PNG formats.

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.

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!

Open Peeps

584,688 possible combinations. That’s the number of different characters you could create with Pablo Stanley’s hand-drawn illustration library Open Peeps.

Open Peeps lets you mix and match different vector elements to create diverse personalities: combine clothing and hairstyles, change emotion with facial expressions, set the scene with different poses — the possibilities are sheer endless. And if you’re in a hurry, Pablo also prepared some ready-to-download Peeps that you can use right away. A great way to add a handmade touch to your design.

Free Vector Illustrations

A cow kidnapped by aliens, a dropped ice cream cone with a sad face, the Lochness monster emerging from the water. These are some of the fun error state animations that the folks at Pixel True Studios offer for free download in their set of vector illustrations and animations.

Apart from error state animations, the set includes more than 500 illustrations, icons, and animations to depict everything a web project could call for: backgrounds, emoji, avatars, and more. The illustrations are available in SVG, PNG, AI, Sketch, and Figma, the animations are made with Lottie. A great way to add a fun and friendly touch to a design.

Thank You!

A huge thank-you to the creative minds who designed these freebies — and of course to everyone who gives back to the community in one sense or another. The web wouldn’t be the same without you. ❤️

Articles on Smashing Magazine — For Web Designers And Developers

19 Aug

Free Open-Source Icons

by TBSCategories: News

It’s incredible to see people from all across the world putting all their love and lots of hours into something that they then release for free, for everybody to use. They help projects on a tight budget shine, without asking for anything in return — and, of course, they never cease to inspire.

In this post, we’ll celebrate some of these wonderful freebies that we came across recently. All of these free icons, illustrations, avatars, and animations 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 always much appreciated.

If you’re interested in more goodies like these ones, please do take a look at our lovely email newsletter, so you can get tips like these delivered right into your inbox.

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 Andorra to Zimbabwe.

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!

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.

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.

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.

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.

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 1,700 open-source life science illustrations in the set — easily searchable and filterable, of course.

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.

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.

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.

Summer And Tourism Icons

Barbecues, a trip to the beach, exploring a new city — summer is the time to make memories. To bring some of the summer feeling into your projects, you might want to take a look at the Summer Time and Tourism icon sets which the folks at Design Zone offer for free download. Each set includes 20 vector icons (in colored and linear versions) and comes in AI, EPS, and PNG formats. You can use the icons for both personal and commercial projects. Happy summer!

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 free compositions for businesses, online stores, and marketing. Characters in various poses and scenes, colorful, relaxed, and friendly.

The site features ever-changing free sets (link attribution is required), and also the commercial versions come with customizable vectors for Figma, Sketch, Ai, SVG, AdobeXD, and Iconjar. Good vibes guaranteed!

A World Of Open-Source Icons

What started as a semester project by Interaction and Communication Design students, has grown to a comprehensive open-source emoji and icon library: OpenMoji. Almost 4,000 icons have been carefully designed and reviewed for the project, ranging from UX and technology-themed emojis to animals, nature, food, people, activities, places, and much more. The icons are available in colored as well as outlined versions in SVG and PNG formats.

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.

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!

Open Peeps

584,688 possible combinations. That’s the number of different characters you could create with Pablo Stanley’s hand-drawn illustration library Open Peeps.

Open Peeps lets you mix and match different vector elements to create diverse personalities: combine clothing and hairstyles, change emotion with facial expressions, set the scene with different poses — the possibilities are sheer endless. And if you’re in a hurry, Pablo also prepared some ready-to-download Peeps that you can use right away. A great way to add a handmade touch to your design.

Free Vector Illustrations

A cow kidnapped by aliens, a dropped ice cream cone with a sad face, the Lochness monster emerging from the water. These are some of the fun error state animations that the folks at Pixel True Studios offer for free download in their set of vector illustrations and animations.

Apart from error state animations, the set includes more than 500 illustrations, icons, and animations to depict everything a web project could call for: backgrounds, emoji, avatars, and more. The illustrations are available in SVG, PNG, AI, Sketch, and Figma, the animations are made with Lottie. A great way to add a fun and friendly touch to a design.

Thank You!

A huge thank-you to the creative minds who designed these freebies — and of course to everyone who gives back to the community in one sense or another. The web wouldn’t be the same without you. ❤️

Articles on Smashing Magazine — For Web Designers And Developers

18 Aug

Free Open-Source Icons

by TBSCategories: News

It’s incredible to see people from all across the world putting all their love and lots of hours into something that they then release for free, for everybody to use. They help projects on a tight budget shine, without asking for anything in return — and, of course, they never cease to inspire.

In this post, we’ll celebrate some of these wonderful freebies that we came across recently. All of these free icons, illustrations, avatars, and animations 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 always much appreciated.

If you’re interested in more goodies like these ones, please do take a look at our lovely email newsletter, so you can get tips like these delivered right into your inbox.

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 Andorra to Zimbabwe.

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!

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.

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.

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.

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.

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 1,700 open-source life science illustrations in the set — easily searchable and filterable, of course.

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.

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.

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.

Summer And Tourism Icons

Barbecues, a trip to the beach, exploring a new city — summer is the time to make memories. To bring some of the summer feeling into your projects, you might want to take a look at the Summer Time and Tourism icon sets which the folks at Design Zone offer for free download. Each set includes 20 vector icons (in colored and linear versions) and comes in AI, EPS, and PNG formats. You can use the icons for both personal and commercial projects. Happy summer!

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 free compositions for businesses, online stores, and marketing. Characters in various poses and scenes, colorful, relaxed, and friendly.

The site features ever-changing free sets (link attribution is required), and also the commercial versions come with customizable vectors for Figma, Sketch, Ai, SVG, AdobeXD, and Iconjar. Good vibes guaranteed!

A World Of Open-Source Icons

What started as a semester project by Interaction and Communication Design students, has grown to a comprehensive open-source emoji and icon library: OpenMoji. Almost 4,000 icons have been carefully designed and reviewed for the project, ranging from UX and technology-themed emojis to animals, nature, food, people, activities, places, and much more. The icons are available in colored as well as outlined versions in SVG and PNG formats.

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.

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!

Open Peeps

584,688 possible combinations. That’s the number of different characters you could create with Pablo Stanley’s hand-drawn illustration library Open Peeps.

Open Peeps lets you mix and match different vector elements to create diverse personalities: combine clothing and hairstyles, change emotion with facial expressions, set the scene with different poses — the possibilities are sheer endless. And if you’re in a hurry, Pablo also prepared some ready-to-download Peeps that you can use right away. A great way to add a handmade touch to your design.

Free Vector Illustrations

A cow kidnapped by aliens, a dropped ice cream cone with a sad face, the Lochness monster emerging from the water. These are some of the fun error state animations that the folks at Pixel True Studios offer for free download in their set of vector illustrations and animations.

Apart from error state animations, the set includes more than 500 illustrations, icons, and animations to depict everything a web project could call for: backgrounds, emoji, avatars, and more. The illustrations are available in SVG, PNG, AI, Sketch, and Figma, the animations are made with Lottie. A great way to add a fun and friendly touch to a design.

Thank You!

A huge thank-you to the creative minds who designed these freebies — and of course to everyone who gives back to the community in one sense or another. The web wouldn’t be the same without you. ❤️

Articles on Smashing Magazine — For Web Designers And Developers

18 Aug

Free Open-Source Icons

by TBSCategories: News

It’s incredible to see people from all across the world putting all their love and lots of hours into something that they then release for free, for everybody to use. They help projects on a tight budget shine, without asking for anything in return — and, of course, they never cease to inspire.

In this post, we’ll celebrate some of these wonderful freebies that we came across recently. All of these free icons, illustrations, avatars, and animations 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 always much appreciated.

If you’re interested in more goodies like these ones, please do take a look at our lovely email newsletter, so you can get tips like these delivered right into your inbox.

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 Andorra to Zimbabwe.

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!

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.

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.

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.

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.

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 1,700 open-source life science illustrations in the set — easily searchable and filterable, of course.

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.

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.

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.

Summer And Tourism Icons

Barbecues, a trip to the beach, exploring a new city — summer is the time to make memories. To bring some of the summer feeling into your projects, you might want to take a look at the Summer Time and Tourism icon sets which the folks at Design Zone offer for free download. Each set includes 20 vector icons (in colored and linear versions) and comes in AI, EPS, and PNG formats. You can use the icons for both personal and commercial projects. Happy summer!

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 free compositions for businesses, online stores, and marketing. Characters in various poses and scenes, colorful, relaxed, and friendly.

The site features ever-changing free sets (link attribution is required), and also the commercial versions come with customizable vectors for Figma, Sketch, Ai, SVG, AdobeXD, and Iconjar. Good vibes guaranteed!

A World Of Open-Source Icons

What started as a semester project by Interaction and Communication Design students, has grown to a comprehensive open-source emoji and icon library: OpenMoji. Almost 4,000 icons have been carefully designed and reviewed for the project, ranging from UX and technology-themed emojis to animals, nature, food, people, activities, places, and much more. The icons are available in colored as well as outlined versions in SVG and PNG formats.

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.

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!

Open Peeps

584,688 possible combinations. That’s the number of different characters you could create with Pablo Stanley’s hand-drawn illustration library Open Peeps.

Open Peeps lets you mix and match different vector elements to create diverse personalities: combine clothing and hairstyles, change emotion with facial expressions, set the scene with different poses — the possibilities are sheer endless. And if you’re in a hurry, Pablo also prepared some ready-to-download Peeps that you can use right away. A great way to add a handmade touch to your design.

Free Vector Illustrations

A cow kidnapped by aliens, a dropped ice cream cone with a sad face, the Lochness monster emerging from the water. These are some of the fun error state animations that the folks at Pixel True Studios offer for free download in their set of vector illustrations and animations.

Apart from error state animations, the set includes more than 500 illustrations, icons, and animations to depict everything a web project could call for: backgrounds, emoji, avatars, and more. The illustrations are available in SVG, PNG, AI, Sketch, and Figma, the animations are made with Lottie. A great way to add a fun and friendly touch to a design.

Thank You!

A huge thank-you to the creative minds who designed these freebies — and of course to everyone who gives back to the community in one sense or another. The web wouldn’t be the same without you. ❤️

Articles on Smashing Magazine — For Web Designers And Developers

17 Aug

Free Open-Source Icons

by TBSCategories: News

It’s incredible to see people from all across the world putting all their love and lots of hours into something that they then release for free, for everybody to use. They help projects on a tight budget shine, without asking for anything in return — and, of course, they never cease to inspire.

In this post, we’ll celebrate some of these wonderful freebies that we came across recently. All of these free icons, illustrations, avatars, and animations 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 always much appreciated.

If you’re interested in more goodies like these ones, please do take a look at our lovely email newsletter, so you can get tips like these delivered right into your inbox.

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 Andorra to Zimbabwe.

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!

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.

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.

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.

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.

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 1,700 open-source life science illustrations in the set — easily searchable and filterable, of course.

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.

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.

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.

Summer And Tourism Icons

Barbecues, a trip to the beach, exploring a new city — summer is the time to make memories. To bring some of the summer feeling into your projects, you might want to take a look at the Summer Time and Tourism icon sets which the folks at Design Zone offer for free download. Each set includes 20 vector icons (in colored and linear versions) and comes in AI, EPS, and PNG formats. You can use the icons for both personal and commercial projects. Happy summer!

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 free compositions for businesses, online stores, and marketing. Characters in various poses and scenes, colorful, relaxed, and friendly.

The site features ever-changing free sets (link attribution is required), and also the commercial versions come with customizable vectors for Figma, Sketch, Ai, SVG, AdobeXD, and Iconjar. Good vibes guaranteed!

A World Of Open-Source Icons

What started as a semester project by Interaction and Communication Design students, has grown to a comprehensive open-source emoji and icon library: OpenMoji. Almost 4,000 icons have been carefully designed and reviewed for the project, ranging from UX and technology-themed emojis to animals, nature, food, people, activities, places, and much more. The icons are available in colored as well as outlined versions in SVG and PNG formats.

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.

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!

Open Peeps

584,688 possible combinations. That’s the number of different characters you could create with Pablo Stanley’s hand-drawn illustration library Open Peeps.

Open Peeps lets you mix and match different vector elements to create diverse personalities: combine clothing and hairstyles, change emotion with facial expressions, set the scene with different poses — the possibilities are sheer endless. And if you’re in a hurry, Pablo also prepared some ready-to-download Peeps that you can use right away. A great way to add a handmade touch to your design.

Free Vector Illustrations

A cow kidnapped by aliens, a dropped ice cream cone with a sad face, the Lochness monster emerging from the water. These are some of the fun error state animations that the folks at Pixel True Studios offer for free download in their set of vector illustrations and animations.

Apart from error state animations, the set includes more than 500 illustrations, icons, and animations to depict everything a web project could call for: backgrounds, emoji, avatars, and more. The illustrations are available in SVG, PNG, AI, Sketch, and Figma, the animations are made with Lottie. A great way to add a fun and friendly touch to a design.

Thank You!

A huge thank-you to the creative minds who designed these freebies — and of course to everyone who gives back to the community in one sense or another. The web wouldn’t be the same without you. ❤️

Articles on Smashing Magazine — For Web Designers And Developers

19 Oct

4 Ways To Creatively Use Icons In Your Mobile Apps

by TBSCategories: News

There’s nothing novel about using icons within mobile apps. From the home screen icon to the navigation menu, they’re pretty much a standard part of the apps that designers build.

They come with big benefits too:

  • Minimized distractions,
  • More attractive UIs,
  • Empowerment of users to easily engage with the app,
  • Elimination of language barriers,
  • Improvement of brand recognizability.

But are we using icons as best as we can or are there ways to improve the mobile UX even further with iconography? Today, I want to look at a number of ways you can creatively add icons or icon-like elements to your apps and bring more life (and engagement) to them in the process.

Making The Most Out Of Icons

Icons are super useful design elements for mobile interfaces. While we do have to be careful with icons (like making sure navigational icons are always paired with text as well as not using so many that the interface becomes like a puzzle to be solved), there are some additional use cases I want you to consider:

1. Show Hints Of Branded Icons Throughout The App

Users will first get a glimpse of an app’s branded logo icon from the app store. Once installed, this icon will become a persistent presence on the user’s smart device, which will foster greater awareness of the app.

What I’ve noticed with many apps, though, is that the brand icon doesn’t often appear past that point. In some cases, it makes total sense. An app isn’t like a website that needs that steady logo anchor so users can always quickly get “Home”. But…

I can’t help but feel like small branded elements throughout could add a unique touch to the experience. They wouldn’t detract from the experience. Instead, they’d show up in bite-sized chunks that add something extra to the experience.

One example I really like is the CheapOair app. This is the logo that appears when a user first opens it. It’s the same one that appears at the top of the corresponding website:

Now, if you were to look at the app store page for CheapOair or how it appears on a user’s home screen, you’d see that the full logo isn’t used. Instead, users see the luggage-shaped “O” icon:

It’s unique. It’s memorable. And it works well in tiny spaces, like as the desktop favicon or on smaller mobile screens.

Now, for an app like CheapOair that aggregates travel listings from different airlines, hotels, car rental agencies and so on, it’s only natural to expect some lag time as users move through the app. And while the designers could’ve used a more traditional loading icon (like the spinning wheel or progress bar), it uses its branded icon instead:

The stamps are in the shape of a moon. It’s not officially part of Hotels.com’s branding, but it’s a very recognizable icon for its rewards members.

Because of this recognizability, its placement within hotel search results pages is helpful as it allows users to quickly scroll through and see which hotels they can earn another stamp with:

There are many different factors that users consider when booking a hotel room, including price, distance, average user rating and so on. But rather than bog down the main listing with this extra detail that’s only relevant to rewards members, the use of the icon and its placement in the bottom-left corner of the image for eligible hotels is a good choice.

So, even if you don’t feel like using the actual brand logo within the app (or find no reason to), this example proves that there are other ways to use brand-adjacent iconography to improve the experience.

2. Use Icons To Encourage More Gestures And Actions

One of the keys to retaining more app users is to give them a reason to regularly engage with it. And if your users can’t remember which gestures to use when they’re inside the app or they find the act of interacting with it to be boring, that may be enough reason for them to go looking for apps that do a better job of capturing their attention.

Even if your users don’t have any problem with how the engaging elements are presented to them, what happens if someone they know suggests an app that they like better? And they see how much more they like the presentation of different elements?

Either way, you don’t want to give them a reason to lose interest or look for greener pastures. And I think that icons added to gestures and clickable targets can help with this.

This, for instance, is the Boomerang for Gmail app:

I needed a way to “pause” my Gmail inbox during the workday (to prevent distractions) as well as in my off hours (to keep myself from working). While there are a number of distraction-blocking tools available, I loved the simplicity and elegance of this one. I especially appreciated this sorting gesture.

There’s no need to open the message and use the options bar to select the right option. When messages appear in my inbox, it takes no more than a second to swipe left and take action because of how clearly labeled they are. And because I use this app every day, my finger automatically knows which icon to flick the message to: archive, mark as read, Boomerang (for another day/time), move or delete.

Again, if you can make engaging with an app go more smoothly — which, in this case, I attribute to the complex gesture simplified by recognizable icons — you’ll find users are more likely to use it.

Your app doesn’t need to have swiping gestures in order to play around with engaging icon design. Duolingo, for example, has brought its language modules to life thanks to these animated icons:

Have you ever read something online that was so good (or maybe even so bad) that you had to know who wrote it? For the most part, online publications just put a byline at the top and a short bio under the post. BuzzFeed, however, gives its author more than just name recognition. It pairs their byline with an iconized headshot.

This is a great touch. It tells readers from the get-go that they have real writers behind this piece and lets them connect to the writer on a more personal level.

It’s also just too easy for this detail to get lost on a page because of the title, subtitle, read-minutes and other metadata that publications put at the top. I’d say in terms of making an article more attractive and welcoming, even this small of an icon helps set the stage for an enjoyable reading experience.

Food service apps could probably benefit from this as well. Only, in this case, it would be food items and products that become iconized. Like what the SONIC Drive-in app does:

There was a study done by Durham University on the connection between images and satisfaction with a food order. The study looked at a number of variables, but this one is particularly relevant to what we’re looking at in the SONIC app:

“Our research revealed that if a restaurant wants to make use of imagery and visual prompts on their menu, this needs to be combined with commonly used and ‘accurate’ food names to increase marketing power. While it may seem a basic approach, photos can act as a positive reinforcement for customers who have made a visual connection that reflects the name of that dish.”

This is exactly what SONIC does in the above example. Rather than show one of their cups filled with the soft drink or show no photo at all, it displays the brand logos as icons beside each.

These brands are so deeply ingrained in the consumer consciousness that it will make the ordering process go much easier. It should also lead to greater satisfaction overall as there’s no surprise about what they’re getting.

Then, there’s the use case for marketplaces, like Rakuten:

This ebates app helps users make money off of their online purchases.

Now imagine if this app were just a text-only list of deals. Sure, it would still be usable and useful… but users would likely resort to the search bar to find deals as opposed to actually reading through what’s available. And if your users can only find what they want through search, there’s something wrong — especially if you’re presenting them with the hottest offers or products of the day.

I looked around and couldn’t find any ecommerce marketplace that does something like this — pairing a product or deal with a brand icon — which I find surprising. While I realize users can sort through listings by brand name, wouldn’t an iconized brand logo help users more easily locate items they want to buy from search results?

I guess the big argument against this would be for marketplaces pushing their own products (like Amazon does). By displaying a brand icon either in search results or on a product’s page, it might deter users from buying the item if it’s from a lesser-known and unrecognizable brand.

For concepts like Rakuten, however, it totally works and I’d urge you to use it when you can.

Wrapping Up

As you can tell by these examples, you’re not going to completely revamp the look and feel of your mobile app with icons. Instead, by adding very subtle touches here and there — that users are bound to take notice of — you’ll impress them with your attention to detail while making the overall experience more enjoyable. This, in turn, can lead to greater levels of engagement and higher rates of user retention.

Further Reading on SmashingMag:

Articles on Smashing Magazine — For Web Designers And Developers

18 Oct

4 Ways To Creatively Use Icons In Your Mobile Apps

by TBSCategories: News

There’s nothing novel about using icons within mobile apps. From the home screen icon to the navigation menu, they’re pretty much a standard part of the apps that designers build.

They come with big benefits too:

  • Minimized distractions,
  • More attractive UIs,
  • Empowerment of users to easily engage with the app,
  • Elimination of language barriers,
  • Improvement of brand recognizability.

But are we using icons as best as we can or are there ways to improve the mobile UX even further with iconography? Today, I want to look at a number of ways you can creatively add icons or icon-like elements to your apps and bring more life (and engagement) to them in the process.

Making The Most Out Of Icons

Icons are super useful design elements for mobile interfaces. While we do have to be careful with icons (like making sure navigational icons are always paired with text as well as not using so many that the interface becomes like a puzzle to be solved), there are some additional use cases I want you to consider:

1. Show Hints Of Branded Icons Throughout The App

Users will first get a glimpse of an app’s branded logo icon from the app store. Once installed, this icon will become a persistent presence on the user’s smart device, which will foster greater awareness of the app.

What I’ve noticed with many apps, though, is that the brand icon doesn’t often appear past that point. In some cases, it makes total sense. An app isn’t like a website that needs that steady logo anchor so users can always quickly get “Home”. But…

I can’t help but feel like small branded elements throughout could add a unique touch to the experience. They wouldn’t detract from the experience. Instead, they’d show up in bite-sized chunks that add something extra to the experience.

One example I really like is the CheapOair app. This is the logo that appears when a user first opens it. It’s the same one that appears at the top of the corresponding website:

Now, if you were to look at the app store page for CheapOair or how it appears on a user’s home screen, you’d see that the full logo isn’t used. Instead, users see the luggage-shaped “O” icon:

It’s unique. It’s memorable. And it works well in tiny spaces, like as the desktop favicon or on smaller mobile screens.

Now, for an app like CheapOair that aggregates travel listings from different airlines, hotels, car rental agencies and so on, it’s only natural to expect some lag time as users move through the app. And while the designers could’ve used a more traditional loading icon (like the spinning wheel or progress bar), it uses its branded icon instead:

The stamps are in the shape of a moon. It’s not officially part of Hotels.com’s branding, but it’s a very recognizable icon for its rewards members.

Because of this recognizability, its placement within hotel search results pages is helpful as it allows users to quickly scroll through and see which hotels they can earn another stamp with:

There are many different factors that users consider when booking a hotel room, including price, distance, average user rating and so on. But rather than bog down the main listing with this extra detail that’s only relevant to rewards members, the use of the icon and its placement in the bottom-left corner of the image for eligible hotels is a good choice.

So, even if you don’t feel like using the actual brand logo within the app (or find no reason to), this example proves that there are other ways to use brand-adjacent iconography to improve the experience.

2. Use Icons To Encourage More Gestures And Actions

One of the keys to retaining more app users is to give them a reason to regularly engage with it. And if your users can’t remember which gestures to use when they’re inside the app or they find the act of interacting with it to be boring, that may be enough reason for them to go looking for apps that do a better job of capturing their attention.

Even if your users don’t have any problem with how the engaging elements are presented to them, what happens if someone they know suggests an app that they like better? And they see how much more they like the presentation of different elements?

Either way, you don’t want to give them a reason to lose interest or look for greener pastures. And I think that icons added to gestures and clickable targets can help with this.

This, for instance, is the Boomerang for Gmail app:

I needed a way to “pause” my Gmail inbox during the workday (to prevent distractions) as well as in my off hours (to keep myself from working). While there are a number of distraction-blocking tools available, I loved the simplicity and elegance of this one. I especially appreciated this sorting gesture.

There’s no need to open the message and use the options bar to select the right option. When messages appear in my inbox, it takes no more than a second to swipe left and take action because of how clearly labeled they are. And because I use this app every day, my finger automatically knows which icon to flick the message to: archive, mark as read, Boomerang (for another day/time), move or delete.

Again, if you can make engaging with an app go more smoothly — which, in this case, I attribute to the complex gesture simplified by recognizable icons — you’ll find users are more likely to use it.

Your app doesn’t need to have swiping gestures in order to play around with engaging icon design. Duolingo, for example, has brought its language modules to life thanks to these animated icons:

Have you ever read something online that was so good (or maybe even so bad) that you had to know who wrote it? For the most part, online publications just put a byline at the top and a short bio under the post. BuzzFeed, however, gives its author more than just name recognition. It pairs their byline with an iconized headshot.

This is a great touch. It tells readers from the get-go that they have real writers behind this piece and lets them connect to the writer on a more personal level.

It’s also just too easy for this detail to get lost on a page because of the title, subtitle, read-minutes and other metadata that publications put at the top. I’d say in terms of making an article more attractive and welcoming, even this small of an icon helps set the stage for an enjoyable reading experience.

Food service apps could probably benefit from this as well. Only, in this case, it would be food items and products that become iconized. Like what the SONIC Drive-in app does:

There was a study done by Durham University on the connection between images and satisfaction with a food order. The study looked at a number of variables, but this one is particularly relevant to what we’re looking at in the SONIC app:

“Our research revealed that if a restaurant wants to make use of imagery and visual prompts on their menu, this needs to be combined with commonly used and ‘accurate’ food names to increase marketing power. While it may seem a basic approach, photos can act as a positive reinforcement for customers who have made a visual connection that reflects the name of that dish.”

This is exactly what SONIC does in the above example. Rather than show one of their cups filled with the soft drink or show no photo at all, it displays the brand logos as icons beside each.

These brands are so deeply ingrained in the consumer consciousness that it will make the ordering process go much easier. It should also lead to greater satisfaction overall as there’s no surprise about what they’re getting.

Then, there’s the use case for marketplaces, like Rakuten:

This ebates app helps users make money off of their online purchases.

Now imagine if this app were just a text-only list of deals. Sure, it would still be usable and useful… but users would likely resort to the search bar to find deals as opposed to actually reading through what’s available. And if your users can only find what they want through search, there’s something wrong — especially if you’re presenting them with the hottest offers or products of the day.

I looked around and couldn’t find any ecommerce marketplace that does something like this — pairing a product or deal with a brand icon — which I find surprising. While I realize users can sort through listings by brand name, wouldn’t an iconized brand logo help users more easily locate items they want to buy from search results?

I guess the big argument against this would be for marketplaces pushing their own products (like Amazon does). By displaying a brand icon either in search results or on a product’s page, it might deter users from buying the item if it’s from a lesser-known and unrecognizable brand.

For concepts like Rakuten, however, it totally works and I’d urge you to use it when you can.

Wrapping Up

As you can tell by these examples, you’re not going to completely revamp the look and feel of your mobile app with icons. Instead, by adding very subtle touches here and there — that users are bound to take notice of — you’ll impress them with your attention to detail while making the overall experience more enjoyable. This, in turn, can lead to greater levels of engagement and higher rates of user retention.

Further Reading on SmashingMag:

Articles on Smashing Magazine — For Web Designers And Developers

18 Oct

4 Ways To Creatively Use Icons In Your Mobile Apps

by TBSCategories: News

There’s nothing novel about using icons within mobile apps. From the home screen icon to the navigation menu, they’re pretty much a standard part of the apps that designers build.

They come with big benefits too:

  • Minimized distractions,
  • More attractive UIs,
  • Empowerment of users to easily engage with the app,
  • Elimination of language barriers,
  • Improvement of brand recognizability.

But are we using icons as best as we can or are there ways to improve the mobile UX even further with iconography? Today, I want to look at a number of ways you can creatively add icons or icon-like elements to your apps and bring more life (and engagement) to them in the process.

Making The Most Out Of Icons

Icons are super useful design elements for mobile interfaces. While we do have to be careful with icons (like making sure navigational icons are always paired with text as well as not using so many that the interface becomes like a puzzle to be solved), there are some additional use cases I want you to consider:

1. Show Hints Of Branded Icons Throughout The App

Users will first get a glimpse of an app’s branded logo icon from the app store. Once installed, this icon will become a persistent presence on the user’s smart device, which will foster greater awareness of the app.

What I’ve noticed with many apps, though, is that the brand icon doesn’t often appear past that point. In some cases, it makes total sense. An app isn’t like a website that needs that steady logo anchor so users can always quickly get “Home”. But…

I can’t help but feel like small branded elements throughout could add a unique touch to the experience. They wouldn’t detract from the experience. Instead, they’d show up in bite-sized chunks that add something extra to the experience.

One example I really like is the CheapOair app. This is the logo that appears when a user first opens it. It’s the same one that appears at the top of the corresponding website:

Now, if you were to look at the app store page for CheapOair or how it appears on a user’s home screen, you’d see that the full logo isn’t used. Instead, users see the luggage-shaped “O” icon:

It’s unique. It’s memorable. And it works well in tiny spaces, like as the desktop favicon or on smaller mobile screens.

Now, for an app like CheapOair that aggregates travel listings from different airlines, hotels, car rental agencies and so on, it’s only natural to expect some lag time as users move through the app. And while the designers could’ve used a more traditional loading icon (like the spinning wheel or progress bar), it uses its branded icon instead:

The stamps are in the shape of a moon. It’s not officially part of Hotels.com’s branding, but it’s a very recognizable icon for its rewards members.

Because of this recognizability, its placement within hotel search results pages is helpful as it allows users to quickly scroll through and see which hotels they can earn another stamp with:

There are many different factors that users consider when booking a hotel room, including price, distance, average user rating and so on. But rather than bog down the main listing with this extra detail that’s only relevant to rewards members, the use of the icon and its placement in the bottom-left corner of the image for eligible hotels is a good choice.

So, even if you don’t feel like using the actual brand logo within the app (or find no reason to), this example proves that there are other ways to use brand-adjacent iconography to improve the experience.

2. Use Icons To Encourage More Gestures And Actions

One of the keys to retaining more app users is to give them a reason to regularly engage with it. And if your users can’t remember which gestures to use when they’re inside the app or they find the act of interacting with it to be boring, that may be enough reason for them to go looking for apps that do a better job of capturing their attention.

Even if your users don’t have any problem with how the engaging elements are presented to them, what happens if someone they know suggests an app that they like better? And they see how much more they like the presentation of different elements?

Either way, you don’t want to give them a reason to lose interest or look for greener pastures. And I think that icons added to gestures and clickable targets can help with this.

This, for instance, is the Boomerang for Gmail app:

I needed a way to “pause” my Gmail inbox during the workday (to prevent distractions) as well as in my off hours (to keep myself from working). While there are a number of distraction-blocking tools available, I loved the simplicity and elegance of this one. I especially appreciated this sorting gesture.

There’s no need to open the message and use the options bar to select the right option. When messages appear in my inbox, it takes no more than a second to swipe left and take action because of how clearly labeled they are. And because I use this app every day, my finger automatically knows which icon to flick the message to: archive, mark as read, Boomerang (for another day/time), move or delete.

Again, if you can make engaging with an app go more smoothly — which, in this case, I attribute to the complex gesture simplified by recognizable icons — you’ll find users are more likely to use it.

Your app doesn’t need to have swiping gestures in order to play around with engaging icon design. Duolingo, for example, has brought its language modules to life thanks to these animated icons:

Have you ever read something online that was so good (or maybe even so bad) that you had to know who wrote it? For the most part, online publications just put a byline at the top and a short bio under the post. BuzzFeed, however, gives its author more than just name recognition. It pairs their byline with an iconized headshot.

This is a great touch. It tells readers from the get-go that they have real writers behind this piece and lets them connect to the writer on a more personal level.

It’s also just too easy for this detail to get lost on a page because of the title, subtitle, read-minutes and other metadata that publications put at the top. I’d say in terms of making an article more attractive and welcoming, even this small of an icon helps set the stage for an enjoyable reading experience.

Food service apps could probably benefit from this as well. Only, in this case, it would be food items and products that become iconized. Like what the SONIC Drive-in app does:

There was a study done by Durham University on the connection between images and satisfaction with a food order. The study looked at a number of variables, but this one is particularly relevant to what we’re looking at in the SONIC app:

“Our research revealed that if a restaurant wants to make use of imagery and visual prompts on their menu, this needs to be combined with commonly used and ‘accurate’ food names to increase marketing power. While it may seem a basic approach, photos can act as a positive reinforcement for customers who have made a visual connection that reflects the name of that dish.”

This is exactly what SONIC does in the above example. Rather than show one of their cups filled with the soft drink or show no photo at all, it displays the brand logos as icons beside each.

These brands are so deeply ingrained in the consumer consciousness that it will make the ordering process go much easier. It should also lead to greater satisfaction overall as there’s no surprise about what they’re getting.

Then, there’s the use case for marketplaces, like Rakuten:

This ebates app helps users make money off of their online purchases.

Now imagine if this app were just a text-only list of deals. Sure, it would still be usable and useful… but users would likely resort to the search bar to find deals as opposed to actually reading through what’s available. And if your users can only find what they want through search, there’s something wrong — especially if you’re presenting them with the hottest offers or products of the day.

I looked around and couldn’t find any ecommerce marketplace that does something like this — pairing a product or deal with a brand icon — which I find surprising. While I realize users can sort through listings by brand name, wouldn’t an iconized brand logo help users more easily locate items they want to buy from search results?

I guess the big argument against this would be for marketplaces pushing their own products (like Amazon does). By displaying a brand icon either in search results or on a product’s page, it might deter users from buying the item if it’s from a lesser-known and unrecognizable brand.

For concepts like Rakuten, however, it totally works and I’d urge you to use it when you can.

Wrapping Up

As you can tell by these examples, you’re not going to completely revamp the look and feel of your mobile app with icons. Instead, by adding very subtle touches here and there — that users are bound to take notice of — you’ll impress them with your attention to detail while making the overall experience more enjoyable. This, in turn, can lead to greater levels of engagement and higher rates of user retention.

Further Reading on SmashingMag:

Articles on Smashing Magazine — For Web Designers And Developers

18 Oct

4 Ways To Creatively Use Icons In Your Mobile Apps

by TBSCategories: News

There’s nothing novel about using icons within mobile apps. From the home screen icon to the navigation menu, they’re pretty much a standard part of the apps that designers build.

They come with big benefits too:

  • Minimized distractions,
  • More attractive UIs,
  • Empowerment of users to easily engage with the app,
  • Elimination of language barriers,
  • Improvement of brand recognizability.

But are we using icons as best as we can or are there ways to improve the mobile UX even further with iconography? Today, I want to look at a number of ways you can creatively add icons or icon-like elements to your apps and bring more life (and engagement) to them in the process.

Making The Most Out Of Icons

Icons are super useful design elements for mobile interfaces. While we do have to be careful with icons (like making sure navigational icons are always paired with text as well as not using so many that the interface becomes like a puzzle to be solved), there are some additional use cases I want you to consider:

1. Show Hints Of Branded Icons Throughout The App

Users will first get a glimpse of an app’s branded logo icon from the app store. Once installed, this icon will become a persistent presence on the user’s smart device, which will foster greater awareness of the app.

What I’ve noticed with many apps, though, is that the brand icon doesn’t often appear past that point. In some cases, it makes total sense. An app isn’t like a website that needs that steady logo anchor so users can always quickly get “Home”. But…

I can’t help but feel like small branded elements throughout could add a unique touch to the experience. They wouldn’t detract from the experience. Instead, they’d show up in bite-sized chunks that add something extra to the experience.

One example I really like is the CheapOair app. This is the logo that appears when a user first opens it. It’s the same one that appears at the top of the corresponding website:

Now, if you were to look at the app store page for CheapOair or how it appears on a user’s home screen, you’d see that the full logo isn’t used. Instead, users see the luggage-shaped “O” icon:

It’s unique. It’s memorable. And it works well in tiny spaces, like as the desktop favicon or on smaller mobile screens.

Now, for an app like CheapOair that aggregates travel listings from different airlines, hotels, car rental agencies and so on, it’s only natural to expect some lag time as users move through the app. And while the designers could’ve used a more traditional loading icon (like the spinning wheel or progress bar), it uses its branded icon instead:

The stamps are in the shape of a moon. It’s not officially part of Hotels.com’s branding, but it’s a very recognizable icon for its rewards members.

Because of this recognizability, its placement within hotel search results pages is helpful as it allows users to quickly scroll through and see which hotels they can earn another stamp with:

There are many different factors that users consider when booking a hotel room, including price, distance, average user rating and so on. But rather than bog down the main listing with this extra detail that’s only relevant to rewards members, the use of the icon and its placement in the bottom-left corner of the image for eligible hotels is a good choice.

So, even if you don’t feel like using the actual brand logo within the app (or find no reason to), this example proves that there are other ways to use brand-adjacent iconography to improve the experience.

2. Use Icons To Encourage More Gestures And Actions

One of the keys to retaining more app users is to give them a reason to regularly engage with it. And if your users can’t remember which gestures to use when they’re inside the app or they find the act of interacting with it to be boring, that may be enough reason for them to go looking for apps that do a better job of capturing their attention.

Even if your users don’t have any problem with how the engaging elements are presented to them, what happens if someone they know suggests an app that they like better? And they see how much more they like the presentation of different elements?

Either way, you don’t want to give them a reason to lose interest or look for greener pastures. And I think that icons added to gestures and clickable targets can help with this.

This, for instance, is the Boomerang for Gmail app:

I needed a way to “pause” my Gmail inbox during the workday (to prevent distractions) as well as in my off hours (to keep myself from working). While there are a number of distraction-blocking tools available, I loved the simplicity and elegance of this one. I especially appreciated this sorting gesture.

There’s no need to open the message and use the options bar to select the right option. When messages appear in my inbox, it takes no more than a second to swipe left and take action because of how clearly labeled they are. And because I use this app every day, my finger automatically knows which icon to flick the message to: archive, mark as read, Boomerang (for another day/time), move or delete.

Again, if you can make engaging with an app go more smoothly — which, in this case, I attribute to the complex gesture simplified by recognizable icons — you’ll find users are more likely to use it.

Your app doesn’t need to have swiping gestures in order to play around with engaging icon design. Duolingo, for example, has brought its language modules to life thanks to these animated icons:

Have you ever read something online that was so good (or maybe even so bad) that you had to know who wrote it? For the most part, online publications just put a byline at the top and a short bio under the post. BuzzFeed, however, gives its author more than just name recognition. It pairs their byline with an iconized headshot.

This is a great touch. It tells readers from the get-go that they have real writers behind this piece and lets them connect to the writer on a more personal level.

It’s also just too easy for this detail to get lost on a page because of the title, subtitle, read-minutes and other metadata that publications put at the top. I’d say in terms of making an article more attractive and welcoming, even this small of an icon helps set the stage for an enjoyable reading experience.

Food service apps could probably benefit from this as well. Only, in this case, it would be food items and products that become iconized. Like what the SONIC Drive-in app does:

There was a study done by Durham University on the connection between images and satisfaction with a food order. The study looked at a number of variables, but this one is particularly relevant to what we’re looking at in the SONIC app:

“Our research revealed that if a restaurant wants to make use of imagery and visual prompts on their menu, this needs to be combined with commonly used and ‘accurate’ food names to increase marketing power. While it may seem a basic approach, photos can act as a positive reinforcement for customers who have made a visual connection that reflects the name of that dish.”

This is exactly what SONIC does in the above example. Rather than show one of their cups filled with the soft drink or show no photo at all, it displays the brand logos as icons beside each.

These brands are so deeply ingrained in the consumer consciousness that it will make the ordering process go much easier. It should also lead to greater satisfaction overall as there’s no surprise about what they’re getting.

Then, there’s the use case for marketplaces, like Rakuten:

This ebates app helps users make money off of their online purchases.

Now imagine if this app were just a text-only list of deals. Sure, it would still be usable and useful… but users would likely resort to the search bar to find deals as opposed to actually reading through what’s available. And if your users can only find what they want through search, there’s something wrong — especially if you’re presenting them with the hottest offers or products of the day.

I looked around and couldn’t find any ecommerce marketplace that does something like this — pairing a product or deal with a brand icon — which I find surprising. While I realize users can sort through listings by brand name, wouldn’t an iconized brand logo help users more easily locate items they want to buy from search results?

I guess the big argument against this would be for marketplaces pushing their own products (like Amazon does). By displaying a brand icon either in search results or on a product’s page, it might deter users from buying the item if it’s from a lesser-known and unrecognizable brand.

For concepts like Rakuten, however, it totally works and I’d urge you to use it when you can.

Wrapping Up

As you can tell by these examples, you’re not going to completely revamp the look and feel of your mobile app with icons. Instead, by adding very subtle touches here and there — that users are bound to take notice of — you’ll impress them with your attention to detail while making the overall experience more enjoyable. This, in turn, can lead to greater levels of engagement and higher rates of user retention.

Further Reading on SmashingMag:

Articles on Smashing Magazine — For Web Designers And Developers

18 Oct

4 Ways To Creatively Use Icons In Your Mobile Apps

by TBSCategories: News

There’s nothing novel about using icons within mobile apps. From the home screen icon to the navigation menu, they’re pretty much a standard part of the apps that designers build.

They come with big benefits too:

  • Minimized distractions,
  • More attractive UIs,
  • Empowerment of users to easily engage with the app,
  • Elimination of language barriers,
  • Improvement of brand recognizability.

But are we using icons as best as we can or are there ways to improve the mobile UX even further with iconography? Today, I want to look at a number of ways you can creatively add icons or icon-like elements to your apps and bring more life (and engagement) to them in the process.

Making The Most Out Of Icons

Icons are super useful design elements for mobile interfaces. While we do have to be careful with icons (like making sure navigational icons are always paired with text as well as not using so many that the interface becomes like a puzzle to be solved), there are some additional use cases I want you to consider:

1. Show Hints Of Branded Icons Throughout The App

Users will first get a glimpse of an app’s branded logo icon from the app store. Once installed, this icon will become a persistent presence on the user’s smart device, which will foster greater awareness of the app.

What I’ve noticed with many apps, though, is that the brand icon doesn’t often appear past that point. In some cases, it makes total sense. An app isn’t like a website that needs that steady logo anchor so users can always quickly get “Home”. But…

I can’t help but feel like small branded elements throughout could add a unique touch to the experience. They wouldn’t detract from the experience. Instead, they’d show up in bite-sized chunks that add something extra to the experience.

One example I really like is the CheapOair app. This is the logo that appears when a user first opens it. It’s the same one that appears at the top of the corresponding website:

Now, if you were to look at the app store page for CheapOair or how it appears on a user’s home screen, you’d see that the full logo isn’t used. Instead, users see the luggage-shaped “O” icon:

It’s unique. It’s memorable. And it works well in tiny spaces, like as the desktop favicon or on smaller mobile screens.

Now, for an app like CheapOair that aggregates travel listings from different airlines, hotels, car rental agencies and so on, it’s only natural to expect some lag time as users move through the app. And while the designers could’ve used a more traditional loading icon (like the spinning wheel or progress bar), it uses its branded icon instead:

The stamps are in the shape of a moon. It’s not officially part of Hotels.com’s branding, but it’s a very recognizable icon for its rewards members.

Because of this recognizability, its placement within hotel search results pages is helpful as it allows users to quickly scroll through and see which hotels they can earn another stamp with:

There are many different factors that users consider when booking a hotel room, including price, distance, average user rating and so on. But rather than bog down the main listing with this extra detail that’s only relevant to rewards members, the use of the icon and its placement in the bottom-left corner of the image for eligible hotels is a good choice.

So, even if you don’t feel like using the actual brand logo within the app (or find no reason to), this example proves that there are other ways to use brand-adjacent iconography to improve the experience.

2. Use Icons To Encourage More Gestures And Actions

One of the keys to retaining more app users is to give them a reason to regularly engage with it. And if your users can’t remember which gestures to use when they’re inside the app or they find the act of interacting with it to be boring, that may be enough reason for them to go looking for apps that do a better job of capturing their attention.

Even if your users don’t have any problem with how the engaging elements are presented to them, what happens if someone they know suggests an app that they like better? And they see how much more they like the presentation of different elements?

Either way, you don’t want to give them a reason to lose interest or look for greener pastures. And I think that icons added to gestures and clickable targets can help with this.

This, for instance, is the Boomerang for Gmail app:

I needed a way to “pause” my Gmail inbox during the workday (to prevent distractions) as well as in my off hours (to keep myself from working). While there are a number of distraction-blocking tools available, I loved the simplicity and elegance of this one. I especially appreciated this sorting gesture.

There’s no need to open the message and use the options bar to select the right option. When messages appear in my inbox, it takes no more than a second to swipe left and take action because of how clearly labeled they are. And because I use this app every day, my finger automatically knows which icon to flick the message to: archive, mark as read, Boomerang (for another day/time), move or delete.

Again, if you can make engaging with an app go more smoothly — which, in this case, I attribute to the complex gesture simplified by recognizable icons — you’ll find users are more likely to use it.

Your app doesn’t need to have swiping gestures in order to play around with engaging icon design. Duolingo, for example, has brought its language modules to life thanks to these animated icons:

Have you ever read something online that was so good (or maybe even so bad) that you had to know who wrote it? For the most part, online publications just put a byline at the top and a short bio under the post. BuzzFeed, however, gives its author more than just name recognition. It pairs their byline with an iconized headshot.

This is a great touch. It tells readers from the get-go that they have real writers behind this piece and lets them connect to the writer on a more personal level.

It’s also just too easy for this detail to get lost on a page because of the title, subtitle, read-minutes and other metadata that publications put at the top. I’d say in terms of making an article more attractive and welcoming, even this small of an icon helps set the stage for an enjoyable reading experience.

Food service apps could probably benefit from this as well. Only, in this case, it would be food items and products that become iconized. Like what the SONIC Drive-in app does:

There was a study done by Durham University on the connection between images and satisfaction with a food order. The study looked at a number of variables, but this one is particularly relevant to what we’re looking at in the SONIC app:

“Our research revealed that if a restaurant wants to make use of imagery and visual prompts on their menu, this needs to be combined with commonly used and ‘accurate’ food names to increase marketing power. While it may seem a basic approach, photos can act as a positive reinforcement for customers who have made a visual connection that reflects the name of that dish.”

This is exactly what SONIC does in the above example. Rather than show one of their cups filled with the soft drink or show no photo at all, it displays the brand logos as icons beside each.

These brands are so deeply ingrained in the consumer consciousness that it will make the ordering process go much easier. It should also lead to greater satisfaction overall as there’s no surprise about what they’re getting.

Then, there’s the use case for marketplaces, like Rakuten:

This ebates app helps users make money off of their online purchases.

Now imagine if this app were just a text-only list of deals. Sure, it would still be usable and useful… but users would likely resort to the search bar to find deals as opposed to actually reading through what’s available. And if your users can only find what they want through search, there’s something wrong — especially if you’re presenting them with the hottest offers or products of the day.

I looked around and couldn’t find any ecommerce marketplace that does something like this — pairing a product or deal with a brand icon — which I find surprising. While I realize users can sort through listings by brand name, wouldn’t an iconized brand logo help users more easily locate items they want to buy from search results?

I guess the big argument against this would be for marketplaces pushing their own products (like Amazon does). By displaying a brand icon either in search results or on a product’s page, it might deter users from buying the item if it’s from a lesser-known and unrecognizable brand.

For concepts like Rakuten, however, it totally works and I’d urge you to use it when you can.

Wrapping Up

As you can tell by these examples, you’re not going to completely revamp the look and feel of your mobile app with icons. Instead, by adding very subtle touches here and there — that users are bound to take notice of — you’ll impress them with your attention to detail while making the overall experience more enjoyable. This, in turn, can lead to greater levels of engagement and higher rates of user retention.

Further Reading on SmashingMag:

Articles on Smashing Magazine — For Web Designers And Developers

Newer postsOlder posts
×

Powered by WhatsApp Chat

WhatsApp Chat is free, download and try it now here!

× Chat with Us