Designers, get your hands on these 7 awesome icon kits. You’ll create better web and mobile wireframes in less time
When designers get together to create software, they’ve got a big advantage on their hands: icon kits.
They don’t need to waste time creating UI elements for their software from scratch. Couple icon kits with the thousands of documented design patterns out there and you’ll see designers can spend a lot of time solving problems instead of tweaking pixels. That’s the idea, at least.
Icons kits are a compendium of UI elements designers can use in their wireframes, mockups and prototypes.
They’re great because of the sheer variety you can find in the kits. Low battery icon? Check. Favorites icon? You got it. Placeholders? Duh!
So much money is wasted on poor process. Endless reworks are another big problem designers face. Who really wants to spend time reinventing the wheel when you can download a kit that’s got hundreds and thousands of shiny and perfect wheels? No one.
Justinmind has rounded up 7 of the best UI kits around so you don’t need to Google around. Download them. Use them. Save time. Focus on the stuff that matters — solving problems for your user. On we go.
Wireframe Sets on Flaticon
Flaticon is home to a feast of juicy pre-made SVG icons. The quality can be hit and miss because there are so many to choose from (literally over a million…).
Thankfully, even though there are millions of icons to choose from, they’re grouped.
As a creator of an icon set, you can upload your set as a group which makes it much easier for users to search through.
Alfredo Hernandez has a great set of 100 wireframe icons that’ll come in handy when it comes to drafting your own designs.
The icon set has everything you’ll need – placeholders for images, text, icons and other key UI elements. Perfect. And, they’re free. Even better.
Font Awesome Widget Library by Justinmind
Font Awesome is a collection of icons to suit any scenario. From social media icons, to brands all the way to media controls and beyond. It’s a great resource.
We’ve gathered the most popular and put them into a collection which you can use in your wireframes and prototypes. No more hunting on the internet for icons. They’ll all be there available to you in your widget palette after you download them.
There are 700 vector icons designed to Font Awesome standards. In the kit, you’ll find:
- Basic icons
- Media control icons
- Directional icons
- Text editor icons
Icons8 is another awesome icon set resource. They have over 76,000 are flat icons available in any format, size and color in 20 seconds.
All the icons are created by a single designer so there’s no issues when it comes to consistency — essential in any user interface.
There are a few extra goodies like editable vectors and a font generator but these must be paid for.
But for bog standard icons for your wireframe, you can’t go wrong with Icons8. You’ll also find glyphs of iOS, Android and Material Design, perfect for creating faithful and consistent designs.
Nolte Wireframe Kit
If you want a wireframe kit with a solid foundation in atomic design, then Nolte Wireframe Kit from Sketch App Sources is exactly what you need. It’s designed by Brad Balderas.
Atomic design is a method to create a robust and scalable design system. It starts from the bottom up using the most essential and fundamental mobile and web app components.
This type of design allows us to journey from the abstract to the concrete, in the words of Brad Frost, the creator of atomic design. You can watch Brad talk here:
The design thinking behind atomic design means your wireframes need to promote consistency and scalability from the beginning. There’s little room for fleeting trends with atomic design.
This kit will give you a good grounding as you start to create your own wireframes. The kit comes with molecules that you can use to create reusable templates in no time.
Mobile Wireframing Library by Justinmind
Developing a mobile and need a set of icons and placeholders? Awesome. This library has everything to create a good wireframe. There’s a classic hamburger, checkmarks, search icons and more.
When it comes to designing a successful mobile app, you need to get the essentials right from the get go. Combine these icons with the other components to create a consistent, well-designed wireframe. There’s iOS and Android icons so your designs will always be faithful and consistent.
The library includes fundamental wireframe components like:
- Headers & Footers
- Slide Menus
- Blogs & Social
Get your hands on it right here
Wireframing Sketch Symbols
Icons that show your app’s flow are essential. They help designers and non-designers understand the wireframe.
This small and curated icon set will empower to design a well structured flow and conceptualize the app you’re making.
This icon set by Mariusz Ostrowski is entirely customizable and you can flip and rotate the icons to your heart’s desire.
Free Wireframe Icons on Behance
This set of wireframe icons is fun and practical. Sure, you don’t need a pizza icon but it’s great to know it’s there.
Put the fun aside and this icon set is very well designed. This icon kit includes 90 vector icons at 32x32px and 50 icons in 16x16px.
You can see the drawing process behind the icon set too which makes it all the more interesting. The designers behind these icons have done a great job with the finished set
Free icon kits – that’s all folks!
A well stocked toolkit provides great peace of mind. It isn’t worth it to stress over the composition of a share icon when you can just download a bunch of kits where all the work is done for you.
When it comes to wireframing, you want to be quick and dirty.
Kiss goodbye to deadline anxieties and give yourself time boost with these X awesome UI kits.
You’ll design better this way, we promise.