Gentleface › Arrows › chevron-down-triangle
chevron-down-triangle icon
chevron-down-triangleChevron down triangle: expand, open menu. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.
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="M7.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.049 5.756 3 5.638 3 5.5C3 5.362 3.049 5.244 3.146 5.146C3.244 5.049 3.362 5 3.5 5L11.5 5C11.641 5 11.759 5.048 11.856 5.144C11.952 5.241 12 5.359 12 5.5C12 5.638 11.951 5.756 11.854 5.854L7.854 9.854ZM10.293 6L4.707 6L7.5 8.793L10.293 6Z"/></svg>
// Gentleface "chevron-down-triangle" (line-round), MIT. https://gentleface.com/icons/chevron-down-triangle
import type { SVGProps } from 'react';
export function ChevronDownTriangleIcon(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="M7.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.049 5.756 3 5.638 3 5.5C3 5.362 3.049 5.244 3.146 5.146C3.244 5.049 3.362 5 3.5 5L11.5 5C11.641 5 11.759 5.048 11.856 5.144C11.952 5.241 12 5.359 12 5.5C12 5.638 11.951 5.756 11.854 5.854L7.854 9.854ZM10.293 6L4.707 6L7.5 8.793L10.293 6Z" />
</svg>
);
}Vue: see /icons/chevron-down-triangle.md
Svelte: see /icons/chevron-down-triangle.md
HTML img: see /icons/chevron-down-triangle.md
CSS: see /icons/chevron-down-triangle.md
Data URL: see /icons/chevron-down-triangle.md
Sprite: see /icons/chevron-down-triangle.md
SwiftUI: see /icons/chevron-down-triangle.md
Compose: see /icons/chevron-down-triangle.md
Android XML: see /icons/chevron-down-triangle.md
Flutter: see /icons/chevron-down-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
- expand, open menu
- Also fits
- expand: the filled caret (Material arrow_drop_down, Bootstrap and FA caret); pick one convention per product
- open menu: the filled caret (Material arrow_drop_down, Bootstrap and FA caret); pick one convention per product
- Built from
- variant of
chevron-down - Tags
- caret, triangle, dropdown, expand, open-menu, disclosure
- Category
- Arrows
- Component name
ChevronDownTriangleIcon- History
- added
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-triangle.json · Markdown: /icons/chevron-down-triangle.md · SVG: https://gentleface.com/svg/{style}/16/chevron-down-triangle.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/chevron-down-triangle.png