Gentleface › Arrows › chevron-right-triangle

chevron-right-triangle icon

Chevron right triangle: next, open submenu. 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="M5.854 11.854C5.754 11.953 5.636 12.003 5.5 12.003C5.364 12.003 5.246 11.953 5.146 11.854C5.049 11.756 5 11.638 5 11.5L5 3.5C5 3.359 5.048 3.241 5.144 3.144C5.241 3.048 5.359 3 5.5 3C5.638 3 5.756 3.049 5.854 3.146L9.854 7.146C9.953 7.246 10.003 7.364 10.003 7.5C10.003 7.636 9.953 7.754 9.854 7.854L5.854 11.854ZM8.793 7.5L6 4.707L6 10.293L8.793 7.5Z"/></svg>

React

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

export function ChevronRightTriangleIcon(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="M5.854 11.854C5.754 11.953 5.636 12.003 5.5 12.003C5.364 12.003 5.246 11.953 5.146 11.854C5.049 11.756 5 11.638 5 11.5L5 3.5C5 3.359 5.048 3.241 5.144 3.144C5.241 3.048 5.359 3 5.5 3C5.638 3 5.756 3.049 5.854 3.146L9.854 7.146C9.953 7.246 10.003 7.364 10.003 7.5C10.003 7.636 9.953 7.754 9.854 7.854L5.854 11.854ZM8.793 7.5L6 4.707L6 10.293L8.793 7.5Z" />
    </svg>
  );
}

Vue

Vue: see /icons/chevron-right-triangle.md

Svelte

Svelte: see /icons/chevron-right-triangle.md

HTML img

HTML img: see /icons/chevron-right-triangle.md

CSS

CSS: see /icons/chevron-right-triangle.md

Data URL

Data URL: see /icons/chevron-right-triangle.md

Sprite

Sprite: see /icons/chevron-right-triangle.md

SwiftUI

SwiftUI: see /icons/chevron-right-triangle.md

Compose

Compose: see /icons/chevron-right-triangle.md

Android XML

Android XML: see /icons/chevron-right-triangle.md

Flutter

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

next, open submenu

Also fits

next: the filled caret (Material, Bootstrap, FA); pick one convention per product
open submenu: the collapsed disclosure triangle of a tree node (VS Code, macOS outline views)

Built from

variant of chevron-right

Tags

caret, triangle, disclosure, tree, next, open-submenu, collapsed

Category

Arrows

Component name

ChevronRightTriangleIcon

History

2026-10-15 added

Family 15

chevron-right chevron-down chevron-down-triangle chevron-left chevron-left-to-line chevron-left-triangle chevron-right-to-line chevron-up chevron-up-triangle chevrons-down chevrons-down-up chevrons-left

More arrows icons

arrow-down arrow-down-left arrow-down-right arrow-down-to-line arrow-left arrow-left-right arrow-left-to-line arrow-right arrow-right-to-line arrow-up arrow-up-down arrow-up-left arrow-up-right arrow-up-to-line arrows-out corner-down-left · all arrows icons

For agents

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

chevron-right-triangle icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp