Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
25 Million+
Websites using our plugins
Years of WordPress experience
WordPress tutorials
by experts

How to Add an External Link Icon on Your WordPress Site

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to add an external link icon to your WordPress site?

By clearly marking your external URLs, you can keep people on your site for longer, and make it clear that clicking on a particular link will open a new window or tab.

In this article, we will show you how you can add an external link icon to WordPress.

How to add an external link icon on your WordPress site

Why Add WordPress External Link Icons?

An external link icon is a small picture that appears next to a link that will take the user to a different website.

For example, you can scroll to the bottom of any Wikipedia post and see that most links in the References section have an external link icon.

An example of external link icons

By adding link icons to your WordPress blog, your visitors will easily be able to tell the difference between outbound links and internal links. Many sites also use external link icons to make it clear that the link will open in a new window or tab.

These icons can keep visitors on your site for longer and increase your pageviews since there’s less risk of them clicking on an external link and leaving your website by accident.

With that being said, let’s see how you can add an external link icon to your WordPress site.

How to Add External Link Icons in WordPress

The easiest way to place external link icons on your website is by using WP External Links.

You can use this plugin to add different images, Dashicons, and Font Awesome icons to your external links automatically.

An external link icon created in WordPress

First, you’ll need to install and activate the WP External Links plugin. If you need help, then please see our guide on how to install a WordPress plugin.

After that, just click on the new WP External Links setting in the left-hand menu.

The WP External Links WordPress plugin

If you get a popup asking you to upgrade, then you can simply click anywhere outside the popup to close it.

As you can see, the plugin can do a lot more than just add an external link icon to your site. For example, it can automatically add nofollow to all external links in WordPress.

WP External Links can also keep people on your site by opening all external links in a new window or tab. We recommend enabling this feature since many users assume links with an external link icon will open in a new window or tab, anyway.

To open all external URLs in a new window or tab, open the ‘Open external links’ dropdown and click on ‘each in a separate new window or tab.’

Open external links in a new tab or window

By default, WP External Links will apply this rule to every new external link that you create.

However, it can also scan your site and change any external URLs that you’ve previously added to your website. This will provide a more consistent experience for your users, so it’s a good idea to go ahead and click on the ‘Overwrite existing values’ box.

Overwrite the previous external link settings

Once you’ve done that, you’re ready to create an icon for your external links. To start, scroll to the ‘Choose icon type’ section.

Now you can click where it says ‘no icon’ to open the dropdown.

Selecting an icon type for your external URL

Your options are Image, Font Awesome, or Dashicon.

Both Font Awesome and Dashicon come with a single box-with-arrow icon that you can use as your external link icon. This icon will always appear blue on your site, as you can see in the following image.

An example of an external link dashicon

This is the exact icon that many websites use for their external links, so most visitors will understand what the box-with-arrow icon means.

However, ‘Image’ lets you choose between several box-with-arrow icons including some that have a slightly different style and color.

In the following image, you can see an example of how a colorful box-with-arrow icon will look on your WordPress website.

An Image-based external link icon

If you want to add a colorful link button to your site, then you’ll need to select ‘Image’ from the ‘Choose icon type’ dropdown.

You can then click on the one that you want to use for your external links.

Choosing an arrow icon for your external links

Once you’ve done that, open the ‘Icon position’ dropdown.

Here, choose whether the icon will appear on the ‘Right side of the link’ or the ‘Left side of the link.’ Most websites show the external icon to the right of the link.

Changing the position of your external URL icon

Do you want to use the standard blue box-with-arrow icon instead?

Then you can open the ‘Choose icon type’ dropdown and click on either ‘Font Awesome’ or ‘Dashicon’ instead.

Next, open the dropdown menu beside ‘Choose Dashicon’ or ‘Choose FA,’ and then click on the box-with-arrow icon.

Using a dashicon as an external link icon

Note: Both Font Awesome and Dashicons give you access to dozens of other icons. However, we recommend using the box-with-arrow icon as more people will recognize this as an external link icon.

After clicking on the Font Awesome or Dashicon that you want to use, you can specify whether it should appear to the right or left of the link following the exact same process described above.

When you’re happy with the external link icon you’ve chosen, simply click on ‘Save changes.’

The plugin will then add the link icons to all the external URLs on your site automatically.

Learn More Tips and Tricks to Customize Your WordPress Site

If you liked this article about customizing external link icons, then you may find the following tips useful.

For example, footnotes are a great way to provide additional information or citations without disrupting the flow of your text. We’ve got a helpful guide on how to add simple and elegant footnotes in WordPress to show you how.

Other than that, have you considered customizing the appearance of your links? Changing the color of your links can help them stand out from the surrounding text and make them more visually appealing.

Also, highlighting text is a great way to draw your readers’ attention to important information. We have a helpful guide on how to highlight text in WordPress to show you different methods you can use.

Looking to add a touch of elegance to your blog posts? Drop caps are large, decorative letters used at the beginning of a paragraph. They can add a unique and stylish look to your content.

Finally, improving your website’s navigation can significantly enhance the user experience. Breadcrumb navigation displays a user’s location within your website hierarchy, making it easier for them to find their way around.

Pro Tip: Want to create a beautiful website without all the hard work? Let our WordPress experts do it for you. Check out our WordPress Website Design services for more information.

We hope this article helped you learn how to add an external link icon to your WordPress site. You can also go through our complete guide on how to create a mobile-friendly WordPress site and our expert picks of the best drag-and-drop page builders for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

9 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Dennis Muthomi says

    As someone trying to build an online business, I’ve been following a blog that provide tips for solopreneurs.
    And they use external link icons on their sites, which I really like the look of.
    I was actually planning to hire a developer to add this feature to my own site, but thankfully I stumbled upon this excellent guide from WPBeginner first.
    Being able to easily add external link icons myself with the WP External Links plugin is a gamechanger.
    Thanks WPBeginner for another super helpful resource! :-)

  3. Ahmed Omar says

    Interesting post, personally I trust the site more when I see the external link icon, as the site has transparency
    I will add it to my site too
    Thank you

  4. Hemang Rindani says

    Nice article. Users stay on the website if the content satisfies their expectations. It is important use a CMS that helps to keep the website updated. WordPress is a great CMS that comes with easy interface to manage entire website. It provides add-on directory that helps to increase the website functionality. It is also easy to customize the modules in WordPress that satisfies any complex business requirements.

  5. Mark Klinefelter says

    Tried loading the plugin but it breaks my mashable social icons. Too bad, as the plugin looked useful.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.