Every icon best practice you need to know

@adamfinley, a structure I’ve found helpful is to have an underlying “base” vector shape that controls the actual pictogram. This gets nested in frames of various sizes with auto layout applied (this is important if you use icons at different sizes and want the parent frame the icon is nested in to respond to changes the icon’s size, such as a button using auto layout).

The example you mentioned, arrows, are a particularly good at illustrating the benefits of using the base vector. Even if you’re designing the icon in another tool like Adobe Illsutrator, the “base vector” component lets you update multiple icons at once and ensure they’re all consistent.

icon structure

As you mentioned, you could also handle the change in direction (up, down, left, right) as a variant property! The base vector concept would still apply in that case too. The only drawback to it is it adds an extra layer in your icons, but I personally think the time saved in icon maintenance is worth it.

3 Likes