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 Font Awesome, Material Design, Typicons and Github Octicons. To see all the react-icons, check out https://react-icons.netlify.com/.


You can use react-icons out of the box without installing it as an npm dependency. Note that this is an older version that requires you to use the import syntax shown in the example. If you install the latest version of react-icons, you'll have to use this syntax:

import { MdMoveToInbox } from 'react-icons/md'


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

import MovieIcon from 'react-icons/lib/md/local-movies'
{ name: 'movie', type: 'document', icon: MovieIcon, 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?