• Chris MartinChris Martin, 6 years ago

    This method is really good when your interface changes colour, in Pocket Casts our icons sometimes adapt to the colour of the podcast artwork so I've been using this a bit recently.

    However, one issue we noticed: To get the colour picking working like this, your shapes need to be masks. When you export those assets as SVGs the masks are embedded, which isn't ideal. We ended up having to create a new version of each icon without the masks for exporting, not a huge deal but it was an extra step.

    3 points
    • Denis RojcykDenis Rojcyk, 6 years ago

      I've been playing with this idea in my template Blueprint and found out it isn't really worth the trouble.

      I don't know how many icons you manage, but since you use one set of icons as masks for the implementation and the other one for mockups it doesn't need to be that much of a hassle.

      But once you are working on an app with different coloured icons where they are not used as masks, its really convenient to set it up like mentioned in the article.


      It is a pain in the ass during export. Since there is no easy way to export all the icons at once you need to change the colour for every icon set manually and then export again.

      0 points
  • Daniel Cunha, 6 years ago

    Can someone help me? I've tried to use this technique with strokes but doesn't work at all. Should I convert every icon to outline? Or you know something to fix that easily?

    0 points
  • Adam Nelson, 6 years ago

    I've been doing this for a while now and it's fantastic.

    Unfortunately, I learned the hard way that once you convert the entire Material Design 950+ icon set to use this method Sketch slows to a complete crawl. I had to move the icons out into a separate file and only bring in the ones I need on a case-by-case basis.

    0 points
  • Jan SemlerJan Semler, 6 years ago

    Nothing really new, i do this all day, every day. But you will get problems to export these assets to svg. But there is a solution color the mask and make them exportable as well.

    0 points