Gentleface › Arrows › corner-down-right
corner-down-right icon
corner-down-rightCorner down right: sub item, nested item, child item, child row. 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="M3.293 8.707C3.488 8.902 3.724 9 4 9L11.293 9L9.146 6.854C9.049 6.756 9 6.638 9 6.5C9 6.362 9.049 6.244 9.146 6.146C9.246 6.047 9.364 5.997 9.5 5.997C9.636 5.997 9.754 6.047 9.854 6.146L12.854 9.146C12.953 9.246 13.003 9.364 13.003 9.5C13.003 9.636 12.953 9.754 12.854 9.854L9.854 12.854C9.754 12.953 9.636 13.003 9.5 13.003C9.364 13.003 9.246 12.953 9.146 12.854C9.047 12.754 8.997 12.636 8.997 12.5C8.997 12.364 9.047 12.246 9.146 12.146L11.293 10L4 10C3.746 10 3.5 9.953 3.264 9.86C3.007 9.758 2.781 9.609 2.586 9.414C2.391 9.219 2.242 8.993 2.14 8.736C2.047 8.5 2 8.254 2 8L2 2.5C2 2.359 2.048 2.241 2.144 2.144C2.241 2.048 2.359 2 2.5 2C2.641 2 2.759 2.048 2.856 2.144C2.952 2.241 3 2.359 3 2.5L3 8C3 8.276 3.098 8.512 3.293 8.707Z"/></svg>
// Gentleface "corner-down-right" (line-round), MIT. https://gentleface.com/icons/corner-down-right
import type { SVGProps } from 'react';
export function CornerDownRightIcon(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.293 8.707C3.488 8.902 3.724 9 4 9L11.293 9L9.146 6.854C9.049 6.756 9 6.638 9 6.5C9 6.362 9.049 6.244 9.146 6.146C9.246 6.047 9.364 5.997 9.5 5.997C9.636 5.997 9.754 6.047 9.854 6.146L12.854 9.146C12.953 9.246 13.003 9.364 13.003 9.5C13.003 9.636 12.953 9.754 12.854 9.854L9.854 12.854C9.754 12.953 9.636 13.003 9.5 13.003C9.364 13.003 9.246 12.953 9.146 12.854C9.047 12.754 8.997 12.636 8.997 12.5C8.997 12.364 9.047 12.246 9.146 12.146L11.293 10L4 10C3.746 10 3.5 9.953 3.264 9.86C3.007 9.758 2.781 9.609 2.586 9.414C2.391 9.219 2.242 8.993 2.14 8.736C2.047 8.5 2 8.254 2 8L2 2.5C2 2.359 2.048 2.241 2.144 2.144C2.241 2.048 2.359 2 2.5 2C2.641 2 2.759 2.048 2.856 2.144C2.952 2.241 3 2.359 3 2.5L3 8C3 8.276 3.098 8.512 3.293 8.707Z" />
</svg>
);
}Vue: see /icons/corner-down-right.md
Svelte: see /icons/corner-down-right.md
HTML img: see /icons/corner-down-right.md
CSS: see /icons/corner-down-right.md
Data URL: see /icons/corner-down-right.md
Sprite: see /icons/corner-down-right.md
SwiftUI: see /icons/corner-down-right.md
Compose: see /icons/corner-down-right.md
Android XML: see /icons/corner-down-right.md
Flutter: see /icons/corner-down-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
- sub item, nested item, child item, child row
- Alternatives
list-tree: a whole tree of nested items (tree-view)indent-increase: indent a line of text (increase-indent)
- Also fits
- increase indent: a nested sub-item in a list or a tree (sub-item)
- Tags
- corner, arrow, sub-item, nested, child, indent, subdirectory, reply, turn
- Category
- Arrows
- Component name
CornerDownRightIcon- History
- added
Family 27
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/corner-down-right.json · Markdown: /icons/corner-down-right.md · SVG: https://gentleface.com/svg/{style}/16/corner-down-right.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/corner-down-right.png