Skip to content

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

Start by installing the rehype-external-links ↗ package using your favorite package manager:
- npm
- pnpm
- Yarn
- Bun
Terminal window
npm add rehype-external-links
Terminal window
pnpm add rehype-external-links
Terminal window
yarn add rehype-external-links
Terminal window
bun add rehype-external-links

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

// ...
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

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

The code above generates the following on the page:

Resources