catppuccin / vscode-icons

🦊 Soothing pastel icons for VSCode/VSCodium

Catppuccin icons

Previews

🌻 Latte

🪴 Frappé

🌺 Macchiato

🌿 Mocha

Features

• Soothing colors from the Catppuccin palette.
• Ever growing collection of language/technology specific icons.
• Look and feel consistency.
• Customization features (coming soon™).

Usage

Preferred method of installation

Install the extension from a Marketplace:

• Visual Studio Marketplace
• Open-VSX

Manual method for installation

Download the VSIX from the latest GitHub release. Open the Command Palette and select "Extensions: Install from VSIX...", then open the file you just downloaded.

Customization

Note

We also have a Catppuccin Theme!

Settings

We provide some options to further customize your catppuccin experience:

{
  // set to true to disable folding arrows next to folder icons
  "catppuccin-icons.hidesExplorerArrows": false,

  // set to false to only use default folder icon
  "catppuccin-icons.specificFolders": true,

  // set this to true to only use `Text` color for all icons
  "catpuccin-icons.monochrome": false
}

To see all available options, open your settings UI and look for Extensions > Catppuccin Icons.

Important

Changing settings regenerates/rewrites theme files and icons. It may take some time on lower spec configs. You may also be prompted to reload the window for changes to take effect.

Custom icon associations

You can also associate specific languagesIds/fileExtensions/fileNames/folderNames to icons and override the provided defaults:

{
  // custom languageId/icon associations
  "catppuccin-icons.associations.languages": {
    "typescriptreact": "typescript-react"
  },

  // custom extension/icon associations
  "catppuccin-icons.associations.extensions": {
    "spec.ts": "typescript-test"
  },

  // custom file/icon associations
  "catppuccin-icons.associations.files": {
    "vite.config.ts": "vite"
  },

  // custom folder/icon associations
  "catppuccin-icons.associations.folders": {
    "typings": "folder_types"
  }
}

Note

All icons available are listed in the previews. Custom/external SVGs are not supported, you may request icons.

Commands

We provide a set of commands to interact with the extension and icons if needed, they are prefixed with Catppuccin Icons::

• Factory reset settings: removes all customization and resets the theme to its factory defaults.

Requesting icons and features

To request a new icon or a specific feature, open an issue documenting everything needed, the more info the faster your request will be processed.

Contributing

If you are willing to contribute, new icons or features, refer to the contribution guide.

💝 Thanks to

• PraZ
• thang-nm

 

Copyright © 2021-present Catppuccin Org

vscode-icons's Issues

.clang-format file has an incompatible icon

Hi there! I found the .clang-format file icon type shown as Markdown. Could you check it, plz?

platform: macOS
vscode version: 1.79.0
catppuccin version: v0.16.0

Hiding arrows does not apply to file nesting

VSCode/Codium version

1.85.2

Extension version

1.4.0

Describe the bug

Hiding arrows in the explorer with the new option does not apply to file nesting (disabled by default in vscode).

This should be consistent with folder arrows.
Also it is harder to see that e.g. Cargo.toml is not inside target but actually in the project's root.

Biome icon

Type

• File icon
• Folder icon

Context and associations

Biome is a formatter, linter,... toolchain for web projects. I'd like to request a Biome icon for its configuration file.

The icon should be associated with the configuration file of Biome: biome.json (and biome.jsonc in the future).

Thank you!

References

website: https://biomejs.dev/
svg logo: https://github.com/biomejs/biome/blob/main/website/src/assets/svg/logomark.svg

[Question] Does the latest version contain icons from my work?

My icons: Catppuccin-Perfect-Icons

Icon request: Racket

hello!! this will be my last icon request, sorry if i'm stressing everyone out
it's for racket, on github, there are ~8.3k repos and ~188k files with racket, so it's not a very obscure language either

File extensions: .rkt .rkts .rktl .rktd & full list here!

[Icon Request] Different Icon for Go Test files

It would be nice to have a different Icon for Go test files to easier spot the file on a glance

Icon for Twig templating engine

Type

• File icon
• Folder icon

Context and associations

The language scope in Visual Studio Code is twig, and the file extension should be only .twig

References

Twig website

The logo is a little bit too tall to be an icon, but I think it can be a starting point, maybe shrinked down and made more "chunky", and with only one of the two "twigs".

As per colors, the Green of the Catppuccin Palette shoud be fine!

PWA .webmanifest

Icon

json

Context and associations

Web app manifests

A web application manifest, defined in the Web Application Manifest specification, is a JSON text file that provides information about a web application.

[Feature Request]: Swapping Icon Versions

Describe the feature

Hey VSCode-Icon Team!

It's nice to see you're actively working on updating Icons.
Though since using Catppuccin VSC-Icons, I've gotten used to the old variants (pre 1.0) and prefer them over the new versions.
Could there be a feature to switch between old and new versions of the icons?
Like having a secondary option like "Catppuccin Macchiato (old)", where Icons of v0.33.0 are being used, as well as newly added icons and associations?

Thank you for your work!

Add option to disable arrows

This is an excellent icon theme, but I find having arrows and folder icons redundant and a bit cluttered. Having an option to disable the arrows (and/or folder icons) would be really nice.

[Icon request] Nextflow

Hello!
Would be awesome to have an icon for Nextflow .nf files.
Relevant repo: https://github.com/nextflow-io/trademark.

Thank you so much! :)

[Icon request] HAML files icon

Please add support for HAML (.haml) files. It usually looks like a slingshot.
See official HAML website here

[Icon request] Org file icons

Do add support for .org file icons. Famously looks like so:

[icon request] swift

Hello guys! I would like to request an icon for .swift

Thanks for you attention!

Icon Request: .j2 Jinja Templates

Ansible uses the Jinja 2 Templates a lot.
https://palletsprojects.com/p/jinja/

The Logo itself doesn't really lend itself to an Icon, so probably an Icon that just uses j2 as it's text would make most sense

[Icon Request] Bun

Bun has recently hit 1.0 and it would be cool to have bun related icons for files like:

• bun.lockb
• bunfig.toml

Bun website

.ron file support (using existing rust icon)

Ron is rust object notation.

Add the possibility to set folders/files associations

In material-icon-theme extension, we can associate files with other's appearance:

"material-icon-theme.folders.associations": {
    "infra": "app",
    "entities": "class",
    "schemas": "class",
}

"material-icon-theme.files.associations": {
    "*.module.ts": "nest"
}

It would be interesting to see the same behavior in Catppuccin extension.

[Icon request] 💨 Tailwind CSS

Tailwind CSS has the VS Code language identifier tailwindcss and it can be manually assigned to CSS files that have this framework's specific syntax.

Here's their SVG logos.

Thank you :)

Unable to display the icon for the workspace folders

vscode 1.77.3

[Icon Request] ANTLRv4

Extensions: g4

SVG Logo:

<?xml version="1.0" encoding="utf-8"?>
<svg width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
    <path d="M14.177,7.278a2.08,2.08,0,0,1,3.041-.8A3.571,3.571,0,0,1,18.2,8.022c1.356,3.122,2.9,6.165,4.119,9.345.645,1.5,1.429,2.938,1.994,4.468a1.455,1.455,0,0,1-2.258,1.376c-2.8-1.572-5.628-3.094-8.385-4.731,2.009.008,4.018-.008,6.025.013a19.707,19.707,0,0,0-1.288-2.918c-.781-1.858-1.6-3.7-2.358-5.565a9.783,9.783,0,0,0-1.032,2.125c-1.3,3.182-2.87,6.241-4.136,9.435-.281.59-.424,1.344-1.035,1.69a1.447,1.447,0,0,1-2.094-.738c-.241-.61.151-1.2.382-1.743.779-1.725,1.645-3.413,2.283-5.2C11.65,12.8,12.916,10.041,14.177,7.278Z" style="fill:#fefefe"/>
    <path d="M13.817,2.2A13.923,13.923,0,0,1,29.526,12.549a13.733,13.733,0,0,1-2.082,11.519A14.074,14.074,0,0,1,7.738,27.293a13.852,13.852,0,0,1-5.615-9.483A14.152,14.152,0,0,1,3.451,9.85,13.961,13.961,0,0,1,13.817,2.2m.359,5.08c-1.261,2.762-2.526,5.525-3.762,8.3-.638,1.786-1.5,3.473-2.283,5.2-.231.542-.623,1.133-.382,1.743a1.447,1.447,0,0,0,2.094.738c.61-.347.753-1.1,1.035-1.69,1.266-3.194,2.833-6.253,4.136-9.435a9.783,9.783,0,0,1,1.032-2.125c.756,1.868,1.577,3.707,2.358,5.565a19.707,19.707,0,0,1,1.288,2.918c-2.007-.02-4.016-.005-6.025-.013,2.757,1.637,5.588,3.159,8.385,4.731a1.455,1.455,0,0,0,2.258-1.376c-.565-1.529-1.349-2.971-1.994-4.468-1.22-3.179-2.762-6.223-4.119-9.345a3.571,3.571,0,0,0-.982-1.544A2.08,2.08,0,0,0,14.177,7.278Z" style="fill:#e44a32"/>
</svg>

The color probably needs to be toned down to match the pastel palette.
Also: the red circle could be simpler, I guess (<circle .../>)

Icon Request: Solidity

Hello!

Solidity is a programming language for developing smart contracts.

It would be nice if there was an icon for files with the .sol extension.

Thank you for your time!

Icon request: APL

hello again!!
i've been programming with apl in vscode and then i noticed there is no catppuccin icon for that
it's probably because apl is an obscure language, but it'll be nice if we had an apl icon ^^

file extensions for APL: .apl

About the icon of GIT

First and foremost, I must express my admiration for this elegant icon theme.

I'm proposing a potential improvement related to the color of the "Git" icon.

Here's a modification I have come up with. By applying a single color to this icon, we could enhance its visibility and display effect.

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<style>:root {--ctp-rosewater: #f5e0dc;--ctp-flamingo: #f2cdcd;--ctp-pink: #f5c2e7;--ctp-mauve: #cba6f7;--ctp-red: #f38ba8;--ctp-maroon: #eba0ac;--ctp-peach: #fab387;--ctp-yellow: #f9e2af;--ctp-green: #a6e3a1;--ctp-teal: #94e2d5;--ctp-sky: #89dceb;--ctp-sapphire: #74c7ec;--ctp-blue: #89b4fa;--ctp-lavender: #b4befe;--ctp-text: #cdd6f4;--ctp-overlay1: #7f849c;}</style>
    <circle cx="50.017" cy="70.573" r="7.778" fill="none" stroke="var(--ctp-peach)" stroke-linecap="round" stroke-linejoin="round" stroke-width="5" paint-order="fill markers stroke"/>
    <circle cx="50.017" cy="28.35" r="7.778" fill="none" stroke="var(--ctp-peach)" stroke-linecap="round" stroke-linejoin="round" stroke-width="5" paint-order="fill markers stroke"/>
    <circle cx="71.222" cy="49.687" r="7.778" fill="none" stroke="var(--ctp-peach)" stroke-linecap="round" stroke-linejoin="round" stroke-width="5" paint-order="fill markers stroke"/>
    <path fill="none" stroke="var(--ctp-peach)" stroke-linecap="round" stroke-linejoin="round" stroke-width="5" d="m37.25 15.386 7.212 7.08m11.903 11.97 9.006 9.07" paint-order="fill markers stroke"/>
    <path fill="none" stroke="var(--ctp-peach)" stroke-linecap="round" stroke-linejoin="round" stroke-width="5" d="M50.026 36.592v25.552" paint-order="fill markers stroke"/>
    <rect width="71.97" height="71.97" x="34.726" y="-35.985" fill="none" stroke="var(--ctp-peach)" stroke-linecap="round" stroke-linejoin="round" stroke-width="5" paint-order="fill markers stroke" rx="8.612" ry="8.612" transform="rotate(45)"/>
</svg>

Additionally, a slightly deeper shade, like "#FA961E", might enhance the icon's appeal even further.

I respectfully request you to consider this suggestion, and I truly appreciate your time and effort.

Thank you,

Add Astro icon

Type

• File icon
• Folder icon

Context and associations

(from https://docs.astro.build/en/guides/configuring-astro/)

• astro.config.js
• astro.config.mjs
• astro.config.cjs
• astro.config.ts

References

https://astro.build/press/#assets

Add Eleventy icon

Type

• File icon
• Folder icon

Context and associations

(sourced from https://github.com/11ty/eleventy/blob/main/src/TemplateConfig.js#L72-L75)

• .eleventy.js
• eleventy.config.js
• eleventy.config.mjs
• eleventy.config.cjs
• .eleventyignore

References

https://www.11ty.dev/

https://github.com/11ty/11ty-logo/blob/master/img/logo.svg

Missing PHP icon

Type

• File icon
• Folder icon

Context and associations

After the v1.0.0 update, the icon for PHP files are missing. Was this intentional or not?

References

Before update (v0.33):

After update (v1.0.0):

Assembly icon

hii!!
i've noticed while writing some assembly code that catppuccin doesn't have an icon for it, is it planned?

file extensions for x86 ASM: .s .S .asm

[icon request] OCaml

Hello!

I would like to request an icon for .ml and .mli

Thank you for your attention!

Icon Request: CMakeLists.txt, xmake.lua, premake5.lua, *.meson and *.ninja

Would be nice for people who dont use makefile.

[Dotenv] More naming convention support

In NodeJS, Ruby,.... there sometimes we will see Dotenv file with naming convention: ".env.environment"

.env.development, ...
development.env, ...
settings.development.env, ...
.env, .env.staging, .env.production, ...

So I think we should support icon for these file name of Dotenv.

UPDATE: When change .env.name to an duplicated name. Ex: .env.js, it will take it icon:

But with Dotenv config, the file will treat as .env file:

[Icon Request] Nunjucks

Nunjucks is a templating language still used in some projects and by some SSG (e.g. Eleventy).

It would be nice to have an icon for it in this theme too :)

Usually it is rendered with the N and J together, like in this example from the Material Theme Icons.

[icon request] nix

Hello !

I would like to request an icon for .nix files.
Here is a relevant repository: https://github.com/NixOS/nixos-artwork.

Thanks.

[ICON REQUEST] Godot Icons

For file extensions: .gd (GDscript file), .tres/.res (A Godot Resource), .tscn/.scn (Godot Packed Scene) & to a lesser extent .godot (project file).

[Icon definition update] Storybook for typescript

Add the tsx file extension to the existing storybook definitions so typescript users can also see the icon in the right place

[Icon Request] Add support for Helm Chart.lock

While there is an icon for .helmignore, the Chart.lock of Helm is not recognized:

Add Assembly Icon

Type

• File icon
• Folder icon

Context and associations

This is to ask for an added "Assembly" icon for the assembly language.

References

An example that I personally liked that was the icon for the assembly language github topic:

[icon request] zig

Hi!

I'd like to request an icon for .zig files.
Relevant repository: https://github.com/ziglang/logo.

Thanks.

[Icon Request] request add more icons

PKief.material-icon-theme has many icons, but I really like Catppuccin.catppuccin-vsc-icons. So I want to be able to add more file and folder icons.
Here is a comparison of the files and folders I used:

Add icon for benchmarks folder

Love this icon pack. Would be awesome to have a custom icon for bench, benchmark, benchmarks directories.

P.S. How are these icons created? Is there a source file for the icons?

[Icon Request] drawio files

Extensions: drawio drawio.svg drawio.png drawio.html
Icon: https://github.com/jgraph/drawio/blob/dev/src/main/webapp/images/drawlogo-color.svg

Incompatible

When I try to install this from the marketplace, it says

Can't install 'catppuccin.catppuccin-vsc-icons' extension because it is not compatible with the current version of Visual Studio Code (version 1.68.0).

Equipment:
- Hardware
  - Mac Mini M1 2020
- Software
  - Ventura 13.2.1
  - VSCode
    - Version:  1.68.0 (Universal)
    - Commit:   4af164ea3a06f701fe3e89a2bcbb421d2026b68f
    - OS:       Darwin arm64 22.3.0

[Icon request] Liquid file icons

Please add support for Shopify Liquid (.liquid) files. Often times they look like a raindrop or wavy lines.

[icon request] terraform

Hi friends !

First I would like to congratulate you for this theme being really beautiful, if possible I would like to see the icon for terraform.

Thanks!

Publish to Open-VSX

Since Catppuccin for VSCode is on Open-VSX, this extension should be as well.

Icon request: Haxe

Thanks for the great icon set, would love to see support for Haxe files (*.hx, *.hxml) files if possible. Thanks!

Did C/C++ header files icon always look like this?

VSCode/Codium version

1.85.2

Extension version

1.8.0

Describe the bug

I've just noticed icons for .h are bit... large? Have they been always like this or not?

(I'm sorry if this isn't a bug. I couldn't find better place to ask about it)

Icon Request: Http files

http files are used by some http requests client extensions. e.g. rest client dothttp httpyac

Icon Request: Nim

Nim is a beautiful and powerful language.
Would you please add it into this extension <3

Any chance of greyscale?

That's it. Love the icons, but I don't like colors. 😄