How To: Hostinger Website Builder Adding Icons
Learn how to add icons to your website in the Hostinger Website Builder
DO IT YOURSELFHOSTINGER WEBSITE BUILDER
Jeremy Cerce
7/4/20263 min read
Need Help With Hostinger Website Builder?
Join the Hostinger Website Builder Community & Support group to ask questions, share your site, and connect with others.
Ready to Build Your Website with Hostinger?
Create your website using Hostinger Website Builder and receive 20% off eligible Hostinger products through my referral link.
Watch the Video Tutorial & Subscribe for More!
Prefer to follow along visually? Watch the complete walkthrough below and subscribe for more Hostinger Website Builder Tutorials!
1. Build
We meet and I learn everything about your business & brand. Then I get cooking on designs.
2. Launch
A polished site is ready to launch online to all platforms for your eager customers.
3. Grow
Time to make that $$$ and grow your online presence through ads & social media platforms.
Hostinger Website Builder - Adding Icons to your website FOR FREE
When I first started building websites with Hostinger Website Builder it always boggled my mind that there were NO ICONS! I had come from the WordPress world where almost every single theme or builder had a built in icon library that you could add and customize to your liking. Now don't get me wrong I would still rather use a workaround in HWB rather than use WordPress. Pretty quickly I was able to find a really good (and free) workaround for this missing element. I'm sure there are multiple different ways to do it, but this is probably the easiest in my opinion.
Step 1: Get the Icon!
Go to PhosphorIcons.com and take a look a their large library. Just scroll down and you'll start seeing the different icons they have. These are all free to use! The best part about it is that you have even more options to customize the icon before you download it. Choose a different boldness or a custom color of your choosing and then DOWNLOAD the Icon as an "SVG". SVG is a format that you may not be able to open on your computer, but make sure you keep track of where you downloaded the file.
Step 2: Add the Icon!
Now go into your HWB backend and go to the section where you want to add your icon. I personally like to put either a card or shape behind the icon to make it stand out a bit more, but you do you. Add an image element to your section, and resize it so a smaller square. Then edit that image, upload your new SVG Icon downloaded file and select it when it populates in your HWB media library. Then you can adjust it as you need to make it perfect.
Step 3: Experiment
Download a bunch of icons at the same time and then upload a bunch of them. This will allow you to experiment with different ones. There are really no further steps other than simply creating at this point. I hope this helped!
Need Help With Hostinger Website Builder?
Join the Hostinger Website Builder Community & Support group to ask questions, share your site, and connect with others.
Ready to Build Your Website with Hostinger?
Create your website using Hostinger Website Builder and receive 20% off eligible Hostinger products through my referral link.
Watch the Video Tutorial & Subscribe for More!
Prefer to follow along visually? Watch the complete walkthrough below and subscribe for more Hostinger Website Builder Tutorials!
Professional web design and management services for small businesses. Based out of Somerset, MA and serving Massachusetts & Rhode Island
© 2026 All rights reserved | Cerce Web LLC
Service Areas
Somerset, MA
Taunton, MA
Fall River, MA
New Bedford, MA
Brockton, MA
Service Areas
Seekonk, MA
Swansea, MA
Norton, MA
Massachusetts
Rhode Island