System icons

10 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€92.85
List Price:  €130
You save:  €37.14
£79.68
List Price:  £111.56
You save:  £31.87
CA$136.70
List Price:  CA$191.38
You save:  CA$54.68
A$151.38
List Price:  A$211.94
You save:  A$60.56
S$134.98
List Price:  S$188.98
You save:  S$54
HK$781.15
List Price:  HK$1,093.64
You save:  HK$312.49
CHF 90.48
List Price:  CHF 126.67
You save:  CHF 36.19
NOK kr1,087.35
List Price:  NOK kr1,522.33
You save:  NOK kr434.98
DKK kr692.92
List Price:  DKK kr970.11
You save:  DKK kr277.19
NZ$166.35
List Price:  NZ$232.90
You save:  NZ$66.55
د.إ367.25
List Price:  د.إ514.16
You save:  د.إ146.91
৳10,943.35
List Price:  ৳15,321.13
You save:  ৳4,377.77
₹8,337.18
List Price:  ₹11,672.39
You save:  ₹3,335.20
RM473.95
List Price:  RM663.55
You save:  RM189.60
₦123,487.65
List Price:  ₦172,887.65
You save:  ₦49,400
₨27,847.21
List Price:  ₨38,987.21
You save:  ₨11,140
฿3,675.50
List Price:  ฿5,145.85
You save:  ฿1,470.34
₺3,235.04
List Price:  ₺4,529.19
You save:  ₺1,294.14
B$507.19
List Price:  B$710.09
You save:  B$202.90
R1,850.71
List Price:  R2,591.07
You save:  R740.36
Лв181.51
List Price:  Лв254.13
You save:  Лв72.61
₩135,590.93
List Price:  ₩189,832.73
You save:  ₩54,241.80
₪371.66
List Price:  ₪520.34
You save:  ₪148.68
₱5,705.78
List Price:  ₱7,988.32
You save:  ₱2,282.54
¥15,304.96
List Price:  ¥21,427.56
You save:  ¥6,122.60
MX$1,696.83
List Price:  MX$2,375.63
You save:  MX$678.80
QR364.06
List Price:  QR509.70
You save:  QR145.64
P1,358.38
List Price:  P1,901.79
You save:  P543.40
KSh13,211.65
List Price:  KSh18,496.84
You save:  KSh5,285.18
E£4,788.95
List Price:  E£6,704.73
You save:  E£1,915.77
ብር5,723.72
List Price:  ብር8,013.44
You save:  ብር2,289.71
Kz83,591.64
List Price:  Kz117,031.64
You save:  Kz33,440
CLP$94,219
List Price:  CLP$131,910.38
You save:  CLP$37,691.37
CN¥723.65
List Price:  CN¥1,013.14
You save:  CN¥289.49
RD$5,794.19
List Price:  RD$8,112.10
You save:  RD$2,317.90
DA13,457.95
List Price:  DA18,841.67
You save:  DA5,383.72
FJ$225.30
List Price:  FJ$315.43
You save:  FJ$90.13
Q775.06
List Price:  Q1,085.12
You save:  Q310.05
GY$20,860.22
List Price:  GY$29,205.14
You save:  GY$8,344.92
ISK kr13,962.60
List Price:  ISK kr19,548.20
You save:  ISK kr5,585.60
DH1,005.73
List Price:  DH1,408.07
You save:  DH402.33
L1,766.28
List Price:  L2,472.87
You save:  L706.58
ден5,712.05
List Price:  ден7,997.10
You save:  ден2,285.05
MOP$802.57
List Price:  MOP$1,123.63
You save:  MOP$321.06
N$1,845.78
List Price:  N$2,584.16
You save:  N$738.38
C$3,670.67
List Price:  C$5,139.09
You save:  C$1,468.41
रु13,313.56
List Price:  रु18,639.52
You save:  रु5,325.95
S/372.22
List Price:  S/521.13
You save:  S/148.90
K385.44
List Price:  K539.63
You save:  K154.19
SAR375.01
List Price:  SAR525.03
You save:  SAR150.02
ZK2,689.66
List Price:  ZK3,765.63
You save:  ZK1,075.97
L462.03
List Price:  L646.86
You save:  L184.83
Kč2,326.92
List Price:  Kč3,257.79
You save:  Kč930.86
Ft36,193.38
List Price:  Ft50,672.18
You save:  Ft14,478.80
SEK kr1,078.64
List Price:  SEK kr1,510.15
You save:  SEK kr431.50
ARS$87,815.44
List Price:  ARS$122,945.14
You save:  ARS$35,129.69
Bs690.51
List Price:  Bs966.74
You save:  Bs276.23
COP$388,367.89
List Price:  COP$543,730.59
You save:  COP$155,362.69
₡50,962.55
List Price:  ₡71,349.61
You save:  ₡20,387.06
L2,463.20
List Price:  L3,448.58
You save:  L985.38
₲746,475.93
List Price:  ₲1,045,096.16
You save:  ₲298,620.23
$U3,821.56
List Price:  $U5,350.33
You save:  $U1,528.77
zł401.98
List Price:  zł562.79
You save:  zł160.80
Already have an account? Log In

Transcript

Okay friends we discussed before all the main bars, the nav bar, the toolbar and the tab bar, but not drinking bar. Anyway, now let's talk about the icons that are used in those bars. in iOS apps, icons have always been a great way to support text labels with a visual relationship to the PErforM action or to replace text completely. Often for very common actions such as New delete, etc. I always provide lots of system icons, also called small icons, representing common tasks and types of content to use in navigation bars, tab bars, toolbars homescreen, quick actions. It's a good idea to use these built in icons as much as possible because they're familiar to people.

So Let's go over the standard nav bar and toolbar icons. Note that you can use text instead of icons to represent the buttons in the navigation bar or toolbar. in the table below, the text based buttons will show text in the icon column. An action icon shows a modal view containing share extensions, action extensions, and tasks such as copy favorite or fine that are useful in the current context. You have seen it, it opens a flyout menu, also known as an action sheet that has all the extra stuff to do with the current situation like share place on homescreen and whatnot. And add I can create a new item.

A bookmarks icon shows app specific bookmarks camera icon takes a photo of video, or shows that photo library also opens an action sheet that displays a folder picker in a camera mode. Cancel closes the current view or adds an edit mode without saving changes. I can pose icon opens a new view in an edit mode. It can open for example a new message view in an edit mode. You can use this also to represent the creation of other items as well. Primarily I would suggest something document or text related though done, saves the state and closes the current view, or exits and edit mode.

Edit enters in edit mode in the current context. guidelines say that fast forward I can fast forwards through media playback or slides. But in iOS or music app for example, this I can skip to the next song doesn't just fast forward and organize I can move an item to a new destination such as a folder, a pause icon, pauses, media playback slides. Always store the current location when pausing so playback can resume later. Play I can begins or residence media playback or slides. Redo read does the last action that was undone or refresh icon refreshes content.

Use this item sparingly, as your app should refresh content automatically whenever possible. Rewind icon moves backwards through media playback or slides. In music app, it goes back to the previous song. Save saves the current state or search icon displays the search field. A Stop icon stops media playback or slides, a trash icon you guessed it deletes the current a selected item and do and does the last action. quite obvious is will will they all of this you can use these icons for skipping forward And backward, and for increasing or decreasing the speed of the playback as well.

It depends on the context of your app. If you need to have both increasing the speed and skeaping, you will need to come up with a couple extra icons. Here are the examples of text based buttons used in the navbar and the toolbar. Edit, save them cancel. Note, there's also a back arrow icon that usually works together with back text, or preferably with a text that depends on your apps hierarchy. Like back to mailboxes here.

I just want to highlight the way these buttons work. They work together and in different combinations. Here we have an edit and back to mailboxes buttons, for example. In the toolbar at the bottom, we have a create new Email button. Well, when you answer Through the new email mode for example, the cancel and save buttons appear in your navbar. And canceling would dismiss the current model view and take you back to the previous view.

Same with other actions like that, for example for search, you can hit the cancel and go back to previous state of things. There's also a standard info button that you can use in the toolbar. Moving on to the tab bar standard items. Let's quickly go over each one of these. A bookmarks icon shows app specific bookmarks. A Contacts icon shows the person's contacts.

A downloads icon shows active or recent downloads. A favorites icon shows the person's favorite items. A featured item shows content featured by the app. Yes, this one looks the same as favorites icon which is kind of confusing. If you have both favourites and featured in your app. I would recommend to keep the star icon for the featured and use some other icon for the person's favorited.

Like a heart for example, a history icon shows recent actions or activity. More icon shows the additional tab bar items you know when they don't fit in the top bar. Our most recent icon shows the most recent items. Same thing here. Don't use it together with the history icon because they look the same. Most Viewed icon shows items most popular with all users.

Recent item shows items accessed by the user within a specific period of time. Same thing don't use to get the with the history and most recent a search icon enters the search mode shows a search section of your app for example, a top rated icon shows the highest rated items as determined by the users. Again, to choose the same icons for different things within one app, or at least within one view. That is my personal guideline for you. Now, let's go over the homescreen quick action items and add icon you guessed it creates a new item and alarm icon sets or displays an alarm. An audio icon denotes or adjust audio capture photo icon captures a photo and a capture video icon captures a video a cloud icon denotes displays or initiate a cloud based service.

I compose icon composes new, editable content. A confirmation icon denotes that an action is complete. A contact icon chooses or displays a contact. A date icon displays a calendar or a band or performs already Related action. A favorite I can do notes or Mars a favorite item. But in order in here we mean that quick actions might just give you some information.

In this case might show you a favorite item. That's what the note in means. Home icon indicates or displays a homescreen. indicates displays or browse to a physical home. An invitation icon denotes or displays an invitation. A location icon denotes the concept of a location or accesses the current geographic location.

Alert I can do notes or merge an item as lived mail I can create a mail message or Mark location I can do notes, displays or saves a geographic location. A message icon creates a new message. Odin notes the use of message A pause icon pauses media playback. Always store the current location when pausing so playback can resume later. Don't forget that kids play FM begins orgasms media playback. A prohibit icon denotes that something is disallowed.

For search I can enter the search mode, Share icon shares content with others or to social media. Shuffle icon indicates or initiate shuffle mode. A task icon denotes an uncompleted task or marks a task as complete. A task icon denotes an uncompleted task. A task completed icon denotes a completed task. Time icon denotes or displays a clock or timer.

An update icon updates the content you can change these icons colors Known as Tinder, to suit your apps color scheme, just as always, keep them consistent. And keep in mind that the delete or any other disruptive icons should be red, because it's danger danger high voltage

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.