play icon

Code line-round

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M3.757 13.929C3.636 14.001 3.51 14.021 3.378 13.988C3.246 13.955 3.144 13.878 3.071 13.757C3.024 13.678 3 13.592 3 13.5L3 1.5C3 1.359 3.048 1.241 3.144 1.144C3.241 1.048 3.359 1 3.5 1C3.592 1 3.678 1.024 3.757 1.071L13.757 7.071C13.876 7.142 13.952 7.245 13.985 7.379C14.019 7.513 14 7.639 13.929 7.757C13.886 7.829 13.829 7.886 13.757 7.929L3.757 13.929ZM12.528 7.5L4 2.383L4 12.617L12.528 7.5Z"/></svg>

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

export function PlayIcon(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="M3.757 13.929C3.636 14.001 3.51 14.021 3.378 13.988C3.246 13.955 3.144 13.878 3.071 13.757C3.024 13.678 3 13.592 3 13.5L3 1.5C3 1.359 3.048 1.241 3.144 1.144C3.241 1.048 3.359 1 3.5 1C3.592 1 3.678 1.024 3.757 1.071L13.757 7.071C13.876 7.142 13.952 7.245 13.985 7.379C14.019 7.513 14 7.639 13.929 7.757C13.886 7.829 13.829 7.886 13.757 7.929L3.757 13.929ZM12.528 7.5L4 2.383L4 12.617L12.528 7.5Z" />
    </svg>
  );
}

Vue: see /icons/play.md

Svelte: see /icons/play.md

HTML img: see /icons/play.md

CSS: see /icons/play.md

Data URL: see /icons/play.md

Sprite: see /icons/play.md

SwiftUI: see /icons/play.md

Compose: see /icons/play.md

Android XML: see /icons/play.md

Flutter: see /icons/play.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.

Meaning

Use it for

play, start, run, resume, start playback, begin, execute

Alternatives

• play-circle: a large play button over a video or a media card (play-video)
• play-pause: one key that toggles play and pause (play-pause-toggle)
• code-play: run code or a script in an editor (run-code)
• rocket: launch or deploy an app (launch)
• power: switch a device on (power-on)

Also fits

• run code: the bare run when the UI already names the code
• launch: start or run something (start)
• listen: start playback (play)
• play video: the bare play control in a player toolbar
• play pause toggle: separate play and pause buttons that swap
• run tests: run or start in general

Not for

• next (use chevron-right): play starts media; a chevron only points to the next item
• not gate (use logic-not): play is a media triangle; the gate carries an output bubble and an input line
• triangle (use triangle): a right-pointing triangle means play (play)

Tags

media, playback, triangle, start, run

Category

Audio & video

Component name

PlayIcon

History

• 2026-10-14 added

Family 13

More audio & video icons

album aspect-ratio audio-lines cassette clapperboard disc explicit film guitar hd headphones headphones-off headset headset-off keyframe keyframe-plus · all audio & video icons

For agents

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