Revamp icons a bit more

apps/docs/app/trees-dev/_components/TreesDevSidebar.tsx

@@ -16,6 +16,7 @@ const DEMO_PAGES = [
   { slug: 'drag-and-drop', label: 'Drag and Drop' },
   { slug: 'git-status', label: 'Git Status' },
   { slug: 'custom-icons', label: 'Custom Icons' },
+  { slug: 'icon-tiers', label: 'Icon Tiers' },
   { slug: 'header-slot', label: 'Header Slot' },
   { slug: 'context-menu', label: 'Context Menu' },
   { slug: 'virtualization', label: 'Virtualization' },

apps/docs/app/trees-dev/icon-tiers/page.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import type { FileTreeBuiltInIconSet } from '@pierre/trees';
+import { FileTree as FileTreeReact } from '@pierre/trees/react';
+
+const TIER_FILES = [
+  // Folder states
+  'closed-folder/placeholder',
+  'open-folder/placeholder',
+
+  // Standard tier — languages & common file types
+  'index.ts',
+  'app.js',
+  'App.tsx',
+  'style.css',
+  'page.html',
+  'data.json',
+  'README.md',
+  'main.go',
+  'main.py',
+  'app.rb',
+  'lib.rs',
+  'app.swift',
+  'script.sh',
+  'logo.png',
+  'font.woff2',
+  '.gitignore',
+  'config.mcp',
+  'notes.txt',
+  'data.csv',
+  'schema.sql',
+  'archive.zip',
+
+  // Complete tier — frameworks, brands, tooling
+  'Layout.astro',
+  '.babelrc',
+  'biome.json',
+  'bootstrap.min.js',
+  '.browserslistrc',
+  'bun.lock',
+  'claude.md',
+  'Dockerfile',
+  'eslint.config.js',
+  'schema.graphql',
+  'next.config.ts',
+  'package.json',
+  '.oxlintrc.json',
+  'postcss.config.js',
+  '.prettierrc',
+  'styles.scss',
+  '.stylelintrc',
+  'icon.svg',
+  'App.svelte',
+  'svgo.config.js',
+  'tailwind.config.ts',
+  'main.tf',
+  'vite.config.ts',
+  'settings.code-workspace',
+  'App.vue',
+  'module.wasm',
+  'webpack.config.js',
+  'config.yml',
+  'main.zig',
+
+  // Falls through to `default` token
+  'unknown.xyz',
+];
+
+const TIERS: { set: FileTreeBuiltInIconSet; label: string }[] = [
+  { set: 'minimal', label: 'Minimal' },
+  { set: 'standard', label: 'Standard' },
+  { set: 'complete', label: 'Complete' },
+];
+
+export default function IconTiersPage() {
+  return (
+    <>
+      <h1 className="mb-4 text-2xl font-bold">Icon Tiers</h1>
+      <div className="grid grid-cols-3 gap-6">
+        {TIERS.map(({ set, label }) => (
+          <div key={set}>
+            <h2 className="mb-2 text-sm font-bold">{label}</h2>
+            <div
+              className="overflow-hidden rounded-md p-3"
+              style={{
+                boxShadow: '0 0 0 1px var(--color-border), 0 1px 3px #0000000d',
+              }}
+            >
+              <FileTreeReact
+                options={{
+                  id: `icon-tier-${set}`,
+                  icons: set,
+                }}
+                initialFiles={TIER_FILES}
+                initialExpandedItems={['open-folder']}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}

apps/docs/app/trees/demo-data.ts

@@ -7,16 +7,25 @@ import type {
 export const sampleFileList: string[] = [
   'README.md',
   'package.json',
+  'bunfig.toml',
+  'stylelint.config.js',
+  '.browserslistrc',
+  '.oxlintrc.json',
+  '.github/workflows/ci.yml',
   'build/index.mjs',
   'build/scripts.js',
   'build/assets/images/social/logo.png',
   'config/project/app.config.json',
+  'public/404.html',
+  'public/favicon.ico',
+  'scripts/deploy.sh',
   'src/components/Button.tsx',
   'src/components/Card.tsx',
   'src/components/Header.tsx',
   'src/components/Sidebar.tsx',
   'src/lib/mdx.tsx',
   'src/lib/utils.ts',
+  'src/styles/globals.css',
   'src/utils/stream.ts',
   'src/utils/worker.ts',
   'src/utils/worker/index.ts',

apps/docs/app/trees/docs/CoreTypes/constants.ts

@@ -172,7 +172,7 @@ export const FILE_TREE_ICON_CONFIG_TYPE: PreloadFileOptions<undefined> = {
 // or inject your own SVG symbols.
 interface FileTreeIconConfig {
   // Optional: use one of the built-in sets, or "none" for custom-only rules.
-  set?: 'simple' | 'file-type' | 'duo-tone' | 'none';
+  set?: 'minimal' | 'standard' | 'complete' | 'none';
 
   // Optional: enable built-in per-file-type colors. Default: true.
   colored?: boolean;
@@ -213,7 +213,7 @@ interface FileTreeIconConfig {
 const options = {
   initialFiles: ['src/index.ts', 'src/components/Button.tsx'],
   icons: {
-    set: 'file-type',
+    set: 'standard',
     colored: true,
     spriteSheet: \`
       <svg data-icon-sprite aria-hidden="true" width="0" height="0">

apps/docs/app/trees/docs/Icons/content.mdx

@@ -4,12 +4,13 @@ Use the `icons` option inside `FileTreeOptions` to choose one of the built-in
 icon sets or inject your own SVG sprite. Try the live demo at
 [/preview/trees#custom-icons](/preview/trees#custom-icons).
 
-- `icons: 'simple' | 'file-type' | 'duo-tone'` — use one of the shipped icon
-  packs.
+- `icons: 'minimal' | 'standard' | 'complete'` — use one of the shipped icon
+  tiers. Each tier is cumulative: `standard` includes everything in `minimal`
+  plus language icons, and `complete` adds brands and tooling on top.
 - `set` — use the object form to combine a built-in set with `colored`,
   `spriteSheet`, or file-specific overrides.
-- `colored` — semantic per-file-type colors for built-in `file-type` and
-  `duo-tone` icons. Defaults to `true`; set `colored: false` to disable it.
+- `colored` — semantic per-file-type colors for built-in `standard` and
+  `complete` icons. Defaults to `true`; set `colored: false` to disable it.
   Override the palette with CSS variables like
   `--trees-file-icon-color-javascript`.
 - `spriteSheet` — an SVG string containing `<symbol>` definitions. It is

apps/docs/app/trees/docs/ReactAPI/constants.ts

@@ -89,7 +89,7 @@ export function IconSetTree() {
       options={{
         id: 'icon-set-tree',
         icons: {
-          set: 'duo-tone',
+          set: 'standard',
           colored: true,
         },
       }}

apps/docs/app/trees/docs/VanillaAPI/constants.ts

@@ -137,7 +137,7 @@ const fileTree = new FileTree({
     'package.json',
   ],
   icons: {
-    set: 'file-type',
+    set: 'standard',
     colored: true,
   },
 });

apps/docs/app/trees/tree-examples/CustomIconsSection.tsx

@@ -17,42 +17,36 @@ const panelStyle = {
   '--trees-search-bg-override': 'light-dark(#fff, oklch(14.5% 0 0))',
 } as CSSProperties;
 
-const simplePrerenderedHTML = preloadFileTree(
+const minimalPrerenderedHTML = preloadFileTree(
   {
     ...baseTreeOptions,
-    id: 'built-in-icons-simple',
+    id: 'built-in-icons-minimal',
     lockedPaths: ['package.json'],
-    icons: 'simple',
+    icons: 'minimal',
   },
   {
     initialExpandedItems: ['src', 'src/components'],
   }
 ).shadowHtml;
 
-const fileTypePrerenderedHTML = preloadFileTree(
+const defaultPrerenderedHTML = preloadFileTree(
   {
     ...baseTreeOptions,
-    id: 'built-in-icons-file-type',
+    id: 'built-in-icons-default',
     lockedPaths: ['package.json'],
-    icons: {
-      set: 'file-type',
-      colored: false,
-    },
+    icons: 'standard',
   },
   {
     initialExpandedItems: ['src', 'src/components'],
   }
 ).shadowHtml;
 
-const duoTonePrerenderedHTML = preloadFileTree(
+const completePrerenderedHTML = preloadFileTree(
   {
     ...baseTreeOptions,
-    id: 'built-in-icons-duo-tone',
+    id: 'built-in-icons-complete',
     lockedPaths: ['package.json'],
-    icons: {
-      set: 'duo-tone',
-      colored: true,
-    },
+    icons: 'complete',
   },
   {
     initialExpandedItems: ['src', 'src/components'],
@@ -67,12 +61,11 @@ export function CustomIconsSection() {
         title="Built-in icon sets"
         description={
           <>
-            Choose between the shipped <code>simple</code>,{' '}
-            <code>file-type</code>, and <code>duo-tone</code> icon sets. You can
-            also enable <code>colored: true</code>, override the built-in
-            palette with CSS variables like{' '}
-            <code>--trees-file-icon-color-javascript</code>, or fall back to a
-            fully custom sprite. See the{' '}
+            Choose between the shipped <code>minimal</code>,{' '}
+            <code>standard</code>, and <code>complete</code> icon tiers. Each
+            tier is cumulative. Override the built-in palette with CSS variables
+            like <code>--trees-file-icon-color-javascript</code>, or fall back
+            to a fully custom sprite. See the{' '}
             <a href="/preview/trees/docs#custom-icons" className="inline-link">
               FileTreeIconConfig docs
             </a>{' '}
@@ -85,21 +78,19 @@ export function CustomIconsSection() {
           <TreeExampleHeading
             icon={<IconFileTreeFill />}
             description={
-              <>
-                Generic built-ins with a single file glyph and no file-type map.
-              </>
+              <>Generic file, folder, and image icons with no file types.</>
             }
           >
-            Simple
+            Minimal
           </TreeExampleHeading>
           <FileTree
             className={DEFAULT_FILE_TREE_PANEL_CLASS}
-            prerenderedHTML={simplePrerenderedHTML}
+            prerenderedHTML={minimalPrerenderedHTML}
             options={{
               ...baseTreeOptions,
-              id: 'built-in-icons-simple',
+              id: 'built-in-icons-minimal',
               lockedPaths: ['package.json'],
-              icons: 'simple',
+              icons: 'minimal',
             }}
             initialExpandedItems={['src', 'src/components']}
             style={panelStyle}
@@ -108,23 +99,18 @@ export function CustomIconsSection() {
         <div>
           <TreeExampleHeading
             icon={<IconFire />}
-            description={
-              <>Semantic file-type icons without any extra configuration.</>
-            }
+            description={<>Icons for common languages and file types.</>}
           >
-            File-type
+            Standard
           </TreeExampleHeading>
           <FileTree
             className={DEFAULT_FILE_TREE_PANEL_CLASS}
-            prerenderedHTML={fileTypePrerenderedHTML}
+            prerenderedHTML={defaultPrerenderedHTML}
             options={{
               ...baseTreeOptions,
-              id: 'built-in-icons-file-type',
+              id: 'built-in-icons-default',
               lockedPaths: ['package.json'],
-              icons: {
-                set: 'file-type',
-                colored: false,
-              },
+              icons: 'standard',
             }}
             initialExpandedItems={['src', 'src/components']}
             style={panelStyle}
@@ -133,26 +119,18 @@ export function CustomIconsSection() {
         <div>
           <TreeExampleHeading
             icon={<IconBrush />}
-            description={
-              <>
-                With built-in semantic colors enabled via{' '}
-                <code>colored: true</code>.
-              </>
-            }
+            description={<>Full, colored suite with brands and frameworks.</>}
           >
-            Duo-tone
+            Complete
           </TreeExampleHeading>
           <FileTree
             className={DEFAULT_FILE_TREE_PANEL_CLASS}
-            prerenderedHTML={duoTonePrerenderedHTML}
+            prerenderedHTML={completePrerenderedHTML}
             options={{
               ...baseTreeOptions,
-              id: 'built-in-icons-duo-tone',
+              id: 'built-in-icons-complete',
               lockedPaths: ['package.json'],
-              icons: {
-                set: 'duo-tone',
-                colored: true,
-              },
+              icons: 'complete',
             }}
             initialExpandedItems={['src', 'src/components']}
             style={panelStyle}

bunfig.toml

@@ -1,4 +1,4 @@
 [install]
 
 minimumReleaseAge = 604800 # 7 days in seconds
-minimumReleaseAgeExcludes = ["@types/bun"]
+minimumReleaseAgeExcludes = ["@types/bun", "@pierre/vscode-icons"]

package.json

@@ -16,7 +16,7 @@
       "@pierre/icons": "0.1.0",
       "@pierre/storage": "0.0.10",
       "@pierre/theme": "0.0.22",
-      "@pierre/vscode-icons": "0.0.4",
+      "@pierre/vscode-icons": "0.0.6",
       "@playwright/test": "1.51.1",
       "@radix-ui/react-avatar": "1.1.10",
       "@radix-ui/react-dialog": "1.1.15",