File icon

Identify a file by its extension.

app.tsx

src

View code

import { FileIcon, FolderIcon } from "@stack/ui/file-icon";

export default function Example() {
  return (
    <div className="flex items-center gap-3">
      <FileIcon name="app.tsx" width={20} height={20} />
      <span>app.tsx</span>
      <FolderIcon width={20} height={20} />
      <span>src</span>
    </div>
  );
}

Usage

import { FileIcon, FolderIcon } from "@stack/ui/file-icon";

Reference

Tables list component-specific props and inherited control options. Components that forward native props also accept the applicable React HTML attributes and event handlers, including data-* and aria-* attributes.

FileIcon

Also accepts native element props.

Prop	Type	Required	Description
`alt`	`string`	No	Alternative text for the icon. Default: `""`.
`name`	`string`	Yes	Filename used for display and file-kind detection.

FolderIcon

Also accepts native element props.

Prop	Type	Required	Description
`alt`	`string`	No	Alternative text for the icon. Default: `""`.
`open`	`boolean`	No	Show the expanded-folder icon. Default: `false`.