Free iOS Icons UI kit for enhanced iOS prototyping

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.

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

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

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

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.

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.

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:

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

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.

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.

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.

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

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.

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:

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.

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.

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.

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.

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.

Getting started designing beautiful and functional iOS apps is easy. All you have to do is follow these simple steps:

1. Download the Justinmind prototyping tool
2. Open Justinmind and start a new iPhone prototype
3. To the left of the screen you’ll find a Widgets panel
4. Start dragging and dropping widgets from the iOS Icons category!

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.

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.

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.

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!

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.

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

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.

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.

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!