Gentleface › Accessibility › audio-description

audio-description icon

Audio description: audio description, described video. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M13.387 2.554C13.902 3.347 14.297 4.196 14.571 5.101C14.857 6.046 15 7.013 15 8C15 8.987 14.857 9.954 14.571 10.899C14.297 11.804 13.902 12.653 13.387 13.446C13.31 13.565 13.205 13.638 13.072 13.666C12.939 13.694 12.813 13.67 12.695 13.593C12.577 13.517 12.504 13.412 12.475 13.279C12.447 13.146 12.471 13.02 12.548 12.902C13.012 12.188 13.367 11.423 13.614 10.609C13.871 9.758 14 8.889 14 8C14 7.111 13.871 6.242 13.614 5.391C13.367 4.577 13.012 3.812 12.548 3.098C12.473 2.982 12.45 2.857 12.478 2.722C12.507 2.587 12.579 2.482 12.695 2.407C12.813 2.33 12.939 2.306 13.072 2.334C13.205 2.362 13.31 2.435 13.387 2.554ZM12 8C12 8.849 11.85 9.671 11.551 10.466C11.271 11.212 10.874 11.889 10.362 12.5C10.272 12.607 10.159 12.667 10.023 12.679C9.888 12.691 9.766 12.652 9.658 12.561C9.55 12.471 9.49 12.357 9.478 12.222C9.466 12.086 9.506 11.965 9.596 11.857C10.035 11.334 10.375 10.753 10.615 10.114C10.872 9.433 11 8.728 11 8C11 7.272 10.872 6.567 10.615 5.886C10.375 5.247 10.035 4.666 9.596 4.143C9.508 4.038 9.469 3.916 9.481 3.778C9.493 3.641 9.552 3.528 9.658 3.439C9.766 3.348 9.888 3.309 10.023 3.321C10.159 3.333 10.272 3.393 10.362 3.5C10.874 4.111 11.271 4.788 11.551 5.534C11.85 6.329 12 7.151 12 8ZM8.736 5.14C8.993 5.242 9.219 5.391 9.414 5.586C9.609 5.781 9.758 6.007 9.86 6.264C9.953 6.5 10 6.746 10 7L10 9C10 9.254 9.953 9.5 9.86 9.736C9.758 9.993 9.609 10.219 9.414 10.414C9.219 10.609 8.993 10.758 8.736 10.86C8.5 10.953 8.254 11 8 11L6.5 11C6.359 11 6.241 10.952 6.144 10.856C6.048 10.759 6 10.641 6 10.5L6 5.5C6 5.359 6.048 5.241 6.144 5.144C6.241 5.048 6.359 5 6.5 5L8 5C8.254 5 8.5 5.047 8.736 5.14ZM1.14 6.264C1.242 6.007 1.391 5.781 1.586 5.586C1.781 5.391 2.007 5.242 2.264 5.14C2.5 5.047 2.746 5 3 5C3.254 5 3.5 5.047 3.736 5.14C3.993 5.242 4.219 5.391 4.414 5.586C4.609 5.781 4.758 6.007 4.86 6.264C4.953 6.5 5 6.746 5 7L5 10.5C5 10.641 4.952 10.759 4.856 10.856C4.759 10.952 4.641 11 4.5 11C4.359 11 4.241 10.952 4.144 10.856C4.048 10.759 4 10.641 4 10.5L4 9L2 9L2 10.5C2 10.641 1.952 10.759 1.856 10.856C1.759 10.952 1.641 11 1.5 11C1.359 11 1.241 10.952 1.144 10.856C1.048 10.759 1 10.641 1 10.5L1 7C1 6.746 1.047 6.5 1.14 6.264ZM8.707 9.707C8.902 9.512 9 9.276 9 9L9 7C9 6.724 8.902 6.488 8.707 6.293C8.512 6.098 8.276 6 8 6L7 6L7 10L8 10C8.276 10 8.512 9.902 8.707 9.707ZM3.707 6.293C3.512 6.098 3.276 6 3 6C2.724 6 2.488 6.098 2.293 6.293C2.098 6.488 2 6.724 2 7L2 8L4 8L4 7C4 6.724 3.902 6.488 3.707 6.293Z"/></svg>

React

// Gentleface "audio-description" (line-round), MIT. https://gentleface.com/icons/audio-description
import type { SVGProps } from 'react';

export function AudioDescriptionIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M13.387 2.554C13.902 3.347 14.297 4.196 14.571 5.101C14.857 6.046 15 7.013 15 8C15 8.987 14.857 9.954 14.571 10.899C14.297 11.804 13.902 12.653 13.387 13.446C13.31 13.565 13.205 13.638 13.072 13.666C12.939 13.694 12.813 13.67 12.695 13.593C12.577 13.517 12.504 13.412 12.475 13.279C12.447 13.146 12.471 13.02 12.548 12.902C13.012 12.188 13.367 11.423 13.614 10.609C13.871 9.758 14 8.889 14 8C14 7.111 13.871 6.242 13.614 5.391C13.367 4.577 13.012 3.812 12.548 3.098C12.473 2.982 12.45 2.857 12.478 2.722C12.507 2.587 12.579 2.482 12.695 2.407C12.813 2.33 12.939 2.306 13.072 2.334C13.205 2.362 13.31 2.435 13.387 2.554ZM12 8C12 8.849 11.85 9.671 11.551 10.466C11.271 11.212 10.874 11.889 10.362 12.5C10.272 12.607 10.159 12.667 10.023 12.679C9.888 12.691 9.766 12.652 9.658 12.561C9.55 12.471 9.49 12.357 9.478 12.222C9.466 12.086 9.506 11.965 9.596 11.857C10.035 11.334 10.375 10.753 10.615 10.114C10.872 9.433 11 8.728 11 8C11 7.272 10.872 6.567 10.615 5.886C10.375 5.247 10.035 4.666 9.596 4.143C9.508 4.038 9.469 3.916 9.481 3.778C9.493 3.641 9.552 3.528 9.658 3.439C9.766 3.348 9.888 3.309 10.023 3.321C10.159 3.333 10.272 3.393 10.362 3.5C10.874 4.111 11.271 4.788 11.551 5.534C11.85 6.329 12 7.151 12 8ZM8.736 5.14C8.993 5.242 9.219 5.391 9.414 5.586C9.609 5.781 9.758 6.007 9.86 6.264C9.953 6.5 10 6.746 10 7L10 9C10 9.254 9.953 9.5 9.86 9.736C9.758 9.993 9.609 10.219 9.414 10.414C9.219 10.609 8.993 10.758 8.736 10.86C8.5 10.953 8.254 11 8 11L6.5 11C6.359 11 6.241 10.952 6.144 10.856C6.048 10.759 6 10.641 6 10.5L6 5.5C6 5.359 6.048 5.241 6.144 5.144C6.241 5.048 6.359 5 6.5 5L8 5C8.254 5 8.5 5.047 8.736 5.14ZM1.14 6.264C1.242 6.007 1.391 5.781 1.586 5.586C1.781 5.391 2.007 5.242 2.264 5.14C2.5 5.047 2.746 5 3 5C3.254 5 3.5 5.047 3.736 5.14C3.993 5.242 4.219 5.391 4.414 5.586C4.609 5.781 4.758 6.007 4.86 6.264C4.953 6.5 5 6.746 5 7L5 10.5C5 10.641 4.952 10.759 4.856 10.856C4.759 10.952 4.641 11 4.5 11C4.359 11 4.241 10.952 4.144 10.856C4.048 10.759 4 10.641 4 10.5L4 9L2 9L2 10.5C2 10.641 1.952 10.759 1.856 10.856C1.759 10.952 1.641 11 1.5 11C1.359 11 1.241 10.952 1.144 10.856C1.048 10.759 1 10.641 1 10.5L1 7C1 6.746 1.047 6.5 1.14 6.264ZM8.707 9.707C8.902 9.512 9 9.276 9 9L9 7C9 6.724 8.902 6.488 8.707 6.293C8.512 6.098 8.276 6 8 6L7 6L7 10L8 10C8.276 10 8.512 9.902 8.707 9.707ZM3.707 6.293C3.512 6.098 3.276 6 3 6C2.724 6 2.488 6.098 2.293 6.293C2.098 6.488 2 6.724 2 7L2 8L4 8L4 7C4 6.724 3.902 6.488 3.707 6.293Z" />
    </svg>
  );
}

Vue

Vue: see /icons/audio-description.md

Svelte

Svelte: see /icons/audio-description.md

HTML img

HTML img: see /icons/audio-description.md

CSS

CSS: see /icons/audio-description.md

Data URL

Data URL: see /icons/audio-description.md

Sprite

Sprite: see /icons/audio-description.md

SwiftUI

SwiftUI: see /icons/audio-description.md

Compose

Compose: see /icons/audio-description.md

Android XML

Android XML: see /icons/audio-description.md

Flutter

Flutter: see /icons/audio-description.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

With npm: import { AudioDescriptionIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

audio description, described video

Alternatives

text-to-speech: read on-screen text aloud

Don’t confuse with

subtitles: captions are text for deaf viewers; audio description narrates for blind viewers

Also fits

visually impaired: audio description of a video

Not for

subtitles (use subtitles): narration for blind viewers, not captions

Tags

audio-description, ad, described-video, narration, descriptive-audio, blind, visually-impaired, accessibility, sound, voice-over

Category

Accessibility

Component name

AudioDescriptionIcon

History

2026-10-29 released in 0.2.0
2026-10-30 added

Since

version 0.2.0

More accessibility icons

accessibility accessibility-alert accessibility-check blind braille closed-caption contrast ear ear-off ear-sound glasses subtitles subtitles-off subtitles-sparkle sun-dim sun-dim-auto · all accessibility icons

For agents

Metadata: /icons/audio-description.json · Markdown: /icons/audio-description.md · SVG: https://gentleface.com/svg/{style}/16/audio-description.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/audio-description.png

audio-description icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp

Code line-round

Meaning

More accessibility icons

For agents

audio-description icon