File Format

Overview

File Format is the visual identifier set for file types across the entire product, covering documents, code, design, media, and archives through a single Format property. Four variants and two appearances control how loudly each icon speaks, and in Colorful mode every format references its native brand or convention color, kept in sync with the global brand system, so a PDF always reads as a PDF at a glance.

When should you use them?

Use file format icons wherever users see or handle files: upload flows, file managers, attachment lists, download rows, and search results. They pair naturally with File Upload Row and the file entries of Command Menu. Reach for Badge or Status Badge when you are communicating a file's state like uploaded or failed, since File Format identifies the type, not the status.

How should you use them?

• Set the Format property to match the file exactly, from PDF and DOC to TSX, FIG, and MP4, instead of reusing a generic document icon.
• Pick the variant by how much attention the icon deserves: Colorful Solid for brand-true moments, Colorful Soft for dense lists, Neutral Solid for system gray identification, Neutral Soft for ambient hints.
• Match the appearance to the surface density: Filled where the icon competes with text in compact file managers, Outline in editorial layouts with generous spacing.
• Keep one variant and appearance combination per surface, so a file list reads as a system rather than a mix.
• Leave format-true colors to the token system instead of overriding per instance, since a single token change updates every icon across the product.
• Mark the icon aria-hidden when a visible file name or extension sits next to it, and give it an accessible name like the format itself when the icon is the only thing conveying the type.