๐Ÿงญ Tell Your Projectโ€™s Story with StoryGuide Icons in VS Code

Aman PandeyAman Pandey
2 min read

๐Ÿ”ฅ Give your folders meaning. Let your codebase speak.

If youโ€™ve ever found yourself lost in a maze of folders while working in Visual Studio Code, you're not alone. Navigating large codebases can be a chore, especially when every folder looks the same. That's where StoryGuide Icons steps in โ€” a fresh, narrative-driven take on file organization.


๐Ÿš€ What Is StoryGuide Icons?

StoryGuide Icons is a free VS Code extension developed by Amanpandey that dynamically assigns emoji-based icons to folders based on their context, workflow role, and even current Git status. It turns your folder structure into a visual story โ€” one thatโ€™s instantly readable and easy to follow.


๐ŸŽฏ Why You Should Try It

  • ๐Ÿง  Context-Aware: Folders like src, test, or docs get meaningful icons like ๐Ÿ’ก, โœ…, or ๐Ÿ“š.

  • ๐Ÿ”„ Dynamic: Icons update in real-time with Git changes or workflow stages.

  • ๐Ÿงญ Intuitive Navigation: Instantly recognize what each folder represents.

  • ๐Ÿ“– Visual Storytelling: Your project becomes more than just code โ€” it becomes a narrative.

  • ๐Ÿ› ๏ธ Customization (coming soon): Map your own icons and project types.


๐Ÿ” How Does It Work?

Behind the scenes, StoryGuide Icons:

  • Analyzes folder names, some file contents, and Git metadata.

  • Assigns relevant emojis to each folder.

  • Updates icons automatically as your project evolves.

Example Mappings

FolderIconDescription
src/๐Ÿ’ก or ๐Ÿ—๏ธSource code, idea, construction
tests/โœ… or ๐ŸงชTest suite, quality assurance
feature-branch/โœจ or ๐ŸšงNew feature, WIP, Git-aware

โš™๏ธ Getting Started

๐Ÿงฉ Installation

  1. Open VS Code.

  2. Launch Quick Open with Ctrl+P.

  3. Paste this:

     ext install Amanpandey.storyguide-icons
    
  4. Hit Enter and you're good to go.

๐Ÿ”ง Configuration Options

Go to Settings (Ctrl+,) and search for storyguide-icons:

  • enableEmojiDecorations (default: true)

  • projectTypePresets for future custom setups


๐Ÿช„ Commands

  • StoryGuide: Refresh Icons โ€” Re-analyze and update all folder icons manually.

๐Ÿค Want to Contribute?

Youโ€™re welcome to jump in with suggestions or pull requests. Letโ€™s make VS Code friendlier โ€” one emoji at a time.

๐Ÿ”— [GitHub Repository (Coming Soon)]
๐Ÿ“ฌ Reach out to @Amanpandey for ideas and feedback.


๐Ÿ”— Share It, Star It, Use It

This extension is a must-have for:

  • Frontend and backend devs

  • Students organizing messy project folders

  • Teams who want visual clarity

  • Anyone who lives in VS Code and loves efficiency

โ†’ Try it now and bring your project to life.

0
Subscribe to my newsletter

Read articles from Aman Pandey directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Aman Pandey
Aman Pandey

I am a passionate software engineer specializing in backend development, and full-stack solutions. With expertise in Amazon Web Services (AWS), SQL & Databases, JavaScript, TypeScript, and Python, I build scalable, efficient, and high-performance applications. Currently pursuing Computer Science at Lovely Professional University, I thrive on solving complex challenges and delivering impactful solutions. Always open to collaborations, freelance projects, and tech discussions! ๐Ÿš€