Skip to content
Supernova

Add Icons to External Links

1 min read

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

Step-by-Step Guide

Section titled Step-by-Step Guide

  1. Install the rehype-external-links ↗ package as a dependency:

    Terminal window
    npm add rehype-external-links

  2. Import the plugin and configure it in your astro.config.mjs file:

    astro.config.mjs
    import rehypeExternalLinks from "rehype-external-links";
    

    export default defineConfig({
      markdown: {
        rehypePlugins: [
          [
            rehypeExternalLinks,
            {
              content: { type: "text", value: " ↗" },
            },
          ],
        ],
      },
    });

    Optional: Add target and rel attributes
    You can configure external links to open in a new tab with security attributes:

    export default defineConfig({
      markdown: {
        rehypePlugins: [
          [
            rehypeExternalLinks,
            {
              target: "_blank",
              rel: ["nofollow", "noopener"],
              content: { type: "text", value: " ↗" },
            },
          ],
        ],
      },
    });

Example

Section titled Example
src/content/docs/example.mdx
[Google](https://google.com)

This will generate the following HTML output:

Google ↗

Resources

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