Gentleface › Arrows › corner-right-down
corner-right-down icon
corner-right-downCorner right down: level down, drill down, down one level. 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="M8.736 2.14C8.993 2.242 9.219 2.391 9.414 2.586C9.609 2.781 9.758 3.007 9.86 3.264C9.953 3.5 10 3.746 10 4L10 11.293L12.146 9.146C12.246 9.047 12.364 8.997 12.5 8.997C12.636 8.997 12.754 9.047 12.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.854L6.146 9.854C6.047 9.754 5.997 9.636 5.997 9.5C5.997 9.364 6.047 9.246 6.146 9.146C6.244 9.049 6.362 9 6.5 9C6.638 9 6.756 9.049 6.854 9.146L9 11.293L9 4C9 3.724 8.902 3.488 8.707 3.293C8.512 3.098 8.276 3 8 3L2.5 3C2.359 3 2.241 2.952 2.144 2.856C2.048 2.759 2 2.641 2 2.5C2 2.359 2.048 2.241 2.144 2.144C2.241 2.048 2.359 2 2.5 2L8 2C8.254 2 8.5 2.047 8.736 2.14Z"/></svg>
// Gentleface "corner-right-down" (line-round), MIT. https://gentleface.com/icons/corner-right-down
import type { SVGProps } from 'react';
export function CornerRightDownIcon(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="M8.736 2.14C8.993 2.242 9.219 2.391 9.414 2.586C9.609 2.781 9.758 3.007 9.86 3.264C9.953 3.5 10 3.746 10 4L10 11.293L12.146 9.146C12.246 9.047 12.364 8.997 12.5 8.997C12.636 8.997 12.754 9.047 12.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.854L6.146 9.854C6.047 9.754 5.997 9.636 5.997 9.5C5.997 9.364 6.047 9.246 6.146 9.146C6.244 9.049 6.362 9 6.5 9C6.638 9 6.756 9.049 6.854 9.146L9 11.293L9 4C9 3.724 8.902 3.488 8.707 3.293C8.512 3.098 8.276 3 8 3L2.5 3C2.359 3 2.241 2.952 2.144 2.856C2.048 2.759 2 2.641 2 2.5C2 2.359 2.048 2.241 2.144 2.144C2.241 2.048 2.359 2 2.5 2L8 2C8.254 2 8.5 2.047 8.736 2.14Z" />
</svg>
);
}Vue: see /icons/corner-right-down.md
Svelte: see /icons/corner-right-down.md
HTML img: see /icons/corner-right-down.md
CSS: see /icons/corner-right-down.md
Data URL: see /icons/corner-right-down.md
Sprite: see /icons/corner-right-down.md
SwiftUI: see /icons/corner-right-down.md
Compose: see /icons/corner-right-down.md
Android XML: see /icons/corner-right-down.md
Flutter: see /icons/corner-right-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.
With npm: import { CornerRightDownIcon } from '@gentleface/react'; (setup).
Meaning
- Use it for
- level down, drill down, down one level
- Tags
- corner, arrow, level-down, drill-down, drill, child, nested, down, turn, hierarchy, go-deeper, step-into
- Category
- Arrows
- Component name
CornerRightDownIcon- History
- released in 0.2.0
- added
- Since
- version 0.2.0
Family 34
More arrows icons
arrows-out chevron-down chevron-down-circle chevron-down-square chevron-down-triangle chevron-left chevron-left-circle chevron-left-square chevron-left-to-line chevron-left-triangle chevron-right chevron-right-circle chevron-right-square chevron-right-to-line chevron-right-triangle chevron-up · all arrows icons
For agents
Metadata: /icons/corner-right-down.json · Markdown: /icons/corner-right-down.md · SVG: https://gentleface.com/svg/{style}/16/corner-right-down.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/corner-right-down.png