Agent SkillsAgent Skills
therealchrisrock

Notion Icon Strategy

@therealchrisrock/Notion Icon Strategy
therealchrisrock
1
0 forks
Updated 4/7/2026
View on GitHub

This skill should be used when the user asks about "Notion icons", "page icons", "emoji icons", "icon consistency", "visual organization", "icon meaning", "database icons", "icon color coding", "meaningful icons", or needs to apply consistent, meaningful iconography to Notion pages and databases.

Installation

$npx agent-skills-cli install @therealchrisrock/Notion Icon Strategy
Claude Code
Cursor
Copilot
Codex
Antigravity

Details

Pathkm-notion/skills/icon-strategy/SKILL.md
Branchmain
Scoped Name@therealchrisrock/Notion Icon Strategy

Usage

After installing, this skill will be available to your AI coding assistant.

Verify installation:

npx agent-skills-cli list

Skill Instructions


name: Notion Icon Strategy description: This skill should be used when the user asks about "Notion icons", "page icons", "emoji icons", "icon consistency", "visual organization", "icon meaning", "database icons", "icon color coding", "meaningful icons", or needs to apply consistent, meaningful iconography to Notion pages and databases. version: 0.1.0

Notion Icon Strategy

A comprehensive system for applying meaningful, consistent icons across a Notion workspace. Icons should communicate purpose at a glance while maintaining visual harmony.

Icon Philosophy

Three Principles

  1. Semantic Meaning - Icons communicate what the page IS or DOES
  2. Visual Consistency - Related pages share icon patterns
  3. Cognitive Load Reduction - Users recognize meaning without reading titles

Icon Hierarchy

Level 1: Structural (PARA sections) - Fixed, memorable
Level 2: Domain (Areas) - Distinctive per responsibility
Level 3: Type (Database items) - Consistent within collections
Level 4: Unique (One-off pages) - Descriptive of specific content

Icon Types in Notion API

Notion supports four icon types:

// Standard Emoji
{ "type": "emoji", "emoji": "๐Ÿ " }

// External URL
{ "type": "external", "external": { "url": "https://..." } }

// Uploaded File
{ "type": "file_upload", "file_upload": { "id": "..." } }

// Workspace Custom Emoji
{ "type": "custom_emoji", "custom_emoji": { "id": "...", "name": "...", "url": "..." } }

Recommendation: Use standard emoji for maximum compatibility and minimal maintenance. Reserve custom/external icons for brand-specific needs.


PARA Structural Icons

Top-level PARA sections use fixed, instantly recognizable icons:

SectionIconRationale
Home๐Ÿ Universal "home base" recognition
Inbox๐Ÿ“ฅClearly "incoming/unprocessed"
Projects๐Ÿš€Active, forward momentum
Areas๐ŸŽฏOngoing focus/responsibility
Resources๐Ÿ“šKnowledge library metaphor
Archives๐Ÿ—„๏ธStorage/filing cabinet
Metaโš™๏ธConfiguration/system settings

Rule: Never change these icons. They become navigation landmarks.


Area Icons (Domain-Based)

Each Area gets a distinctive icon reflecting its domain. Choose icons that are:

  • Distinct from each other (no confusion between areas)
  • Memorable (consistent association builds over time)
  • Domain-appropriate (reflects the responsibility)

Recommended Area Icons

AreaPrimaryAlternativesRationale
Product๐Ÿ“ฆ๐ŸŽฏ, ๐Ÿ’ŽCore deliverable/output
Engineering๐Ÿ’ป๐Ÿ”ง, โš™๏ธTechnical work
Marketing๐Ÿ“ฃ๐ŸŽจ, ๐ŸŽฏCommunication/outreach
Operationsโšก๐Ÿ”„, ๐ŸญExecution/process
Finance๐Ÿ“Š๐Ÿ’ฐ, ๐ŸงฎNumbers/analysis
Design๐ŸŽจโœจ, ๐Ÿ–ผ๏ธVisual/creative
Sales๐Ÿค๐Ÿ’ผ, ๐Ÿ“ˆRelationships/growth
Support๐Ÿ›Ÿ๐Ÿ†˜, ๐Ÿ’ฌAssistance/help
Legalโš–๏ธ๐Ÿ“œ, ๐Ÿ”’Compliance/contracts
HR/People๐Ÿ‘ฅ๐Ÿง‘โ€๐Ÿคโ€๐Ÿง‘, ๐Ÿ’ผTeam/personnel

Area Icon Rules

  1. One icon per area - Never vary within an area
  2. Propagate to children - Subpages inherit area context through navigation, not icons
  3. Area dashboards - Use the area icon on the main area page

Database Item Icons (Type-Coded)

Items within databases should have consistent icons based on their type property. This creates instant visual recognition when scanning database views.

Resource Type Icons

TypeIconDescription
Spec๐Ÿ“‹Formal specifications, requirements
Guide๐Ÿ“–How-to documentation, tutorials
Playbook๐Ÿ“’Step-by-step procedures, runbooks
Reference๐Ÿท๏ธQuick lookup, glossaries, lists
Template๐Ÿ“Reusable formats and structures
Concept๐Ÿ’กExplanatory content, principles
Process๐Ÿ”„Workflow documentation
Policy๐Ÿ“œRules, guidelines, standards
Report๐Ÿ“ˆAnalysis, metrics, summaries
Archive๐Ÿ“ฆHistorical/deprecated content

Project Status Icons

Use colored circles for project status (visible in list/board views):

StatusIconMeaning
Not StartedโšชPlanned but not begun
Active๐ŸŸขCurrently in progress
On Hold๐ŸŸกPaused, waiting on dependency
Blocked๐Ÿ”ดCannot proceed, needs resolution
Completeโœ…Successfully finished

SECI Phase Icons (Knowledge Status)

Track knowledge maturity using SECI-based icons:

PhaseIconMeaning
Socialization๐Ÿ’ฌTacit, needs discussion/experience
Externalization๐Ÿ“Being documented, draft state
Combination๐Ÿ”—Synthesized, connected to other knowledge
Internalization๐ŸŽฏActionable, ready for application

Priority Icons

PriorityIconWhen to Use
Critical๐Ÿ”ฅMust address immediately
Highโฌ†๏ธImportant, do soon
Mediumโžก๏ธNormal priority
Lowโฌ‡๏ธNice to have

One-Off Page Icons (Unique, Descriptive)

Pages that don't belong to a database should have unique icons describing their specific content. Match the icon to the page's primary purpose.

Meeting & Communication

ContentIconUse For
Meeting Notes๐Ÿ—“๏ธScheduled discussions
Standup๐ŸงDaily syncs
Retrospective๐Ÿ”Review sessions
Workshop๐Ÿ› ๏ธCollaborative work sessions
Interview๐ŸŽคCandidate/user interviews
Announcement๐Ÿ“ขTeam communications

Decision & Planning

ContentIconUse For
Decision Recordโš–๏ธADRs, documented decisions
Proposal๐Ÿ’กIdeas for consideration
Roadmap๐Ÿ—บ๏ธFuture planning
Strategy๐ŸŽฏHigh-level direction
OKRs๐ŸŽชObjectives and key results
Post-mortem๐Ÿ”ฌIncident analysis

Creative & Ideation

ContentIconUse For
Brainstorm๐Ÿ’ญIdeation sessions
Sketchโœ๏ธEarly designs
Prototype๐ŸงชExperimental work
Research๐Ÿ”ŽDiscovery findings
InspirationโœจReference collection

Technical & Reference

ContentIconUse For
Architecture๐Ÿ—๏ธSystem design
Diagram๐Ÿ“ŠVisual documentation
API Docs๐Ÿ”ŒIntegration reference
Schema๐Ÿ—ƒ๏ธData structure
Changelog๐Ÿ“‹Version history
Troubleshooting๐Ÿ”งDebug guides

Operational

ContentIconUse For
Checklistโœ“Task lists
SOP๐Ÿ“‘Standard procedures
Escalation๐ŸšจEmergency contacts
On-Call๐Ÿ“žSupport rotation
Runbook๐Ÿ“’Operational procedures
Audit๐Ÿ”Compliance checks

Color Coding Through Emoji Selection

While Notion doesn't support icon colors directly, you can achieve color coding through careful emoji selection:

Warm Colors (Action, Urgency)

๐Ÿ”ด ๐ŸŸ  ๐ŸŸก ๐Ÿ”ฅ โš ๏ธ ๐Ÿšจ - Alerts, blockers, urgent items

Cool Colors (Stable, Reference)

๐Ÿ”ต ๐ŸŸข ๐Ÿ’š ๐Ÿฉต - Active, healthy, stable items

Neutral (System, Meta)

โšช โš™๏ธ ๐Ÿ”ง โฌœ - Configuration, settings, meta pages

Semantic Emoji Sets

Status Traffic Lights:

๐Ÿ”ด Blocked/Critical
๐ŸŸก Warning/On Hold
๐ŸŸข Active/Healthy

Progress Indicators:

โฌœ Not started
๐Ÿ”ฒ In progress
โœ… Complete

Quality/Health:

๐Ÿ’š Excellent
๐Ÿ’› Good
๐Ÿงก Needs attention
โค๏ธ Critical

Implementation Guidelines

When Creating New Pages

  1. Database items: Apply type-based icon from the relevant category
  2. Area subpages: Use content-appropriate unique icon (not area icon)
  3. Standalone pages: Match icon to primary content type

When Setting Up Databases

  1. Consider making icons automatic via templates
  2. Document icon meanings in database description
  3. Use consistent icon for all items of same type

Icon Maintenance

  1. Audit quarterly: Review for consistency
  2. Document changes: Update this guide when adding new patterns
  3. Onboard new members: Share icon meanings during workspace intro

Anti-Patterns to Avoid

Don't: Random Icons

โŒ Using ๐ŸŽ‰ for a meeting note just because you like it
โœ… Using ๐Ÿ—“๏ธ consistently for all meeting notes

Don't: Inconsistent Database Icons

โŒ Some projects have ๐Ÿš€, others have ๐Ÿ“, others have no icon
โœ… All projects have status-based icons (๐ŸŸข, ๐ŸŸก, etc.)

Don't: Overload with Meaning

โŒ ๐Ÿ”ด๐Ÿ”ฅโš ๏ธ๐Ÿšจ on one page (redundant urgency)
โœ… ๐Ÿ”ด for blocked status (single clear signal)

Don't: Icon-less Important Pages

โŒ Major area dashboard with no icon
โœ… Every navigational page has an appropriate icon

Quick Reference Card

PARA Structure:
๐Ÿ  Home  ๐Ÿ“ฅ Inbox  ๐Ÿš€ Projects  ๐ŸŽฏ Areas  ๐Ÿ“š Resources  ๐Ÿ—„๏ธ Archives  โš™๏ธ Meta

Resource Types:
๐Ÿ“‹ Spec  ๐Ÿ“– Guide  ๐Ÿ“’ Playbook  ๐Ÿท๏ธ Reference  ๐Ÿ“ Template  ๐Ÿ’ก Concept

Status:
โšช Not Started  ๐ŸŸข Active  ๐ŸŸก On Hold  ๐Ÿ”ด Blocked  โœ… Complete

Priority:
๐Ÿ”ฅ Critical  โฌ†๏ธ High  โžก๏ธ Medium  โฌ‡๏ธ Low

SECI Phases:
๐Ÿ’ฌ Socialization  ๐Ÿ“ Externalization  ๐Ÿ”— Combination  ๐ŸŽฏ Internalization

Additional Resources

  • references/emoji-semantics.md - Complete emoji meaning guide
  • references/icon-automation.md - Automating icons via templates/formulas

More by therealchrisrock

View all