Download icon

Source artwork and implementation

A downward arrow and tray commonly mean saving a file to the device. They fit SVG, PNG, document, and archive exports.

Use it in an interface

Label the format and, where useful, the file size. Keep real download controls visually separate from advertisements or unrelated service links.

The mdi:download source has 1 SVG path element and a 24 × 24 coordinate system. Its source does not declare a stroke attribute in the drawing markup; do not assume adding a stroke will preserve its appearance. The preview preserves the source proportions.

Embed the original SVG as an image

This example reserves a 24-pixel box. It uses an empty alternative because visible text must convey the meaning alongside a decorative icon. For an informative standalone image, replace the empty alternative with a useful description.

<img src="/icon-file.php?prefix=mdi&name=download" width="24" height="24" alt="">

An SVG loaded through an image element does not inherit the surrounding page’s CSS color. To recolor it, export a customized version or use a reviewed inline SVG. Compare inline SVG and image coloring.

Check before shipping

• Preview Download at the actual display size, especially if your output differs from its 24 × 24 source grid.
• Give interactive controls an action label rather than relying on the file name.
• Retain the Apache 2.0 license notices required by the original source terms.

Try our visual implementation examples for buttons, sizing and selected states.