Add Icons to External Links

This guides shows how to add icons to the end of each external link, so that visitors will know they are leaving your site.

Steps by steps

Section titled Steps by steps

1. Start by installing the rehype-external-links ↗ package using your favorite package manager:

   npm

   npm add rehype-external-links

   pnpm

   pnpm add rehype-external-links

   Yarn

   yarn add rehype-external-links

   Bun

   bun add rehype-external-links

2. Import the plugin into your astro.config.mjs file:

   astro.config.mjs

   // ...
   import rehypeExternalLinks from 'rehype-external-links'
   
   export default defineConfig({
     // ...
     markdown: {
       rehypePlugins: [
         [
           rehypeExternalLinks,
           {
             content: { type: 'text', value: ' ↗' }
           }
         ],
       ]
     },
   })

   You can add rel (and target) to external links like this:

   // ...
   markdown: {
     rehypePlugins: [
       [
         rehypeExternalLinks,
         {
           target: "_blank",
           rel: ["nofollow", "noopener"],
           content: { type: "text", value: " ↗" },
         },
       ],
     ]
   },

Example

Section titled Example

src/content/docs/example.mdx

[Google](https://gooogle.com)

The code above generates the following on the page:

Google ↗

Resources

Section titled Resources

1. Add icons to external links ↗
2. rehype-external-links ↗
3. Icons for external links ↗