Join Now

Trick: Change the Color of Any .PNG Icon in Muse!

We're commonly asked if the color of icons can be changed in Muse. The answer is YES! We call it the "inner glow" trick, and we've been using it for years. It works perfectly for any .PNG icon.

If you've downloaded our recent graphic packs: Social Icons 2.0 and Arrow Pack 1.0, you will notice that the icons are placed in folders containing .SVG files and .PNG files. The icons in the folders are identical; only the file types are different. If you want to change the color of an .SVG icon, you will need to use a graphic design application like Illustrator. But for .PNG files, color can be changed right in Muse Design mode.

Here's how:

Step 1. In Design Mode, select the icon.

Step 2. Click the "Effects" link in the top menu.

Step 3. Click the 3rd tab, Glow.

 

Step 4. Set the remaining options as follows:

Glow: Check this box

Color: Select the color you want your icon to be.

Opacity: Set to 100%

Blur: Set to 250 (maximum)

Inner Glow: Check this box

That's it! You've just changed the color of your icon.

One thing to keep in mind, is that much like most other elements in Muse, icons have states. There's a normal state, rollover state, mouse down state, and active state. If you like, you can set different colors for each state.

Note: the .PNG icons we provide always use transparency for background/negative space areas. That's always the best way to create icons. You may find that if you source .PNG icons from other places on the web, they may not use transparency. Meaning the "white" area you see in the icon example above was actually made with white color vs. transparency. The "inner glow" trick will turn the entire image one solid color. So definitely use .PNG files with transparency when possible.

 

Enjoy!

Brandon Wallace
Brandon Wallace / Boise, ID

Brandon Wallace, esteemed Widget Master, started with MuseThemes in 2014. He manages all of our widgets – new and old – all while maintaining an unflinching commitment to food, music, and craft beer.

Comments

Uli Landsherr
Uli Landsherr

Full width video / full browser width
So sorry, this widget will not run on my browser (safari) so what can I do ? cheers Uli

Post A Comment

Trusted by Web Design Business Pros

Join now to grow from our entire library of templates, widgets, and tutorials Join Now