Free iOS Icons UI kit for enhanced iOS prototyping

iOS Icons UI kit - for iOS UI design

If you’re looking to design iOS apps that look authentic and engage your users, Justinmind’s iOS Icons UI kit is a must!

Are you looking to prototype a mint new iOS app but not sure where to start when it comes to iconography? Look no further than Justinmind’s iOS Icons UI kit.

Our kit has everything you need to fit every scenario for your iOS app prototype and keep you within the standards imposed by Human Interface Guidelines (HIG), so that you can concentrate on the bigger design picture. And do you want to know the best part? Apart from being free, our iOS Icons UI kit ensures you’ll be using a language that your faithful iOS audience will be vastly familiar with.

Download Justinmind and try our iOS Icons UI kit today!
Download Free

Read on to discover how you can save time with our iOS system icons, while making your app more intuitive for iOS users.

What is Justinmind’s iOS Icons UI kit?

The Justinmind iOS Icons UI kit comes pre-installed and consists of hundreds of readymade iOS icons featured in the HIG library.

Interested in learning about more kits like this one? Check out our myriad of other UI kits available on our website.

You’ll find that the Justinmind iOS Icons UI kit has you covered for every kind of possible scenario.

iOS Icons UI kit - reflects the latest Human Interaction trends

Latest trends

The best thing about our iOS Icons UI kit is that all icons reflect the latest HIG trends. Each icon consists of mostly unfilled, line design, solid glyphs. The symbols are more abstract and related to associative meaning as opposed to Apple’s earlier skeuomorphic designs.

Scalable vector glyphs

Our iOS Icons UI kit is also composed entirely of scalable SVGs. The fact that these iOS icons come as modifiable vector images means that you simply need to drag and drop them to the canvas and resize as you like, not worrying that they’ll lose their quality as you alter their dimensions.

You’re also free to add whatever sort of color you want, but you’ll want to be sure to keep things minimalist with only one color as per Apple’s guidelines.

iOS Icons UI kit - each icon is a scalable vector

What’s in Justinmind’s iOS Icons UI kit?

Our iOS Icons UI kit has both filled and unfilled vector icons to cover most scenarios in your iOS app designs. Your iOS users will recognize these icons more easily and be able to navigate your app more smoothly.

Here are just some of the types of iOS icons you can expect to find in our iOS Icons UI kit:

Utility

For practical icons such as wifi, mobile and bluetooth signal, menu icons, calendar, trash, radio buttons, camera control icons and many more.

Web and app browsing

Icons for browsing and navigation, either in apps or for browsers. You can expect to find backwards and forwards icons, icons for page loads, refreshing, sharing, downloading, as well as hamburger menus.

iOS Icons UI kit - icons for web and app browsing

Apple Maps navigation

You can also find all the typical icons associated with Apple Maps such as navigation icons like map pins, location pointers, compasses, signposts, as well as icons for various transport options.

Sign in

You can even find the special icons to denote face ID, touch ID and fingerprint ID to enable you to prototype sign in pages and security features.

Social media

You can expect to find the typical social network icons as well, such as Facebook, Twitter, Instagram and LinkedIn.

eCommerce

Our iOS Icons UI kit also has everything you need to prototype iOS apps with ecommerce features such gift icons, shopping baskets, food and restaurant icons, as well as currency symbols.

iOS Icons UI kit - icons for eCommerce

Why you need Justinmind’s iOS Icons UI kit

So why should you use Justinmind’s iOS Icons UI kit? Here’s a list of reasons why using our pre-installed iOS system icons can help take your iOS prototyping to the next level:

Speak your user’s language

Aside from keeping with HIG, by using our iOS Icons UI kit, you’ll also ensure that the icons you use in your iOS prototype can be understood by the majority of your iOS users, therefore drastically improving your iOS UI design.

Icons play a much bigger role than one might think in app design. It can be the difference between a user understanding how to use your app and having a smooth experience or getting frustrated and abandoning it.

iOS Icons UI kit - reduces the time and cost of prototyping an iOS app

Save time

Building iOS icons from scratch isn’t impossible, but can be time consuming, due to HIG’s long list of technical guidelines for creating the perfect icon. Given that you have those all-important icons taken care of with our iOS Icons UI kit, you can now set your attention to the fun part – designing your brand-specifics, such as color, typography and interactions.

Cut costs

No need to funnel your precious financial resources into building iOS icons from scratch. Our iOS Icons UI kit allows you to simply drag and drop the appropriate icon to the canvas; color, resize, add interactions if necessary and wrap it up!

Using our iOS Icons UI kit also means you’re far less likely to be caught out of pocket on development costs. This is because Justinmind will produce the relevant CSS code for each icon when it’s time for the developer handoff.

More focus on the user

Adopting a user-centric design approach is crucial to your iOS app’s success. The fact that you don’t have to go building iOS icons from scratch means you have more time to focus on the user’s needs and more time to spend on user testing.

Above we mentioned that your users are also more likely to understand icons taken directly from the HIG system, resulting in enhanced usability from the get-go.

iOS Icons UI kit - tab bar UI icons

Instill trust

Given the rigidness and scale of complexity of HIG, you need to be very careful when designing your iOS app to ensure that it sticks to Apple’s design rules. Normally iOS users have iPhones for a reason. They enjoy Apple, and that includes the iOS user interface. So why not design your app to marry with iOS? This will instantly instill trust your iOS users’ hearts and render your app more intuitive.

Prototyping a mobile app with Justinmind’s iOS Icons UI kit

Let’s look at an example of how we might prototype an iOS storage app using our iOS Icons UI kit. This app will allow the user to store various media files, such as music, images, documents and more.

The main feature of our iOS prototype will be a slide menu that creates a flat navigation system for the user to navigate freely between categories without any hierarchy.

The slide menu will be activated by a hamburger menu on top and it’s icons will link to the different categories of files in our app. In this example, we’re going to show you how to set up the slide menu and link to two different category screens.

iOS Icons UI kit - how to create a storage app using our kit

Slide menu

To set up the slide menu, you have two options: you can either drag and drop a Slide Menu Widget from the iOS Components library or add one manually.

For the first option, it’s a simple case of drag and drop, then any elements or components you add should automatically slide over with the menu On Tap when you simulate the prototype.

However, if you’d like to see how you can create your own from scratch, read on.

Create a slide menu from scratch

Drag and drop a Dynamic Panel just left of the canvas. Then drop a Rectangle right on top and resize it, so that it’s the same size as the canvas. We’ll naturally want to add in some content to that Rectangle because that’ll be the menu that the user sees. However, we’ll leave that aside for the moment and focus on the mechanics and functionality of the menu.

For the next step, we’ll drag and drop another Rectangle to the right of the canvas and resize it to match canvas’s dimensions. Making sure this it’s positioned below the Dynamic Panel in the Outline palette, we’ll add in the following event:

We’ll select On Tap and Show, then select the Rectangle in the palette, giving a fade out of 100ms.

To prompt the menu to slide in from the left, we’ll want to add in a hamburger menu from our iOS Icons UI kit. Next, we’ll check to make sure our Rectangle is inside the Dynamic Panel group. Then we’ll go back to our menu icon and add the following event:

We’ll select On tap and Move, then select the Dynamic Panel in the Outline palette and select easeInQuad, setting the X position to 0 pixels.

iOS Icons UI kit - how to create a slide menu

All going well, our slide menu should work when we tap the menu icon in a Simulation. All good? Now it’s time to add a reverse effect: we’ll make the menu disappear On tap.

To do so, we’ll add another Rectangle shape and resize it so that it has the same dimensions as the canvas. Next, we’ll check this Rectangle is below the menu icon and above the Dynamic Table. Then it’s simply a case of adding the following interaction:

Go to Events, then click the gear icon next to do and select Hide On tap. Make sure WITH previous is selected.

Now it’s time to add in some detail to our menu. We’ll add in some background color, drag and drop an Ellipse shape onto the menu and resize to use as a profile photo for the user. To add the photo, in Background, we click on Add image and upload one from the local drive. We then simply resize it and our profile pic’s good to go!

For further information on slide menus, see our tutorial on Prototyping a slide menu for your mobile app.

Now it’s time to add in our categories. We’ll drag and drop some icons over from the iOS Icons UI kit to represent the navigational options available to the user. It’s important that we alter the color to offset the icons against the background to make them visible. In our example, we’ve gone for a calming, blue and white color scheme.

Toolbar

Unlike Android, which has its own universal toolbar, this feature doesn’t exist on the iPhone, so iOS apps must have built-in navigation. For this reason, we’ll create a toolbar template that can be repeated across all pages.

For more information on how to create a template, see our tutorial on Templates and Masters.

For the toolbar, you can drag and drop one of the existing toolbar widgets from the iOS Components library, but for this example, we’ve created our own by simply using a line shape, dragging over some icons from the iOS Icons UI kit for “profile”, “files”, “download” and “back”.

Then it’s simply a case of adding in events to link them to the appropriate screens.

Categories

For our categories page, we’ll have a simple grid view comprising various iOS icons to depict the different media storage options available, followed by some copy for clarification. Next, we’ll drag and drop a line shape and search icon so that the user can directly search for files.

iOS Icons UI kit - creating the categories page

Files

This page will be for general files and will display various media categories, such as images and soundbytes. As you can see, this page is pretty easily put together if you can manage the “category page”. The only new stuff we’ve done is inserting a heart icon for adding files to favorites, placing two images on the screen.

And that’s it! We hope you’ve enjoyed this example.

iOS Icons UI kit - creating the toolbar navigation

Justinmind’s iOS Icons UI kit - try it out today!

HIG can be complex enough, so why complicate the matter any further? In our view, using Justinmind’s iOS Icons UI kit is a no-brainer.

Not only do you instantly have access to hundreds of iOS icons for every scenario imaginable, you’ll also save on coding costs and be able to spend more time focusing on your user. And did we mention your app will also look like the real deal?

Give our iOS Icons UI kit a test drive today and discover the benefits first-hand!

PROTOTYPE · COMMUNICATE · VALIDATE
ALL-IN-ONE PROTOTYPING TOOL FOR WEB AND MOBILE APPS
Joseph Downs
In-house UX copy-slinger, foodie and classic motoring enthusiast