Skip to content
ztui ztui

File Icon

ztui File Icons showing Seti glyphs for package.json, TypeScript, React, Docker, Go, Rust and more

<FileIcon> resolves a filename (or extension/language) to its Seti file-type icon and per-type color — the same icon set VS Code uses. The glyph is extracted from the Seti font and rendered as a crisp vector (natively on the web/canvas backend).

Usage

Section titled “Usage”
import { FileIcon, HBox, Label } from "@huyz0/ztui/react";


<HBox>
  <FileIcon filename="package.json" />
  <Label> package.json</Label>
</HBox>


<FileIcon filename="src" isFolder />
<FileIcon extension="rs" />
<FileIcon languageId="typescript" />

Key props

Section titled “Key props”
  • filename — resolve the icon (and color) from the full name.
  • extension — resolve from an extension when you don’t have a full name.
  • languageId — resolve from a language id (e.g. "typescript").
  • isFolder — render the folder icon instead.

Full demo →