Skip to content
| Marketplace
Sign in
Visual Studio Code>Themes>StoryGuide IconsNew to Visual Studio Code? Get it now.
StoryGuide Icons

StoryGuide Icons

Amanpandey

|
3 installs
| (0) | Free
Dynamically assigns context-aware emoji icons to folders, reflecting their role in the project's architecture, workflow, and current status.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

StoryGuide Icons for VS Code

StoryGuide Icons revolutionizes project navigation and comprehension by transforming your VS Code explorer into an intelligent and narrative visual guide. It dynamically assigns context-aware emoji icons to folders, reflecting not just their names or contents, but also their role in the project's architecture, workflow, and current status. This creates a "story" of your project that unfolds visually, enhancing understanding, speeding up navigation, and improving overall developer experience.

Features

  • Context-Aware Icons: Icons are assigned based on folder role, content analysis, and project workflow.
  • Dynamic Updates: Icons change to reflect Git status, build states (soon), and other real-time project events.
  • Narrative Flow: Understand your project structure at a glance through a visual story.
  • Customizable: (Future) Define your own icon mappings and project type presets.
  • Enhanced Navigation: Quickly locate folders based on their visual cues.

How It Works

StoryGuide Icons analyzes your project structure, folder names, file contents (to a certain extent), and Git status to determine the most appropriate emoji icon for each folder.

  • src folder: Might get a 💡 (idea/source) or 🏗️ (construction) icon.
  • tests folder: Might get a ✅ (tests passing) or 🧪 (testing) icon.
  • A feature branch folder with changes: Might get a ✨ (new feature) or 🚧 (work in progress) icon along with a Git status indicator.

Getting Started

  1. Install the "StoryGuide Icons" extension from the VS Code Marketplace.
  2. Open your project in VS Code.
  3. Icons will automatically start appearing next to your folders in the explorer.

Configuration

You can configure StoryGuide Icons through VS Code settings (Ctrl+, or Cmd+,):

  • storyguide-icons.enableEmojiDecorations: (boolean, default: true) Enable or disable emoji decorations.
  • storyguide-icons.projectTypePresets: (object, default: {}) Define custom icon mappings for different project types (e.g., "Node.js", "React App"). (More detailed documentation on this to come).

Commands

  • StoryGuide: Refresh Icons: Manually triggers a refresh of the folder icons.

Contributing

Contributions are welcome! Please feel free to submit issues and pull requests.

License

MIT

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft