20 website icon packs for awesome UX design
Finding the right icons is extremely time-consuming. So, we decided to bring you a top 20 selection. Less searching. More fun!
Website icons are a resource that every UX designer should have up their sleeve. Regardless of what kind of product you’re designing, you’re likely to need a few good icons here and there.
Today, we’re focusing on vector icons: their popularity has grown due to how handy they are. Oh, the wonder of not worrying about losing quality of the icon if you need to modify its size. In case you want to know more about how SVG files differentiate from regular font icons, check out this great blog post – and keep your favortie prototyping tool at hand!
We gathered website icons, both paid and free, that touch several industries and sectors, along with a few classics that will take your prototypes to a higher level. Check them out!
Positive impacts of having cool website icons in UX design
Website icons are the bread and butter of web design, and a part of about any interface. It’s nearly impossible today to navigate around the internet without spotting a few icons here and there – and it’s no wonder why. Here are some great positives of using icons in your next UX design project, while always respecting general UI design principles.
- Website icons help readability in any screen. Relying only on text can result in a crowded and boring page. Adding icons can help to guide the user’s eyes around the content, drawing attention to what’s more important.
- They are a great way to cut down text content in exchange for visual components – you just need to find the right icon for your message. Plus, users can understand the meaning behind a well planned icon much quicker in comparison to written text. They can also help in visual storytelling.
- You can incorporate them in your design system so that all the outcomes will be consistent and coherent. Being consistent in the use of your website icons helps users learn and anticipate characteristics of the product – building familiarity with the product quickly.
- They have the power to add personality and build on your brand image. Good use of website icons can add to branding and set the tone of communication between the brand and the user. Is it young, playful and casual? Is it formal, fancy and elegant?
- They can be a great starting point. Many of the icon packs listed on this post come with all the necessary files for you to modify the initial design so it fits perfectly in your design and your style. All you need is a good SVG editor.
Awesome paid website icon packs
1. Startup Bundle, by Flat Icons
The cute design with thin lines and pastel colors is adaptable and will easily fit many different styles. Aside from the cool design, the Startup bundle website icons are so complete in the topics they touch. With a total of over 800 individual icons, you’re bound to find an icon for your every need.
You’ve got contact us icons, communication icons, e-commerce related icons… It even comes with over 70 icons related to cryptocurrency! You can also purchase each set individually, although from a financial POV it makes more sense to buy the whole bundle.
Price tag: $35
2. Blueline Icons Set by Davooda
Another bundle that has an icon for your every need: Bluelines Icons. With beautiful shades of blue with grey and white, these could be the right move for your latest UX design masterpiece.
This bundle comes with all sorts of categories – from e-commerce, engineering to shipping and virtual reality. They are also editable so you can modify them in any way that suits your project.
Price tag: $40
3. Advanced Flat Web Icons by vasabii
This pack of website icons caught our eye, because it comes with the same set of icons with a full background (as can be seen below), with a rounded shape or with each icon isolated on plain white. This should make it even easier for you to find an icon that speaks to your design style.
Categories of the Advanced Flat pack include human psychology, the creative process, personal skills and brain activity. Pretty neat for any project that deals with the human mind, or something related to personal growth and education. Perfect for data-heavy projects, such as dashboard design.
Files come in several formats such as .eps or .svg. Each individual icon file comes in several sizes.
Price tag: $27
4. Shopping and e-commerce icons by kucingklawu
The Shopping and ecommerce set is a good choice for… you guessed it. E-commerce and anything related to shopping. With black lines and a great use of yellow to bring the icons to life, these are very versatile. Change the color to represent your brand, or make full use of the scalable vector files that accompany this pack.
With a total of 48 vector icons, you’ll get files in AI, EPS, SVG, PNG and PSD format.
Price tag: $7
5. Hand drawn weather icons by Creative Stall
These website icons are adorable, and a great way to add a casual and young vibe to your design. Use them as is, or add a pop of color to add even more flare. With a total of 50 icons, these are the perfect option for anyone who is designing an awesome weather app.
Files in the Hand drawn weather pack come in AI, EPS, JPG, SVG, CSH and PSD. Transparent files come in several different sizes.
Price tag stands: $8.
6. Travel and Landmarks Icon Set by iStar Design Bureau
For all you UX/Ui designers with projects in tourism and the travel industry. These website icons are great in their own right, but aside from that they also give you full autonomy to change their line thickness, color and shape.
The Travel and Landmarks Icon Set includes many of the world’s most famous landmarks, from Big Ben to the Burj Al Arab Jumeirah. It also has all the great icons you’d need to direct users in their search for their next holiday vacation spot.
Includes both individual and master files in all the commonly used file formats and sizes.
Price tag: $20
7. Caviar by Neway Lau
Here is a website icon pack for the minimalist in you. The Caviar icon set is perfect if you want to convey simplicity or elegance, boasting of smooth lines and well thought out details. If you want, fill in the icons for a solid look that still communicates a certain degree of minimalism in any UX design.
You’ll get 457 icons that come in SVG, PSD, AI and Iconjar files for each icon. Fully editable and adaptable to fit your next project like a glove. Win!
Price tag: $48
8. Academic Disciplines Education Icons by Good Stuff No Nonsense
These website icons are likely to be a good fit in any project involving education, self-improvement or learning. Each icon comes in four different styles: basic single color, full color, sticker background and regular background. That should give plenty of room to find the right icons for that special spot in your UX design.
With 127 different icon designs, the Academic Disciplines Education pack includes a whopping 508 icons in total!
Price tag: $28
9. Health Insurance Icons by Bismillah_bd
In case your UX design project deals with the health industry, this website icon pack might be the one for you. With thick lines and solid components, these icons are easy to modify and adapt to your needs. Icons come in two styles: in black and blue, or fully black.
Files in the Health Insurance pack come in EPS, AI, SVG and PNG for each icon.
Price tag: $8
10. Premium Social Media Icons by The Icons
These website icons are wonderful in their simplicity. This website icon pack manages to be original while still letting users recognize the icons instantly. A cool thing about this pack is that any updates that are done, including any new icons added, are delivered to you for free no matter when you make the purchase.
The Premium Social Media pack includes all the most common file formats, including SVG, for the 48 icons. Suitable for both iOS and Android.
Price tag: $3
Awesome free website icons
1. Dusk UI Icons by Icons8
This website icon pack has all the most handy icons for a classic interface. The files in the Dusk UI Icons pack are easy to personalize, and include in a total of 80 different designs. The style is playful, filled with soft colors that make each icon pop.
Completely free of cost, this pack brings you all the core concepts of UI design, from add to favorites, notifications, save as, all the way to thumbnails and horizontal settings mixer. Enjoy!
2. Simple line icons by Mirko Monti
It’s hard to beat the visual pleasing effect of icons that are simple in their design, and just like Caviar, these website icons prove it. Thin lines that are scalable to just about any size, these icons are minimalism done right. Also, the Simple line icons pack is completely free!
Files of icons come in AI, EPS, SVG and PSD.
3. Responsive and Mobile icons from Smashing Magazine
Smashing Magazine offered this cool pack with cute website icons to their readers a while back – and we love them for it. These website icons would be great for any UX design project that deals with mobile devices or responsiveness in general.
Designed by the people behind Iconshock and Designshock, the Responsive and Mobile icons set comes in two different options: a warm palette with tones of red and orange or a cooler palette with shades of blue and purple.
4. Tourist Icon pack by Gulnara Garifullina
With contrasting colors of blue and bright pink, this icon set is modern and almost futuristic in its style. The Tourist Icon pack has all the necessary icons for you to create a wonderful UX design for anything within the travel industry.
5.Cooking by Good Stuff No Nonsense
Here are 55 hand drawn icons of cooking utensils, food and kitchen electronics. The icons in Cooking by Good Stuff No Nonsense are all about the chalk lines and well planned details here and there – perfect for a friendly, casual and almost cozy vibe.
6. Mini Web Application Line Icon Set by Muhammad Quasim Ali
These website icons would be suitable for most UI design projects, from e-commerce to a music-sharing platform. Icons in the Mini Web Application Line Icon Set come in different styles, all of which can be personalized to suit your project.
7. Robots by Design Zone
These little robots are enough to make any AI or automation UX design project come to life in user’s minds. With a causal and very friendly look, they’re filled with personality and can be adapted to suit a wide range of products.
All 20 icons in Robots come with both linear and colored versions. As these are vector images, no need to worry about any icon not being scalable.
8. Social Media Icons by Good Stuff No Nonsense
You just can’t do without social media icons on any product nowadays. These are fun and quite unique in their design, while still being instantly recognizable by any user. We love the shadows that exemplify the tiny details in this website icon pack: Social Media Icons.
9. Nucleus by Daniel Seiler
This website icon pack stands out for the incredibly creative design. With extremely thin lines and white dots that draw the eye to strategic spots – the icons in Nucleus are a great option for any ultra-minimalist website design.
Files for all 320 icons are given in PNG (several sizes), SVG, EPS, Sketch and AI formats.
10. Money and Finance by Arshad Arshad
140 awesome icons for any project related to finance, accounting, insurance or just money in general. The design is all about solid icons that come in both colorful version with touches of green or a simpler black and white version.
The Money and Finance pack includes files in Ai, PNG and SVG formats – and includes 140 different icon designs in total.
The wrap up
Icons are an easy way to add life and make your design seem more fun and entertaining. They can set the tone and build on the brand identity while conveying important concepts to users – what’s not to love, right?
Now it’s up to you to decide if you’re willing to invest in any of the paid website icons we got on this post, or just snatch one of the free ones. Decisions, decisions!
Related Content
- UI design examples that bring some serious inspiration. From parallex scrolling to delicate animations - this list has it all to get you inspired!8 min Read
- The perfect web design portfolio is all about presenting yourself in the best light. Check out these guidelines, examples and practical templates!8 min Read
- Creating effective surveys is key to getting valuable feedback. This guide shows you how to plan your survey, write easy-to-answer questions, and design a user-friendly interface. We've covered everything from setting clear goals and knowing your audience to structuring questions and making the survey look so great that people will love to answer.23 min Read