help center

On this page

Custom icons

Last Update: January 14, 2024

Upload your own custom icons to your website using Elementor Pro’s Custom Icons feature. You can use Fontello, Icomoon, or Fontastic for the job.


Creating your font set

Fontello

  1. Go to http://fontello.com/
  2. Choose some icons, or upload your own custom SVG files
  3. Click the wrench. Add a CSS prefix. Make sure it’s unique
  4. Give your font a name
  5. Download the font (zip file) 

IcoMoon

  1. Go to https://icomoon.io/app
  2. Choose some icons, or upload your own custom SVG files
  3. Click on the ‘Generate Font’ tab
  4. Click the Preferences button
  5. Give your font a name
  6. Under ‘Class prefix’, give it a unique prefix
  7. Click the X to exit
  8. Click ‘Download’ to download your font (zip file) 

Fontastic

  1. Create a Fontastic account
  2. Select some icons or alternatively import your own
  3. To import click ‘Add More Icons’ in the top menu bar
  4. Click on the ‘Modify Font’ tab
  5.  Give your font a name
  6. Give your font a unique CSS Class Prefix
  7. Click Save
  8. Go to the ‘Publish’ tab
  9. Click ‘Download’ to download your font (zip file)

Installing your Font Set

In the WordPress dashboard go to:

  1. Elementor > Custom Icons
  2. Click Add New
  3. Drag & Drop your font zip file
  4. Enter your icon set name
  5. Click Update
  6. You will now find your new custom icons under the ‘Custom Icons’ area, where you’ll see your icon set name, icons number indicator and your unique CSS Prefix for each icon set. 
add new icon set Custom icons 1

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Wait! You get 30-Day Money-back Guarantee

You have nothing to lose – but the discount

days
hours
minutes
seconds