MIME Type Icons
MIME type icons are used to depict documents and files. They come in four sizes: 16px, 22px, 32px, and 64px. MIME type icons use the monochrome style for 16px and 22px sizes, and the colorful style for 32px and 64px sizes.
Purpose
MIME type icons allow a user to quickly recognize the types of their files without needing to look at a file's extension or contents. They primarily appear in file listings in large amounts, and their design reflects a sense of unity among files in a user's system.
Design
Margins
64px MIME type icons have a top and bottom margin of 3 pixels, and 32px MIME type icons have a top and bottom margin of 2 pixels.
![](/hig/mime-margin-64.png)
![](/hig/mime-margin-32.png)
Anatomy
Colorful MIME type icons consist of two elements---the monochromatic counterpart of the colorful MIME type icon overlaid on a background relating to the icon's type.
- Monochromatic Foreground
- Base
![](/hig/mime-monochromatic-layer.png)
![](/hig/mime-base-layer.png)
Base
The base of a MIME type icon serves to give files of a general type a shared and recognisable silhouette
Archives
Archives, packages, compressed files, and disk images use a square with a zipper going halfway down.
![](/hig/mime-archive.png)
![](/hig/mime-archive-symbol.png)
Images
Images use a horizontal rectangle with the top right corner folded and casting a shadow.
Videos
Videos use a horizontal rectangle styled to look like a filmstrip.
Audio
Audio files use a CD sleeve with a partially visible CD sticking out.
Books
Book files use a vertical rectangle with a book spine.
Other
Documents and other icons use a rectangle with a fold in the top right corner casting a shadow.
Foreground
The foreground of a MIME type icon serves to inform the user about the specific type of file an icon represents. The foreground should be the monochromatic icon of the MIME type.
![](/hig/mime-fg-do.png)
![](/hig/mime-fg-dont.png)
Color
The color of a MIME type icon helps inform the user what kind of icon it is. Icons for MIME types associated with a brand identity should use the colors of that brand identity.
![](/hig/mime-color-do.png)
![](/hig/mime-color-dont.png)