Get help on Discord

How to add Sanity icon to portable text links instead of emoji?

7 replies
Last updated: Aug 15, 2022
user Y
I was following the guide you created for internal and external links and it says it will add an icon to the portable text. In your screenshot it seems to add the :sanity: icon. However, in Chrome and Safari I get this... How do I get the :sanity: icon? 😅
AI Update

Looking at the guide for internal and external links with Portable Text, I can see what's happening here! The screenshot in the guide shows a nice Sanity icon in the Portable Text toolbar, but you're getting an emoji instead.

The issue is that when you define custom annotations in your Portable Text schema, you need to explicitly specify an icon property to get that Sanity icon to show up. Without it, the editor falls back to a default icon (which appears to be that emoji you're seeing).

Here's how to fix it - when you define your annotation in your schema, import an icon from the @sanity/icons package and add it to your annotation definition:

import { LinkIcon } from '@sanity/icons'

// In your portableText schema:
marks: {
  annotations: [
    {
      name: 'link',
      type: 'object',
      title: 'External link',
      icon: LinkIcon, // Add this!
      fields: [
        {
          name: 'href',
          type: 'url',
          title: 'URL'
        }
      ]
    }
  ]
}

For internal links, you might want to use a different icon to distinguish them:

import { LinkIcon, DocumentIcon } from '@sanity/icons'

annotations: [
  {
    name: 'internalLink',
    type: 'object',
    title: 'Internal link',
    icon: DocumentIcon, // Or any other icon you prefer
    fields: [...]
  }
]

You can browse all available icons in the @sanity/icons package here. Popular choices for links include LinkIcon, ExternalLinkIcon, DocumentIcon, or even the Sanity monogram if you want that specific branding look.

Make sure your schema file has a .jsx or .tsx extension when using icons, and don't forget to install the package if you haven't already: npm install @sanity/icons

Show original thread
7 replies
What does your code for the internal link look like?
{
            name: "internalLink",
            title: "Internal Link",
            type: "object",
            fields: [
              {
                title: "Reference",
                name: "reference",
                type: "reference",
                to: [{ type: "post" }],
              },
            ],
          },
Got it! If you specify an icon using 
blockEditor
does it work?
Oh yeah specifying the icon works, but in the documentation it isn't specified and it has the sanity icon by default which I thought was pretty cool but can't seem to find that icon 😅
It used to just set the S icon by default! I'm not sure when it changed...
Time to look at the change history 😅 can the S icon be made available in the sanity icon library?
I can't find it in the icons package either! In the mean time, this SVG should work:
<svg width="16px" viewBox="0 0 654 869" version="1.1" xmlns="<http://www.w3.org/2000/svg>">
    <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
      <g id="sanity-logo-s-(1)" fill="currentColor" fillRule="nonzero">
        <path d="M343.36,744.64 C251.78,744.64 187.08,704.35 159.98,630.86 L0.46,630.86 C34.6,780.14 162,868.65 344.77,868.65 C453.44,868.65 546.21,830.93 600.45,764.96 C598.22,697.56 576,647.43 529,609.34 C513.78,693.66 445.35,744.64 343.36,744.64 Z" id="Path"></path>
        <path d="M320.67,123.39 C429.86,123.39 473.76,185.33 491.09,228.56 L643.69,228.56 C608.91,83.5 491.64,0.76 319.25,0.76 C214.4,0.76 124.31,39.4 71,107 C73.64,167.86 97.19,215.7 143.35,252.26 C160.62,172.94 227.15,123.39 320.67,123.39 Z" id="Path"></path>
        <path d="M436.38,381 L277.65,343.62 C234.863333,332.62 197.98,318.646667 167,301.7 C97.3,263.5 57.17,210 45.6,140 C45.17,140.87 44.76,141.76 44.34,142.63 C28.55,175.42 20.34,212.07 20.34,250.63 C20.34,371.11 89.02,445.51 230.34,478.08 L386.18,514 C432.4,526.19 471.41,540.84 503.74,558.49 C577.39,598.69 616.34,654.49 626.53,732.16 C626.9,731.44 627.25,730.71 627.61,729.99 C644.78,696.05 653.47,657.76 653.47,615.61 C653.49,463.53 535.43,404.08 436.38,381 Z" id="Path"></path>
      </g>
    </g>
  </svg>

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?