arrow-right icon

Arrow right: forward, go, go forward, navigate forward. 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.003 7.5C13.003 7.636 12.953 7.754 12.854 7.854L8.854 11.854C8.754 11.953 8.636 12.003 8.5 12.003C8.364 12.003 8.246 11.953 8.146 11.854C8.047 11.754 7.997 11.636 7.997 11.5C7.997 11.364 8.047 11.246 8.146 11.146L11.293 8L2.5 8C2.359 8 2.241 7.952 2.144 7.856C2.048 7.759 2 7.641 2 7.5C2 7.359 2.048 7.241 2.144 7.144C2.241 7.048 2.359 7 2.5 7L11.293 7L8.146 3.854C8.049 3.756 8 3.638 8 3.5C8 3.362 8.049 3.244 8.146 3.146C8.246 3.047 8.364 2.997 8.5 2.997C8.636 2.997 8.754 3.047 8.854 3.146L12.854 7.146C12.953 7.246 13.003 7.364 13.003 7.5Z"/></svg>

React

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

export function ArrowRightIcon(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.003 7.5C13.003 7.636 12.953 7.754 12.854 7.854L8.854 11.854C8.754 11.953 8.636 12.003 8.5 12.003C8.364 12.003 8.246 11.953 8.146 11.854C8.047 11.754 7.997 11.636 7.997 11.5C7.997 11.364 8.047 11.246 8.146 11.146L11.293 8L2.5 8C2.359 8 2.241 7.952 2.144 7.856C2.048 7.759 2 7.641 2 7.5C2 7.359 2.048 7.241 2.144 7.144C2.241 7.048 2.359 7 2.5 7L11.293 7L8.146 3.854C8.049 3.756 8 3.638 8 3.5C8 3.362 8.049 3.244 8.146 3.146C8.246 3.047 8.364 2.997 8.5 2.997C8.636 2.997 8.754 3.047 8.854 3.146L12.854 7.146C12.953 7.246 13.003 7.364 13.003 7.5Z" />
    </svg>
  );
}

Vue

Vue: see /icons/arrow-right.md

Svelte

Svelte: see /icons/arrow-right.md

HTML img

HTML img: see /icons/arrow-right.md

CSS

CSS: see /icons/arrow-right.md

Data URL

Data URL: see /icons/arrow-right.md

Sprite

Sprite: see /icons/arrow-right.md

SwiftUI

SwiftUI: see /icons/arrow-right.md

Compose

Compose: see /icons/arrow-right.md

Android XML

Android XML: see /icons/arrow-right.md

Flutter

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

forward, go, go forward, navigate forward, proceed, continue, next step

Alternatives

forward: forward a message or an email to someone (forward-message)
chevron-right: the next item or page in a sequence (next)
send: submit a message (send)

Also fits

next: proceed in a flow (go) or navigate forward (forward)
redo: navigate forward in history (forward)

Not for

send (use send): arrow-right is navigation; the paper plane is the send convention

Tags

arrow, direction

Category

Arrows

Component name

ArrowRightIcon

History

2026-10-13 added
2026-10-14 20 px drawn, 24 px drawn

Family 27

arrow-down arrow-down-left arrow-down-right arrow-down-to-line arrow-left arrow-left-right arrow-left-to-line arrow-right-to-line arrow-up arrow-up-down arrow-up-left arrow-up-right

More arrows icons

arrows-out chevron-down chevron-down-triangle chevron-left chevron-left-to-line chevron-left-triangle chevron-right chevron-right-to-line chevron-right-triangle chevron-up chevron-up-triangle chevrons-down chevrons-down-up chevrons-left chevrons-right chevrons-up · all arrows icons

For agents

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

arrow-right icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp