Figma file type icons

A file list is a wall of near-identical rows. The name is truncated, the date tells you nothing useful, and the thing people actually scan is the small shape on the left.

File type icons do that work: they tell you a row is a spreadsheet before you read a character of it. They show up in upload progress, attachment lists in messaging, document tables, and the confirmation state after a drag and drop, which is exactly where a generic gray rectangle would waste everybody’s time.

Every extension you are likely to render

The set is one component with 153 variants, and the File type property is where the coverage sits. Documents run PDF, DOC, DOCX, TXT, CSV, XLS, XLSX, PPT and PPTX. Images run IMG, JPG, JPEG, PNG, WebP, TIFF, GIF, SVG and EPS.

Media covers MP3, WAV, MP4, MPEG, AVI and MKV. Archives are ZIP and RAR. Development covers HTML, CSS, JS, JSON, XML, SQL, JAVA, RSS, EXE and DMG, and design files cover FIG, AI, PSD, INDD and AEP.

Every one is drawn at 40x40px, so a table row built around the icon holds its height whatever the upload turns out to be.

The fallback nobody remembers to design

Products receive files you did not plan for. Someone drops in a .heic from an iPhone, a .dwg from a CAD tool, or an extension invented last year.

The set includes a simple group of generic marks for exactly this: empty, folder, image, video, audio, PDF, document, spreadsheet and code, drawn as plain glyphs rather than labelled sheets. Map your unknown extensions to those and the file browser degrades quietly instead of showing a blank tile. Deciding the fallback once, in the design file, saves an argument later about what a .dwg looks like in a file uploader.

Three treatments, one decision per surface

Each format exists as Default, Gray and Solid. Default is a white sheet with a folded corner and a colored chip carrying the extension. Gray drops the color entirely. Solid fills the whole sheet in the format’s color with the extension knocked out in white.

Pick one treatment per surface rather than per file. Gray earns its place in dense document tables where the icon should not compete with the filename, and Solid works when the file is the subject of the screen, like an upload confirmation or a single attachment card. Because the treatment is a variant property, switching a whole screen is a dropdown, which Figma’s variants documentation walks through if you are building something similar yourself.

The icon repeats the filename, so hide it

In a file list the icon and the text next to it say the same thing. That makes the icon decorative in markup, and it should be skipped by screen readers rather than announced as another PDF, per the W3C tutorial on functional images. The exception is a card where the extension appears nowhere in the text, at which point the icon is carrying real information and needs it spelled out.

Colored file icons also make a weak status signal. If an upload has failed, say so in the row, not by tinting a sheet of paper red.

The same icons exist outside Figma. Untitled UI file type icons are also published as SVG files and React components at untitledui.com/resources/file-icons, so the icon in the prototype is the icon that ships and no one is redrawing a DOCX sheet in the front end.