Line Icons

Icons used in Mobile App Design: iOS

Before using any icons in any iOS App designs, try to follow the icon styles used in App Store.

Three set of icons needs to be given to developers for the app development(1x, @2x, @3x) respectively.

In any app there comes the top nav bar and bottom tab bar., holding the app primary navigational icons.
(! dunno in future !) how far, may be with out these bars apps may come :-)

And there was a time with Hamburger menus (hidden), every app hold this menu, now everyone is ready to banish the hamburger menus because there goes a deep research on the menu usability.
The research says hamburger menus are with
- Lower Discoverability
- Less Efficient
- Clash with Platform Navigation Patterns
- Not Glanceable
Read in detail on
Why we should avoid Hamburger menus?

Ok! Now let us back to line icons, the topic that we want to explore and discover.

Line icons

As mentioned earlier,
the top nav bar holds icons with size as follows in pixels
@1x — 22 x 22
@2x — 44 x 44
@3x — 66 x 66

the bottom tab bar holds the sizes as follows
@1x — 25 x 25
@2x — 50 x 50
@3x — 75 x 75

If you create icons of your own from your side, make sure the stroke values should be
@1x — 1px
@2x — 2px
@3x — 3px

When you tap any icon there comes the “active state” of the particular activity and the icon should be a filled one. Check the above added image showing the active — filled state (blue icon/text).

Let me curate few Free Resources for line icons:
- https://icons8.com/
- https://thenounproject.com/
- http://streamlineicons.com/free-icons.html
- https://www.behance.net/gallery/Line-icon-set-for-UI-more-Infinitely-scalable/10712283
- https://dribbble.com/shots/1272019-Thin-Rounded-Icons-2
- http://jlane.co/ios-8-line-icons/
- http://www.elegantthemes.com/blog/freebie-of-the-week/free-line-style-icons
- http://www.icojam.com/blog/?p=589
- https://dribbble.com/shots/1277721-Free-Vector-Icons-from-Chapps
- http://www.graphicsfuel.com/2013/12/24-ecommerce-line-icons-psd-ai/
- https://dribbble.com/shots/1391290-Budicon-48-free-line-icon
- http://www.pixeden.com/media-icons/tab-bar-icons-ios-7
- http://www.pixeden.com/media-icons/tab-bar-icons-ios-7-vol2
- http://www.pixeden.com/media-icons/tab-bar-icons-ios-7-vol3
- http://www.pixeden.com/media-icons/tab-bar-icons-ios-7-vol4
- http://graphicburger.com/simple-line-icons-set-vol-1/

A lot of good Paid Resources are also there, in the above list and you can search in web further :-)

And inside app as per creativity we can use line icons based on the product requirement from design point of view.

Use icons that user can understand better at once they eye on’em,.

Next let me write something on App Icons and next with App Store Screen-shots for App Store submission!

Written by: Jagadish Thanki
Design Showcase: Dribbble & Behance
Twitter handle: @jagadishthanki

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.