Audio & video

Making playback and media actions recognizable

Media controls benefit from familiar patterns. Play, pause, volume, and skip symbols should be distinguishable at a glance, particularly when they appear over changing imagery. Use the icon to reinforce a real control state, and keep the accessible name synchronized with the action that will occur next.

A playback button may show pause while content is playing and play when it is stopped. The visual swap should not move surrounding controls. Give each state the same outer dimensions and keep focus on the control during the update. Do not confuse a loading indicator with playback itself; explain when media is buffering or unavailable.

Check contrast against the backgrounds the controls will actually overlay. A thin white symbol may disappear on a bright video frame. A restrained background plate can provide consistent readability without requiring a heavy outline around every path. Test focus and hover treatment as well as the default state. Users who navigate by keyboard need a reliable indication of which control is active.

Media-related icons on cards should describe the destination accurately. A play symbol usually suggests playable content, while a gallery symbol may indicate a group of images. Avoid decorative play buttons that do not start or open media. Export simple artwork for small controls and reserve detailed symbols for larger category cards. Keep captions, transcripts, and other essential content separate from the visual decoration so the interface remains useful beyond the icon set.

For a player toolbar, line up play, pause, previous track, and seek backward at the actual control size. Previous and seek can look almost identical when the vertical bar is too close to the triangle. Try an audio clip short enough to understand each action by listening. Keep the label synchronized when playback stops at the end. A play triangle left on an active pause control gives conflicting guidance even if both drawings are perfectly legible.

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.