If you have ever purchased a Notion template from my shop, RunawayShea, you may have noticed that the page icons all share a particular look. Soft pinks. A warm brown outline. Pastel accents that feel deliberate rather than random. People ask me about those icons more than almost anything else, so I want to pull back the curtain and explain the decisions behind them. This post is a behind-the-scenes look at the Notion template icon style choices that make that consistency possible.

This is not just about aesthetics. Every choice here is a design decision with a reason behind it.

It Started with the Palette

When I built the first template in this collection, I wanted it to feel like something you would actually want to sit with every day. Not clinical. Not corporate. Warm, organized, and a little bit personal.

The palette came first. I anchored everything around a soft blush pink as the primary fill, with a warm brown stroke at #d1b7a1 running through every single icon as the outline color. That brown was the key decision. It reads as neutral enough to work across different page backgrounds, but warm enough that it never feels cold or harsh. It ties everything together without being loud about it.

From there I built a full range of values within the pink family, from the lightest whisper at #ffeeeb all the way down to a deep dusty rose at #d7988e. Every shape in every icon uses that same light-to-dark system. Light fill on the main shape. Darker fill on the shadow side. Same brown stroke on the outline. That three-layer rule is what makes the set feel cohesive even when the subject matter changes completely, from a chess icon to a lotus flower to a theater.

The accent colors came later. Gold, blue, and sage green, each used only when the icon subject genuinely calls for it. A sun needs warmth. Leaves need green. The ocean needs blue. But the pinks and the brown are always there, holding it all together.

Why I Use SVG Only

I made a deliberate choice early on to work exclusively in SVG format. I will not deliver icon files in PNG, and I do not design with PNG in mind.

SVG is a vector format. It scales to any size without losing quality, whether you are viewing your Notion page on a phone screen or a 4K monitor. A PNG that looks fine at 48 pixels becomes blurry and soft at 96 pixels. An SVG at 48 pixels looks exactly as sharp at 960 pixels, because it is drawn mathematically rather than stored as a grid of colored squares.

The other reason is editability. When a customer wants to recolor an icon to match a different template, they can open the SVG in Affinity Designer, Figma, Illustrator, or even a plain text editor and swap the hex values directly. There are no layers to flatten, no exports to redo, no resolution decisions to make. The file is transparent and editable all the way down.

For digital product design, SVG is simply the more honest format. It does not hide its structure. It does not degrade. It does the same job at any scale.

Why I Use Flaticon with a Premium License

There are dozens of free icon sites. You can find SVG icons on open-source repositories, free tiers of design platforms, and community-contributed libraries at no cost. So why do I pay for a Flaticon premium license?

Two reasons: quality and clarity.

Quality. Flaticon has one of the largest curated libraries of flat-style illustrated icons available anywhere. The breadth of subject matter means I can find an icon for almost any page topic, from niche hobbies to productivity categories, without having to compromise on style. Free sites tend to have smaller libraries with less stylistic consistency between icon sets.

Clarity. When you buy a template from RunawayShea, you are getting assets that are properly licensed for commercial use. My premium Flaticon license covers that. Free icon tiers on most platforms require attribution, restrict commercial use, or have ambiguous terms that create risk for sellers and buyers alike. I do not want any customer to wonder whether the icons in their purchased template are legally clear to use. With a premium license, they are.

If you ever want to source your own matching icons from Flaticon to extend a template, you will need your own Flaticon account to make sure your usage is covered under the same terms. The free tier requires attribution on every use, which is not practical inside a Notion template.

The Notion Template Icon Style System Behind the Set

What I am really describing here is a design system, not just a color palette. A design system is a set of rules that govern how visual decisions get made, so that every new element you add feels like it belongs to the same family.

For my icon set, those rules are:

Every icon uses the warm brown stroke at #d1b7a1 on all outlines. Every filled shape uses a light base color and a darker shadow variant from the same color family. Pinks are always the primary fill. Gold, blue, and green are accent colors, used only when the content demands it. SVG only, always. Flaticon as the source library.

Those rules mean that when I add a new icon to the collection, I am not starting from scratch. I am applying the same decisions I have already made to a new subject. The new icon slots into the set without any negotiation.

That same system is what makes it possible for you to add matching icons to your own pages. The rules are simple enough to follow without being a designer. Find a flat-style icon. Download the SVG. Apply the palette. Set the stroke to #d1b7a1. The result will feel like it was always part of the template.

The Bigger Point

Good design is mostly invisible. When a template feels calm and cohesive, you rarely stop to ask why. You just feel more comfortable opening it. You feel less friction when you sit down to use it.

That is what the icon system is doing underneath the surface. It is not decoration. It is the reason the whole thing holds together visually, even as the content on each page changes completely.

Every icon in every RunawayShea template was made with these rules in mind. That consistency is intentional, and it is the reason customers ask me about the icons in the first place.

If you want to dig into the specific hex codes and step-by-step instructions for recoloring your own icons, the full color palette reference is in the FAQ help docs. And if you are looking for a template to start with, you can browse the full collection here in my shop.