chevron-down 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="M11.146 5.146C11.246 5.047 11.364 4.997 11.5 4.997C11.636 4.997 11.754 5.047 11.854 5.146C11.951 5.244 12 5.362 12 5.5C12 5.638 11.951 5.756 11.854 5.854L7.854 9.854C7.754 9.953 7.636 10.003 7.5 10.003C7.364 10.003 7.246 9.953 7.146 9.854L3.146 5.854C3.047 5.754 2.997 5.636 2.997 5.5C2.997 5.364 3.047 5.246 3.146 5.146C3.244 5.049 3.362 5 3.5 5C3.638 5 3.756 5.049 3.854 5.146L7.5 8.793L11.146 5.146Z"/></svg>

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

export function ChevronDownIcon(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="M11.146 5.146C11.246 5.047 11.364 4.997 11.5 4.997C11.636 4.997 11.754 5.047 11.854 5.146C11.951 5.244 12 5.362 12 5.5C12 5.638 11.951 5.756 11.854 5.854L7.854 9.854C7.754 9.953 7.636 10.003 7.5 10.003C7.364 10.003 7.246 9.953 7.146 9.854L3.146 5.854C3.047 5.754 2.997 5.636 2.997 5.5C2.997 5.364 3.047 5.246 3.146 5.146C3.244 5.049 3.362 5 3.5 5C3.638 5 3.756 5.049 3.854 5.146L7.5 8.793L11.146 5.146Z" />
    </svg>
  );
}

Vue: see /icons/chevron-down.md

Svelte: see /icons/chevron-down.md

HTML img: see /icons/chevron-down.md

CSS: see /icons/chevron-down.md

Data URL: see /icons/chevron-down.md

Sprite: see /icons/chevron-down.md

SwiftUI: see /icons/chevron-down.md

Compose: see /icons/chevron-down.md

Android XML: see /icons/chevron-down.md

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

expand, open menu, expand section, open dropdown

Alternatives

• chevron-down-triangle: the filled caret (Material arrow_drop_down, Bootstrap and FA caret); pick one convention per product
• arrows-out: enlarge or scale up a view or an object (arrows out); chevron-down expands a section or a menu
• chevrons-up-down: the indicator of a select field (dropdown)
• more-vertical: an overflow menu of actions (more-vertical)

Also fits

• down: a lighter direction cue inside a control, e.g. a stepper or a disclosure; the arrow is the explicit direction
• lowest priority: one step lower (low) when a product shows a five-level priority scale
• dropdown: the arrow of a menu button or a split button (open-menu)
• expand collapse: expand one section (expand)
• unfold: expand a section of an app UI (expand)
• accordion: the expand action of one section (expand)

Not for

• move down (use arrow-down): chevron-down expands a section; it does not move an item
• enlarge (use arrows-out): chevron-down expands a section; it does not enlarge

Tags

caret, arrow

Category

Arrows

Component name

ChevronDownIcon

History

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

Family 15

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-down.json · Markdown: /icons/chevron-down.md · SVG: https://gentleface.com/svg/{style}/16/chevron-down.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/chevron-down.png