Catppuccin Icons for Zed

Previews

🌻 Latte

🪴 Frappé

🌺 Macchiato

🌿 Mocha

Usage

1. Open Zed.
2. Open the command palette (Cmd+Shift+P) and enter zed: extensions.
3. Search for the Catppuccin Icons extension and install.
4. Enter icon theme selector: toggle in the command palette and select the Catppuccin Icons theme in your preferred flavor in the dropdown.

Angular files ending in .component.ts, .directive.ts, .guard.ts, .pipe.ts, or .service.ts use their corresponding Angular icons automatically. Other .ts files keep the TypeScript icon.

For monochrome icons, select a Catppuccin … Monochrome variant in the icon theme selector. Each variant uses its flavor's text color for file and folder icons, helping colored diagnostic indicators stand out.

Development

Details

Theme Generation

Get started by installing the following:

1. deno, zero-config runtime for typescript used to easily pull vscode-icons's fileIcons.ts definitions.
2. just, a simple command line runner.

Once installed, run the following to initialize the project & generate all JSON definitions in the icon_themes/ directory.

just setup
just build

Run cd src && deno test --allow-read build_test.ts after building to check the monochrome themes and their generated assets.

Publishing to the Marketplace

See the Zed documentation for more information.

💝 Thanks to

• tecandrew

 

Copyright © 2021-present Catppuccin Org