File Icon

Material Icon Theme file glyphs, inlined as SVG: a curated subset resolved by filename, then by extension, with a generic document fallback.

Open in

message-list.tsx

agent-runtime.ts

build.mjs

globals.css

theme.scss

package.json

README.md

main.py

lib.rs

main.go

ci.yml

Dockerfile

.gitignore

.env.local

release.sh

logo.svg

schema.sql

next.config.ts

Installation

npx shadcn@latest add miskibin/chat-components/file-icon

Usage

import { FileIcon } from "@/components/ui/file-icon"

export function FileRow({ path }: { path: string }) {
  return (
    <span className="flex items-center gap-2 font-mono text-[12px]">
      <FileIcon path={path} size={14} />
      {path}
    </span>
  )
}

Examples

Add an icon

The set is curated, not exhaustive — registry components are copied into your app, so growing it is a local edit: drop the SVG path data into ICONS, then point a filename or extension at the new id. Anything unmapped falls back to the document glyph.

const kotlin = makeIcon("0 0 24 24", [["#c087f7", "M3 3h18L3 21z"]])

const ICONS = { ...  , kotlin }

const EXTENSION_MAP: Record<string, FileIconId> = {
  ...  ,
  kt: "kotlin",
  kts: "kotlin",
}

Notes

Where it shows up already

MessageToolCall puts one in front of an Edit / Write / Read file name, ChangeSummary uses it for every row, FilePreview heads the panel with it, and MessageMarkdown puts it inside the file chips it detects in inline code. Install any of those and this comes with them.

Colours are deliberate

The brand colours are baked into the path data rather than taken from theme tokens: they identify the technology, not the host UI, so an icon reads the same in light and dark. Size with size; leave the fills alone.

API reference

FileIcon

path*string: Full path or bare filename. Only the basename is inspected.
sizenumber = 16: Rendered width and height, in px.

Helpers

fileIconId(path: string) => FileIconId: The icon id a path resolves to — exact filename (package.json, Dockerfile), then filename pattern (.env.local), then extension, then "document".
ICONSRecord<FileIconId, FC<IconProps>>: Every icon, keyed by id — render one directly when you already know the type.

Data slots

Every part below is addressable from a parent, so you can restyle internals without forking the component.

file-icon