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.

See also  How to Use Flatsome Studio to Create eCommerce Website Using Flatsome WooCommerce Theme


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. 


Subscribe To Our Newsletter!
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

Fintech’s biggest hits and misses of 2023

As 2023 comes to a close, we’re here to look back at the biggest fintech stories of the year. Silicon Valley Bank’s implosion felt like a fintech…

It’s critical to regulate AI within the multi-trillion-dollar API economy

Alex Akimov Contributor With two decades of tech leadership experience, Alex Akimov, former head of API at Adyen, now revolutionizes embedded finance at Monite by building best-in-class…

EU’s provisional deal on gig worker rights fails to get enough backing from Member States

Not so fast on that Christmas present for precarious gig workers in the EU: A political deal announced mid month, which aims to bolster platform workers rights…

Arduino exploring India manufacturing to limit counterfeit sales

Arduino is considering manufacturing in India. The startup, best known for its open source microcontroller boards, hopes to restrict the rise of counterfeit boards and cater to…

Top robotics names discuss humanoids, generative AI and more

Last month, I took an extended break. In a bid to keep my robotics newsletter Actuator (subscribe here) up and running, however, I reached out to some…

Pornhub owner pays US government $1.8M to resolve sex trafficking probe

Pornhub’s parent company Aylo Holdings will pay $1.8 million to the U.S. government to resolve a charge of profiting off of sex trafficking. The company, formerly known…