VSCode Icons (Iconify JSON)

@iconify-json/vscode-icons is the VSCode Icons file-type and folder icon set distributed in the IconifyJSON format. It bundles more than 1,500 cleaned, optimised SVG icons as a single JSON data file that Iconify components, plugins and build-time tooling can consume without any runtime API calls. Because the icons are shipped as validated JSON rather than a bundle of loose SVGs, you can tree-shake exactly the icons you use and render them offline in any JavaScript environment.

What You Get

• Over 1,500 VSCode file-type and folder icons in a single IconifyJSON data file
• Full offline usage — no runtime requests to the Iconify API
• Tree-shakeable imports so only the icons you reference ship to the browser
• Compatibility with Iconify components for React, Vue, Svelte, Astro and more
• TypeScript typings via the @iconify/types package

Common Use Cases

• Rendering file-type icons in file explorers, IDE-style UIs and code viewers
• Adding folder and language icons to documentation or dashboard interfaces
• Building icon pickers that need a curated, consistent icon set

Under The Hood

Architecture - The package is a single IconifyJSON document (json/vscode-icons.json) that maps icon names to optimised SVG body strings plus shared metadata (viewBox, default dimensions, aliases). It is generated by the Iconify tooling in the iconify/icon-sets repository and consumed at build time or runtime by Iconify’s utils and framework components.

Tech Stack - Distributed as npm data with TypeScript typings from @iconify/types. The source repository is TypeScript, using Iconify Tools for validation and optimisation and vitest for tests.

Code Quality - Icons pass strict automated validation that strips scripts, external references and unknown elements, normalises colours to currentColor where applicable, and optimises paths. The repository is regenerated automatically several times a week, keeping the data current.

API Design - Consumption is trivial: import the JSON (or reference it through an Iconify component/plugin) and render by icon name. There is effectively no boilerplate, and the same data works across every Iconify integration.