Figma folder icons

The folder is one of the last skeuomorphs still doing honest work. Hardly anyone under thirty has filed a physical one, and the picture still reads instantly as a container of other things.

That is why it survives in file managers, storage settings and upload dialogs, and why it does most of its work in empty states, sitting above the sentence explaining what has not been added yet.

Open and closed are two drawings, not one shape tilted

The Open property is a genuinely different icon. Closed sits at 48x48px. Open is 54x48px, six pixels wider because the front panel tips forward and out of the bounding box. If you are laying out a grid of folders in Auto Layout, knowing about those six pixels before you center something saves a confusing ten minutes.

Use closed wherever a folder is a location in a list or a tree view, and open for the one folder currently being acted on: the drop target under a dragged file, the destination in a move dialog, the illustration in an onboarding screen.

Swapping to the open variant on hover is the cheapest drop target signifier you have, and Nielsen Norman Group’s work on drag and drop is clear that the drop zone has to announce itself before the file is released.

Four finishes for four backgrounds

The Type property gives you Brand, Gray, Noise and Transparent. Brand is the filled version in the kit’s primary color, which suits a hero empty state where the folder is the only illustration on screen. Gray is the quiet one for chrome and lists.

Noise adds a fine grain across the fill, which stops a large flat folder looking like a placeholder on a dark background. Transparent is the interesting one: the folder is translucent, so file thumbnails and names behind it stay partly visible, which is how you draw a stack of files being dragged into somewhere without illustrating the stack twice.

Folders and empty states

An empty folder icon is only half of an empty state. NN/g’s guidance on designing empty states is that a blank container leaves people unsure whether the system is loading, broken or genuinely empty, and that the fix is a short line of status plus a direct path to the task.

The folder does the first job, telling people this is where things will live. Copy and a button have to do the rest. A folder icon floating alone above the word "Empty" is a screen that has given up.

The other folder in the file

The same Figma page also carries the file type icon set, which includes its own simple folder glyph at 40x40px among the generic marks. They are not interchangeable. That one is a list glyph, drawn flat to sit beside a filename at the same visual weight as a PDF or a spreadsheet.

The folder here is an object, with depth and a fill, built to be the largest thing in a modal or an empty state. Mixing them in one screen produces the sort of small inconsistency that nobody reports and everybody notices.

Because both properties are variants on a single component, a folder in your file is one instance away from being any of the eight versions. Swap Open to True on hover for a drag target, switch Type from Gray to Brand when a folder is selected, and the states stay in one place instead of accumulating as detached copies in the corner of the canvas.