How to Use Custom Icons in Flatsome WooCommerce Theme

Do you know how to use Custom Icons in Flatsome? If not, don’t worry, we’ve come up with a simple tutorial to use custom icons in the Flatsome theme. Custom Icons are widely used for better design of the website. Google is the most popular and widely used for custom icons among icon creators. You can use a vast number of icons from Google for absolutely free.  To use custom icons, you just need to copy some code and paste it to your site to use custom icons. 

Why Do You Need Custom Icon?

Flatsome provides a good number of icons to use for your website. But sometimes, you may need to use icons unavailable in the Flatsome theme. Or you may prefer the design of any other individual company.  There can be thousands of reasons for using a custom theme. So, it’s better to know how you can add custom icons. 

Does It Require Coding?

Don’t worry about the code; you don’t need to understand the code or any of the coding procedures. All you need is to select the code and copy it, then paste it in the appropriate place. If you want, you don’t even need to select and copy the code, the code will be auto-copied to your device by clicking on a copy button.  Adding a custom icon may seem a bit technical but it’s not. I can assure you, without any coding, you can add custom icons using only these 12 steps.

How to Use Custom Icons in Flatsome: 12 Steps Only 

Step 1: Go to Google Icon and find which icon you want to use.  Google font icon Step 2: Choose an icon and click on it.  A slider will appear on the right side, you can find an option named Web, click on it. Google font icon custom Step 3: Scroll down that section and find section Static icon font. You’ll find two sections of code there. Copy the first one manually or by clicking on the right of that section. Google icon for flatsome Step 4: Go to the WordPress Dashboard. Hover your pointer on the Flatsome. A section will appear. Click on the option named  Advanced. Custom Icons in Flatsome Step 5: A new window will appear. Click on the Global Setting. You’ll find a box with a heading of Header Script. Click on the box and paste what you’ve copied.  Custom Icons in Flatsome tutorial Step 6: Scroll down and click on the Save Changes Custom Icons in Flatsome WooCommerce Step 7: Scroll up and click on the Save Changes on the left again.  Custom Icons in Flatsome WooCommerce Theme Step 8: Go to the main website and hover the pointer on the Edit Page and click on the Edit with UX Builder. Custom Icons in Flatsome Step 9:  To add a custom icon below the title, click on the text. Custom Icons in Flatsome WooCommerce Theme Step 10: A new window with several options will appear. Click on the text box section. Step 11: Copy the 2nd code from step 3 and paste the code you copied. An icon will appear under the title. Click on Apply button to execute this setting.  Step 12: A new window will appear. Click on Update to save the new edit.  Final Preview: The icon will be displayed where we wanted to place it.


Adding a custom icon is super-easy. If you’re facing any issue, try from the beginning again and understand the process from scratch. For the sake of example, we’ve put the custom icon under a title, but this is not the only place to put your custom icon. Even you can also add payment option icons in the footer section too. You can add a custom icon anywhere on the website. All you need is to click on your desired place instead of the title in step 9 and follow the same process. You can also drop a comment about the difficulty you may face.  If you like the tutorial and want to work more in Flatsome, you may read our other Flatsome theme tutorial to be an expert. 


Hi, I’m Mohamed. I share delicious recipes that I have cooked and loved. I’ve been food blogging for over 10 years and have a Diploma in Nutrition. You will find many healthy recipes as well as my favourite comfort food on the blog because I believe in a balanced diet.

Related Posts

Ultimate Top 10 WordPress Paywall Plugins 2023

Are you looking for the best WordPress Paywall Plugin? WordPress paywall plugins are widely available, although not all of them are top-notch. Paywall plugins help you promote…

Start Booking Process with Availability Calendar Since Appointment Booking 1.19.0

With the release of the MotoPress Appointment Booking plugin version 1.19.0, we’ve introduced several significant improvements and enhanced flexibility to the booking form widget. Additionally, we’ve fixed bugs and implemented…

Discover Top 17 WordPress Community Themes 2023

Community or social gathering is an amazing platform where you can share your thoughts or ideas with your people. Here WordPress Community Themes can play a vital…

Ultimate Top WooCommerce Dark Theme in 2023

WooCommerce dark themes are a good option if you want your website to have a contemporary, melancholy atmosphere. Dark themes are sinister and enigmatic, whereas light themes…

WooCommerce Variable Product Attributes Setup 2023

Are you worried about how to create Radio, Label, Color, and Image Variation Swatches for WooCommerce variable product attributes? If your WooCommerce store sells a variety of…

Top Google Tag Manager WordPress Plugins 2023

Google Tag Manager WordPress plugin is a tag management plugin that can help you to put or update tags on your website. Using it, you will be…