Alright, let's now talk about the custom icons that you can design. By the way, in most cases, you will have to be able to design your own custom icons for your UI design work. So obviously enough, standard icons are not enough for your app, or you want to come up with different style for the icons, you need to design your own. Whether you use only custom icons, or a mix of custom and system icons, all icons in your app should be consistent in terms of size, level of detail, perspective, and stroke weight. If you want to come up with your own style, make sure you redesigned the standard icons as well then it's good to keep the metaphors the same though. I mean, like, keep the star shape favorites, but just designing a new chairs stylee one note that keeping the design within the IRS standards style will minimize the design and development for sources.

Here's some general recommendations for your icon design from the guidelines. Keep your icons simple and streamlined. Too many details can make an icon appear sloppy or in this, Rubble. indecipherable that's a fancy word for confusing. Thanks, apple, I learned something new. Also, make sure they are not easily mistaken for the system standard items.

That's right, users should be able to distinguish your custom icon from the standard icons at a glance. Also, they should be readily understood and widely acceptable. strive to create a symbol that most users will interpret correctly and that no users will find offensive. Yes, that means no middle finger icons and stuff like that people right? guidance also tell us not to use images that replicate Apple products. Apple warns us that Apple products are copyrighted and cannot be reproduced in your icons or images.

And so in general, we should avoid displaying replicas of devices. Also, because hardware designs tend to change frequently, and can make your icon look outdated. I don't know actually. In reality, everyone uses images of Apple products everywhere, for example, an iPhone macapp to showcase your app. I don't know who would die if you need to defeat somehow Apple product in your icon. I warned you about the corporate though, so it's up to you.

Okay, here are more details about the consistency of your icons. Whether you use only custom icons or a mix of custom and standard ones, as I said before, All icons in your app should look like they belong to the same family in terms of the perceived size, level of detail, and visual weight. Also, as much as possible, each icon should use the same perspective. And the same struck with a little side note, the visual weight is a measure of the force that an element exerts to attract the eye. Basically, it determines how much an eye is attracted to an object. Visual wear depends on many factors, not only the size, it also depends on color, position, etc.

So the rule of icon consistency is illustrated well by this example we have here. All these icons look like they belong to one single family. They all use parental perspective, except for a couple of those ones that depict the drover. You can change the perspective Little bit if it's necessary to clearly big the object that you want, but you should minimize that they have the same stroke weight. And they maintain the same visual weight and perceived size as much as possible by varying the actual size of the depicted elements. Note that the field icons have more visual weight, meaning that they attract more attention of the eye.

And that's why for example, that field for the camera icon is a bit smaller than the outline one. This is done to compensate and reduce the visual wait. The media player icons have more visual weight than the rest of the icons here. But they're usually used separately from the other ones. And they formed their own meaning groups so to say, so that's okay. If you wanted to, you could make them outline as well.

Then they would fit better in the family to make sure that all can have a consistent perceived size, you may have to create some icons different actual sizes. As I mentioned before, for example, the set of system provided icons shown here all have the same perceived size. Even though the favorites and voicemail icons are actually a bit larger than the other three items. irregular shapes appear smaller usually, and thus they have less visual weight. So to compensate, you need to enlarge the size. That's right enlarge the size.

If you're designing custom tab bar icon, you should provide two versions, one for the default appearance and one for the selected appearance. The selected appearance is often a filled in version of the unselected appearance, but some designs call for variations on this approach. Let's take a closer look into this Create a field in version of an icon that has some interior details, such as the radio icon here, invert the details, so they retain the prominence in the selected version. So those inside thenis word gray, and now they are white. The keypad icon also has interior details, but the selected version would be confusing and hard to recognize if its background was filled in and the circles became white outlines. So in this case, which is filled the whole thing with one color.

Sometimes, a design needs a slight alteration to look good when it's selected. For example, because the timer and podcast icons include open areas, the selected versions condense the strokes a bit to fit them into a circular enclosure. If I can become Sounds less recognizable when it's filled in. A good alternative is to use a heavier stroke to draw the selected version. For example, the selected versions of the voicemail and reading list items are drawn with a two point stroke instead of the one point stroke that was used to draw the unselected versions. Sometimes an icon shape has details that don't look good in a stroke outline.

When this is the case, is there is for the music and artists icons. You can use the field in appearance for both versions of the icon. It's easy for users to distinguish the selected and unselected appearances of such icons. Because of course the selected appearance has a different accent it color guidelines also state the following. Use transparency to define the icon shape. IRS ignores all color information Since there is no need to use more than one field color, you should not include any additional effects such as a drop shadow or inner shadows on the button item, because these are relics from previous iOS versions, as we know before the iOS seven redesign.

Of course, it's not the case if you're designing completely custom style icons, especially for games. For example, here we're talking about iOS standard style. And of course, use the anti aliasing. And don't worry, it's turned on by default in most traffic software. And if you want to create an icon that looks like it's related to the iOS icon family uses a very thin stroke to draw it. Specifically a one point stroke works well for most items.

And this is a two pixel stroke for double sided resolution. Also don't include text in the custom tab bar, I can pass it, the text comes in programmatically. Also, it is possible to tweak the position of the title for the tab bar icons. I suppose you could enlarge the margin between the icon and the title. That's what they mean here. Otherwise, I suggest to keep it standard as a center aligned icon with text.

And here are the icon assets size guidelines. The interesting thing is that they all say about such and such value. So aim for those sizes, but don't feel guilty for alternating a little bit if it is necessary.