Sketch: Tint icons using nested symbols

Sketch: Tint icons using nested symbols

I always wanted to create a single version of an icon and apply different colors to, or tint it, to indicate its state, like active or disabled for example.

Create an icon and turn into a mask, then use a symbol to fill the mask. 
For symbol overrides in nested symbols to work the symbols must be of identical dimensions.

In this example the “icon” is used as mask and a symbol with the base tint is inside it.
Icon symbol and tints, or image fills
Override the nested symbol for an icon used as mask with another symbol to be used as fill
  1. Download the file.
  2. Edit the symbols and see how they are set up.
  3. Change color fills and see how they affect the icons.

Take it to the next level by using the same system for the outline of the icon. :)

If you have any tips on other ways to use smart symbols to achieve this effect shoot me an email at Francesco@FreeAndWilling.com or add a comment below. I appreciate your feedback.

If you learnt something from the file — pls like the post and share. If you are in NYC and are are into Sketch, Principle or InVision make sure to join the meetup.

Thank you :)

Francesco
@fbmore
@FreeAndWilling