File Icons

File icons#

42 common extensions, grouped by category and toned by it: PDFs read red, sheets green, pictures purple. Pick a variant above the grid, then hover an icon and use Copy SVG to paste it straight into Figma, or Download SVG for a standalone file. The export carries the colors of the theme you are viewing.

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add file-icon

Variants#

Three ways to spend the same tone. default is white paper with the tone on a label band, the one FileCard uses. soft washes the whole sheet in the tone, quieter for long lists. solid makes the sheet the tone, for a single file that leads. The label sits in the same place in all three.

Categories#

An extension resolves to one of 12 categories, and the category picks the tone. Every tone is a semantic color role, so it re-themes with the palette. Pass extension and the category follows; pass type alone for a generic label (IMG, VID). Anything unknown falls back to gray.

Sizes#

size sets the height; the width follows the sheet’s 5:6 box. Or size it yourself with a height utility in className.

In context#

FileCard leads with this icon, so an attachment list gets the category at a glance. Derive the type from the filename and the row needs nothing else. The FileCard page covers progress, states and actions.

Usage#

Pass the extension or the whole filename. The icon is decorative (aria-hidden) because the name beside it says what the file is; give it an aria-label when it stands alone. It holds no state, so it renders in Server Components too.

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

// From an extension or a whole filename: the category and tone follow
<FileIcon extension="pdf" />
<FileIcon extension="Q3 revenue.xlsx" variant="soft" size="lg" />

// A category alone stamps its generic label (IMG, VID, ZIP)
<FileIcon type="image" variant="solid" />

// Override the stamped text, or the tone
<FileIcon type="code" label="TSX" />
<FileIcon extension="key" className="text-brand" />

// Name the category in a meta line
const type = fileTypeFromName(file.name)
<span>{FILE_ICON_TYPES[type].name}</span> // "Spreadsheet"