Icons

Use icons for types to display in the creation dialogue and when you're missing an media preview.

Each document type can be assigned an icon to illustrate its purpose. We recommend using an SVG file, but it can be any react component you like.

react-icons is a useful NPM package for open source SVG icons from collections like Font Awesome, Material Design, Typicons and Github Octicons. To see all the react-icons, check out https://react-icons.netlify.com/.

Gotcha

Since v1.150.8, Sanity no longer includes react-icons by default and you will have to install it as an NPM dependency yourself.

If you use an older version of Sanity, please note that this includes v2.x of react-icons, which uses a different import style from the latest v3.x shown in the examples.

Example

After including react-icons in your package.json with yarn add react-icons you can add it to your schema:

import { MdLocalMovies } from 'react-icons/md'
{ name: 'movie', type: 'document', icon: MdLocalMovies, fields: [ { title: 'Title', name: 'title', type: 'string' }, { title: 'Release Date', name: 'releaseDate', type: 'date' } ], preview: { select: { title: 'title', subtitle: 'releaseDate' } } }

Here we've added unique icons for each of our document types Movie, Person, Screening.

Was this article helpful?