Beautiful Icons for VS Code

A clean, modern, and professional file icon theme for Visual Studio Code. Beautiful Icons enhances your file explorer with simple, highly legible, and beautifully crafted vector icons.

Screenshots

[!NOTE] (Placeholder: Add a screenshot of the VS Code explorer showcasing the beautiful icons theme here)

Features

• Modern Vector Shapes: Distinctive shapes and crisp colors that look great on both light and dark themes.
• Language Support: Comprehensive coverage of major programming languages and markup formats.
• Specialized Folders: Beautifully colored and badged folders for common architectural patterns (e.g., src, components, api, routes).
• Framework & Config Files: Instantly recognize package.json, Dockerfile, .env, and more.
• Zero Configuration: Just install and go.

Supported File Types & Languages

Supported Special Files

The theme provides unique icons for the following configuration files:

• package.json / package-lock.json
• tsconfig.json
• README.md
• Dockerfile / docker-compose.yml
• .gitignore / .gitattributes / .github
• .prettierrc / .eslintrc
• Makefile
• LICENSE
• .vscodeignore
• .vsix

Supported Folder Icons

Distinctive folder icons make navigating large codebases effortless.

Supported folders include: src, app, components, pages, public, assets, images, icons, styles, css, utils, helpers, hooks, services, api, config, controllers, models, views, routes, lib, tests, docs, scripts, dist, build, node_modules, store, redux, context, graphql, apollo, db, prisma, migrations, types, interfaces, enums, workflows, .github, .vscode.

Default folder icons are provided for all other folders.

Example Project Tree

my-project/
├── .vscode/
├── node_modules/       # (Custom node_modules folder icon)
├── src/                # (Custom src folder icon)
│   ├── components/     # (Custom components folder icon)
│   ├── utils/          # (Custom utils folder icon)
│   ├── index.ts        # (TypeScript icon)
│   └── App.tsx         # (TypeScript icon)
├── public/             # (Custom public folder icon)
│   ├── index.html      # (HTML icon)
│   └── favicon.ico     # (Default file icon)
├── .env                # (Environment config icon)
├── .gitignore          # (Git config icon)
├── package.json        # (NPM package icon)
└── README.md           # (Markdown icon)

Installation

1. Open the Extensions sidebar in VS Code (Ctrl+Shift+X or Cmd+Shift+X).
2. Search for Beautiful Icons.
3. Click Install.

Activation

To set this theme as your active File Icon Theme:

1. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P).
2. Type and select Preferences: File Icon Theme.
3. Select Beautiful Icons from the list.

Development

Want to modify or build upon this theme? It's extremely straightforward since no build steps or bundlers are required.

Local Development

1. Clone the repository:

   git clone https://github.com/[placeholder-username]/beautiful-icons.git
   cd beautiful-icons
   

2. Open the project in VS Code:

   code .
   

3. Press F5 to open a new VS Code window (Extension Development Host) with the theme loaded.
4. Make changes to icons/icon-theme.json or replace SVG files in the icons/ folder, then click the Restart button in the debugger toolbar of the main window to see your changes instantly.

Packaging as a VSIX

If you want to install this extension locally or share it without publishing to the marketplace, you can package it as a .vsix file.

1. Install vsce (Visual Studio Code Extension Manager) globally:

   npm install -g @vscode/vsce
   

2. Package the extension:

   vsce package
   

   This will generate a file like beautiful-icons-1.0.0.vsix in the project root.
3. To install it, go to the Extensions view in VS Code, click the ... menu at the top right, and select Install from VSIX....

Contributing

Contributions are always welcome!

• If you want to add an icon for a language or framework, simply create an SVG and add the mapping in icons/icon-theme.json.
• Please ensure any added SVGs follow the same flat, minimalist vector design language.

Issues and Bug Reporting

If you find a bug, a missing file type, or an incorrect icon mapping, please report it: (Placeholder: Add link to GitHub Issues page here)

License

This project is licensed under the MIT License - see the LICENSE file for details.

Credits

Icons generated and designed specifically for this theme, heavily inspired by modern web and open-source brand guidelines.

Roadmap

• [ ] Add more niche framework icons (React, Vue, Angular, Svelte).
• [ ] Add file icons for configuration formats like .editorconfig and .nvmrc.
• [ ] Support expanded/open states for folders.

Enjoy your beautifully organized workspace!