The Brand Designer makes it easy to update your Zen Icon set to match your brand's palette. 

You have a choice of creating either gradients to fill the icons, or solid blocks of color. Either way, you can also pick the opacity of the chosen color/gradient. 

To recolor the set, start by selecting "icons" with the radio button. Then, simply click in the first color field to pick any color you'd like for the gradient start. (Note that the colors along the bottom of the color picker are your chosen brand palette colors — a great place to start.)

Next, pick a second color for your gradient end. (Don't want a gradient? Just choose the same color for both fields, as in the example at the right.)

You can then experiment with different opacities in order to get just the look you are after. (Note that selecting an icon opacity (or color set) that is too light may introduce visibility issues, depending upon other color choices in your brand's palette and section backgrounds.)

Finally, click on "Hovers" to repeat the actions above in order to select your icon hover state.


Keep in mind that a differentiation between the normal and hover icon states is helpful, as several Zen actions are indicated witih the hover state icons. The watch (eye), favorite (star), and restrict (lock) icons, for instance, all use the hover state to visually indicate an 'on' state.