Files & documents

Organizing file actions and document types

File and folder icons help users distinguish documents, locations, and actions. A generic file symbol can be useful when the format is unknown, while a labeled type can make a download list easier to scan. Keep the actual filename, extension, and relevant size visible as text rather than expecting the icon to communicate every detail.

Separate the object from the action. A folder symbol represents a location, while an upload or download arrow describes a transfer. In a dense file list, place action controls consistently and give icon-only buttons accessible names. Avoid making the whole row behave differently from an unlabeled icon inside it without a clear visual distinction.

Destructive operations need explicit wording. A trash symbol can support Delete, but it should not be the only explanation when files may be removed. Distinguish removing an item from a selection from deleting the underlying file. Keep confirmation and recovery behavior appropriate to the actual operation. The appearance of an icon cannot compensate for unclear data-handling behavior.

Check file icons with long names, multiple extensions, and different row heights. The icon should remain a stable size while text truncates or wraps according to the layout. For download links, provide useful context such as the format so visitors know what to expect. Export a coherent set for folders, documents, and transfer actions, then review the whole list in its real component rather than evaluating the files one at a time.

In a file picker, show a folder beside an actual directory and a document beside a file. Now try the same design with a long filename, a hidden extension, and two files that share a name but have different formats. The icon can help scan the list, while visible type text resolves ambiguity. Keep the download action separate from the document symbol when clicking the row opens a preview, so people can predict which action they are choosing.

Prepare a useful export

Choose a sample above to open the editor. Review its size, color, and stroke against the background where it will be used. Keep an editable SVG when your destination supports vectors, or export a PNG at an appropriate resolution. Check the result in the real layout and retain applicable source notices with your project.

Explore the icon guides for examples and troubleshooting, or return to all collections to compare related symbols.