Devices & hardware

Choosing device icons without implying unsupported features

Device symbols can describe supported platforms, responsive layouts, hardware categories, or connection states. A phone, tablet, and monitor displayed together can communicate a range of screen types, but the surrounding copy should explain what is actually supported. Do not use a device illustration to imply compatibility that the product has not been tested for.

For responsive-design examples, keep the icons visually related while preserving their recognizable proportions. A monitor and phone need not occupy identical visible areas inside their frames. A common outer box helps align them in a row, while small optical adjustments make their apparent weight feel balanced. Avoid stretching a wide display into a square tile.

Status displays need explicit information. A device icon alone cannot explain whether a connection is unavailable, a permission is missing, or a battery is low. Pair the symbol with concise text and distinguish temporary loading from an error. Do not rely on red and green alone to communicate the state, especially when the interface is also used in low-contrast viewing conditions.

When device icons appear in setup instructions, place them near the relevant step and use a consistent visual sequence. Keep the essential directions in text so they remain understandable without the images. Export at the size required by the final documentation or interface, and check that small details such as stands, antennas, or buttons survive. A simpler silhouette often works better in a compact menu than a detailed hardware drawing.

A device picker often lists more than one phone or monitor. Use the symbol to identify the device family and a text label to distinguish the individual device. Two identical phone outlines can sit beside different model names without requiring subtle drawing differences that disappear at small sizes. For a connected display, include its connection status separately. Otherwise a person may interpret a dimmed monitor as a power state, a disconnected cable, or simply an unavailable selection.

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.