How to Import Font Awesome Pro Icons Into Elementor

Getting Font Awesome Pro to work in Elementor

Font Awesome Pro icons appear in Elementor when you connect your Font Awesome account to Elementor and upload your license key. Elementor does not automatically include Pro icons — you have to authenticate your account first, then Elementor pulls the full Pro library into its icon picker. The process takes about five minutes and requires your Font Awesome kit URL or license key, which you find in your Font Awesome account settings.

If you already use Font Awesome Free in Elementor, Pro icons will replace the free set once you authenticate. You keep the same icon picker interface; Elementor just shows you more icons to choose from. If authentication fails, the most common reason is using an outdated kit URL or entering the key in the wrong field.

Key Takeaways

You need an active Font Awesome Pro subscription and your kit URL from your Font Awesome account dashboard to authenticate in Elementor.
Authentication happens in Elementor's settings under Integrations, not in your Font Awesome account, and takes effect when ready across all your sites using that Elementor license.
Font Awesome Pro icons appear alongside Free icons in Elementor's icon picker once authenticated, with no additional steps needed per page or widget.
If Pro icons do not appear after authentication, clear your browser cache and refresh the icon picker, as cached data sometimes blocks the update.

Finding your Font Awesome kit URL or license key

Log into your Font Awesome account at fontawesome.com and go to your account dashboard. Look for a section called "Kits" or "License" depending on your subscription type. If you are using a kit (the current Font Awesome method), you will see a URL that looks like https://kit.fontawesome.com/abc123def456.js — copy that entire URL.

If you have an older Font Awesome Pro account that uses a license key instead of a kit, go to your account settings and find the "License Key" field. It is a long string of letters and numbers. Either the kit URL or the license key works in Elementor; you only need one. If you cannot find either, check that your subscription is active and has not expired — Font Awesome disables kits and keys for lapsed accounts.

Connecting Font Awesome to Elementor

Open Elementor and go to the main menu. Click Settings (the gear icon), then select the Integrations tab. Scroll down until you see Font Awesome in the list. Click on it to expand the Font Awesome section.

Paste your kit URL or license key into the field that appears. If you have a kit URL, paste the full URL including https://. If you have a license key, paste only the key itself without any extra text. Click Save Settings at the bottom of the page. Elementor will test the connection when ready — if it succeeds, you will see a green checkmark or confirmation message.

If you see an error message, double-check that you copied the entire URL or key with no extra spaces at the beginning or end. Font Awesome keys are case-sensitive, so make sure you did not accidentally change any letters when copying. If the error persists, log back into your Font Awesome account and confirm the kit or key is still active.

Using Pro icons in your designs

After authentication succeeds, open any page in Elementor and add an icon widget or element that uses icons. Click on the icon picker (usually a small icon thumbnail or a button that says "Choose Icon"). The icon library now shows both Free and Pro icons in the same picker. Pro icons are marked with a small badge or label so you can tell them apart from Free icons.

Search for icons by name just as you would with Free icons. If you search for "star", you will see both the Free star icon and any Pro star variations available. Click any Pro icon to insert it into your widget. The icon renders on your live site when ready — no additional steps are needed.

Pro icons respect all the same styling options as Free icons: color, size, rotation, animation, and hover effects. If a Pro icon does not appear on your live site even though it shows in the editor, check that your Font Awesome kit or license is still active. Expired subscriptions sometimes cause icons to fail silently on the front end.

Troubleshooting when Pro icons do not appear

If you authenticated successfully but Pro icons still do not show in the icon picker, clear your browser cache and refresh the page. Elementor sometimes caches the old icon list, and a hard refresh forces it to reload. In most browsers, press Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac) to clear the cache and reload.

If Pro icons appear in the editor but not on your live site, the most common cause is that your Font Awesome subscription lapsed or your kit URL expired. Log into your Font Awesome account and verify that your subscription is active and the kit shows a green status. If the kit is inactive, reactivate it and wait a few minutes for Font Awesome's servers to update.

If you use multiple Elementor sites, authentication applies to all of them at once because it is tied to your Elementor account, not individual sites. If Pro icons work on one site but not another, check that both sites are using the same Elementor license. If they use different licenses, you need to authenticate separately in each one.

When to use Font Awesome Pro versus Free

Font Awesome Free includes over 2,000 icons and covers most common design needs: arrows, social media logos, interface symbols, and basic objects. Pro adds thousands more, including duotone icons (two-color designs), thinner line weights, and icons for specialized industries like healthcare and finance.

Use Pro if your design calls for a specific icon that does not exist in Free, or if you need the duotone style for a particular aesthetic. If Free icons meet your needs, there is no reason to pay for Pro — Elementor works equally well with both. Many professional sites use only Free icons because the library is large enough for most projects.

Frequently Asked Questions

Do I need Font Awesome Pro to use any icons in Elementor?

No. Elementor includes Font Awesome Free by default, which has over 2,000 icons. You only need Pro if you want access to additional icons or the duotone style. Free icons work in Elementor without any setup or authentication.

Can I use Font Awesome Pro icons without a subscription?

No. Font Awesome Pro icons require an active subscription. If your subscription expires, Pro icons stop rendering on your live site, though they remain in your Elementor editor as a visual reminder. You can replace them with Free icons or renew your subscription.

What happens to my designs if I cancel my Font Awesome Pro subscription?

Any Pro icons you used will disappear from your live site. They remain in your Elementor editor, but visitors will see a broken icon or blank space. You can replace them with Free icons or keep the Pro subscription active to maintain the design.

Can I use the same Font Awesome kit on multiple websites?

Yes. One Font Awesome kit works across all your sites. When you authenticate in Elementor, you are connecting to that single kit, so all sites using the same Elementor license can access the same Pro icons.

Why do my Pro icons look different on mobile than on desktop?

This usually happens when you set different icon sizes or weights for mobile and desktop in Elementor's responsive settings. Check your icon widget settings and look for any mobile-specific overrides. Font Awesome Pro icons themselves do not change between devices — the difference is in how Elementor displays them.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.