How to change the colour
Notion can’t change an image’s colour. Download the icon again in a new colour. For pages people view in dark mode, pick a mid-tone colour rather than black.
a 1-minute guide
How to use custom icons in Notion
Short answer
Hover over the page title, click Add icon, open the Upload tab and choose a PNG at 256 px.
Which file should I download?
PNG · 256 px
Notion page and callout icons are small squares. A 256 px transparent PNG looks crisp on every screen. For images inside the page, 512 px is plenty.
Step by step
-
Pick your icon and download it
Open the icon library and search for what you need, for example “rocket”. Click the icon, choose a colour, then click Download PNG and pick 256 px. Tip: a mid-tone colour (like our cobalt or tomato) looks good in both light and dark mode.
-
Open the icon menu
Hover over your page title and click Add icon. If the page already has an icon, click that icon instead.
-
Upload your PNG
Switch to the Upload tab and choose the file. It becomes the page icon, in the sidebar too.
-
Callouts work the same way
Click the icon at the start of any callout block, choose Upload, and pick your PNG.
-
Inside the page
Type /image, press Enter, choose Upload and pick the file. Drag the side handles to resize it.
How to resize it
Page icons are sized by Notion. For images inside the page, drag the handles on the left or right side.
Something not working?
My icon disappears in dark mode.
Black icons vanish on dark backgrounds. Re-download it in a mid-tone or light colour.
It looks blurry as a page icon.
Upload a bigger PNG (256 or 512 px).
Can I use SVG?
For page and callout icons, use PNG: it works everywhere in Notion, every time. Inside a page, an image block also takes an SVG, which is how an animated icon keeps moving in the browser and the desktop app. If a mobile app shows it standing still, upload the GIF instead.
a shortcut
Stuck? Let your AI help in Notion
Click Claude, ChatGPT, Gemini, Perplexity or Grok. We copy a ready brief (“help me add an icon to my Notion project”) that points it to our skill file and this guide, and open it for you. Tell it what the icon is for: it finds the right one, then walks you through adding, recolouring and sizing it.
Ready? Find your icon.
500 icons, twenty styles, all free.
Browse icons