Replace Flatsome or Woocommerce Icons

In this guide, we're going to show you how to switch things up and give your site a fresh, modern vibe by changing those icons by Ionicons ones. It's easier than you think, so let's get started on making your website look just the way you want it!

We're going to use Ionicons Library which is a completely open-source icon set with 1,300 icons crafted for web, iOS, Android, and desktop apps.

Finding the icon classes' name

In order to replace the Flatsome or Woocommerce icon correcly, you must find what's the CSS class used by the icon. To know better what class is this, do the following:

1. Inspect the page (Use the shortcut control-shift-C on Windows or command-option-C on macOS)

2. Select the arrow icon in the right top corner of the page that appears on the "Inspect Panel"

3. Hover the mouse on the icon you want to find the class

Inspect Website Page

That's how you discover the icon class name. Or you can just scroll down here and see the Flatsome icon classes name.

If you don't find the icon in the list below, please use the first Inspect Page method above.

Flatsome Icon Class Structure

<i class="icon-[icon-name]"></i>

Flatsome Icon List

heart
twitter
facebook
envelop
tag
star
star-o
feed
map-pin-fill
checkmark
plus
instagram
pinterest
skype
search
dribbble
discord
expand
linkedin
pen-alt-fill
youtube
flickr
clock
phone
px
vk
tumblr
gift
play
menu
user-o
user
snapchat
chat
lock
google-plus
heart-o
whatsapp
shopping-cart
shopping-basket
shopping-bag
tiktok
twitch
x
equalizer
cross
telegram
certificate
angle-left
angle-right
angle-up
angle-down
eye
eye-blocked

Sample CSS Replacement Structure

To replace Flatsome or Woocommerce icons with your ones, add the CSS below on Appearance > Customize > Additional CSS and replace with the correct info.

/*Icon name*/
.icon-[icon_name]:before { /* Set the icon-name */
    content: '';
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url('wp-content/uploads/2024/01/image-name.svg'); /* Set the background image */
    background-size: cover;
}

Changing color of the SVG icon

To change the color of the SVG icon that you uploaded to your website, use the "filter" CSS sttribute like the code below whici was generated from this CSS Color Filter Generator:

    filter: brightness(0) saturate(100%) invert(5%) sepia(3%) saturate(255%) hue-rotate(314deg) brightness(95%) contrast(84%);

See a real example of a Facebook icon replacement:

/*Facebook icon*/
.icon-facebook:before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('wp-content/uploads/2024/01/logo-facebook.svg'); /* Set the background image */
    background-size: cover;
    filter: brightness(0) saturate(100%) invert(5%) sepia(3%) saturate(255%) hue-rotate(314deg) brightness(95%) contrast(84%);
}

This sample code above might not work with other icon libraries.

Ready! Heaven's the limit for your creativity.