Instruction file imported from chrisreddington/flight-school (.github/instructions/iconography.instructions.md). Copyright stays with the author.

Iconography Standards

Guidelines for consistent icon usage across Flight School's core concepts.

Core Concept Icons

Use these canonical icons for each concept throughout the application:

Icon Import Pattern

import {
  MortarBoardIcon,  // Skills
  FlameIcon,        // Habits
  CodeIcon,         // Challenges
  CheckIcon,        // Goals
  BookIcon,         // Learning Topics
  CopilotIcon,      // Chat Threads
  RepoIcon,         // Workspaces
} from '@primer/octicons-react';

Subtheme Icons

These secondary icons complement core concepts but don't represent primary types:

Anti-Patterns

Usage Examples

Correct Usage

// ✅ Challenge tab with correct icon
<UnderlinePanels.Tab>
  <CodeIcon size={16} /> Challenge
</UnderlinePanels.Tab>

// ✅ Goal card with correct icon
<Label size="small" variant="accent">
  <CheckIcon size={12} /> Goal
</Label>

// ✅ Habits section with correct icon
<Heading as="h3">
  <FlameIcon size={20} /> Active Habits
</Heading>

// ✅ Success status (completed item)
<Label variant="success">
  <CheckCircleIcon size={12} /> Completed
</Label>

Incorrect Usage

// ❌ Wrong icon for Challenge
<UnderlinePanels.Tab>
  <FlameIcon size={16} /> Challenge  {/* Should be CodeIcon */}
</UnderlinePanels.Tab>

// ❌ Wrong icon for Goal
<button className={styles.filterBtn}>
  <RocketIcon size={12} /> Goals  {/* Should be CheckIcon */}
</button>

// ❌ Wrong icon for Goal label
<Label size="small" variant="accent">
  <CheckCircleIcon size={12} /> Goal  {/* Should be CheckIcon */}
</Label>

Size Guidelines

Use consistent sizes for icon contexts:

Special Cases

Difficulty Badges

Difficulty uses FlameIcon regardless of the item type:

<DifficultyBadge difficulty="advanced" showIcon /> {/* Uses FlameIcon */}

App Branding

Flight School logo uses RocketIcon:

<Link href="/" className={styles.logoLink}>
  <RocketIcon size={28} />
  <Heading>Flight School</Heading>
</Link>

Success vs Goals

• Goals (the item type): Use CheckIcon
• Success status (completed state): Use CheckCircleIcon

// ✅ Goal type indicator
<Label><CheckIcon size={12} /> Goal</Label>

// ✅ Success status indicator
<Label variant="success"><CheckCircleIcon size={12} /> Completed</Label>

Validation Checklist

Before committing icon changes:

• Core concept uses canonical icon from table above
• No duplicate icon meanings (same icon for different concepts)
• Size is appropriate for context
• Icon import is from @primer/octicons-react
• Consistent with existing usage in same component

References

• Primer Octicons - Icon library documentation
• primer-react.instructions.md - Primer React usage