# corner-right-up icon Corner right up. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/corner-right-up - Category: Arrows - Use it for: parent level, level up, up one level, go to parent - Tags: corner, arrow, level-up, parent, up, turn, hierarchy, outdent - Family: 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, corner-down-left, corner-down-right, external-link, fit-height, fit-screen, fit-width, move, move-horizontal, move-vertical, redo, refresh, shrink, undo - Component name: CornerRightUpIcon - Added: 2026-10-15 ## Don't confuse with - `arrow-up`: a plain up arrow is a direction or move-up; it does not say go to the parent ## Files 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. - line-round: https://gentleface.com/svg/line-round/16/corner-right-up.svg · PNG https://gentleface.com/png/line-round/16/corner-right-up.png · https://gentleface.com/png/line-round/32/corner-right-up.png · https://gentleface.com/png/line-round/48/corner-right-up.png - line-soft: https://gentleface.com/svg/line-soft/16/corner-right-up.svg · PNG https://gentleface.com/png/line-soft/16/corner-right-up.png · https://gentleface.com/png/line-soft/32/corner-right-up.png · https://gentleface.com/png/line-soft/48/corner-right-up.png - line-sharp: https://gentleface.com/svg/line-sharp/16/corner-right-up.svg · PNG https://gentleface.com/png/line-sharp/16/corner-right-up.png · https://gentleface.com/png/line-sharp/32/corner-right-up.png · https://gentleface.com/png/line-sharp/48/corner-right-up.png - solid-round: https://gentleface.com/svg/solid-round/16/corner-right-up.svg · PNG https://gentleface.com/png/solid-round/16/corner-right-up.png · https://gentleface.com/png/solid-round/32/corner-right-up.png · https://gentleface.com/png/solid-round/48/corner-right-up.png - solid-soft: https://gentleface.com/svg/solid-soft/16/corner-right-up.svg · PNG https://gentleface.com/png/solid-soft/16/corner-right-up.png · https://gentleface.com/png/solid-soft/32/corner-right-up.png · https://gentleface.com/png/solid-soft/48/corner-right-up.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/corner-right-up.svg · PNG https://gentleface.com/png/solid-sharp/16/corner-right-up.png · https://gentleface.com/png/solid-sharp/32/corner-right-up.png · https://gentleface.com/png/solid-sharp/48/corner-right-up.png The SVG of every style: https://gentleface.com/icons/corner-right-up.json (`svg`). ## Code (line-round) 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. For another style, take its SVG from the JSON and swap the path `d`. ### SVG ```svg ``` ### React ```tsx // Gentleface "corner-right-up" (line-round), MIT. https://gentleface.com/icons/corner-right-up import type { SVGProps } from 'react'; export function CornerRightUpIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "corner-right-up" (line-round), MIT. https://gentleface.com/icons/corner-right-up. Takes the text color. */ .icon-corner-right-up { display: inline-block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M9.146 2.146C9.246 2.047 9.364 1.997 9.5 1.997C9.636 1.997 9.754 2.047 9.854 2.146L12.854 5.146C12.951 5.244 13 5.362 13 5.5C13 5.638 12.951 5.756 12.854 5.854C12.754 5.953 12.636 6.003 12.5 6.003C12.364 6.003 12.246 5.953 12.146 5.854L10 3.707L10 11C10 11.254 9.953 11.5 9.86 11.736C9.758 11.993 9.609 12.219 9.414 12.414C9.219 12.609 8.993 12.758 8.736 12.86C8.5 12.953 8.254 13 8 13L2.5 13C2.359 13 2.241 12.952 2.144 12.856C2.048 12.759 2 12.641 2 12.5C2 12.359 2.048 12.241 2.144 12.144C2.241 12.048 2.359 12 2.5 12L8 12C8.276 12 8.512 11.902 8.707 11.707C8.902 11.512 9 11.276 9 11L9 3.707L6.854 5.854C6.754 5.953 6.636 6.003 6.5 6.003C6.364 6.003 6.246 5.953 6.146 5.854C6.047 5.754 5.997 5.636 5.997 5.5C5.997 5.364 6.047 5.246 6.146 5.146L9.146 2.146Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M9.146 2.146C9.246 2.047 9.364 1.997 9.5 1.997C9.636 1.997 9.754 2.047 9.854 2.146L12.854 5.146C12.951 5.244 13 5.362 13 5.5C13 5.638 12.951 5.756 12.854 5.854C12.754 5.953 12.636 6.003 12.5 6.003C12.364 6.003 12.246 5.953 12.146 5.854L10 3.707L10 11C10 11.254 9.953 11.5 9.86 11.736C9.758 11.993 9.609 12.219 9.414 12.414C9.219 12.609 8.993 12.758 8.736 12.86C8.5 12.953 8.254 13 8 13L2.5 13C2.359 13 2.241 12.952 2.144 12.856C2.048 12.759 2 12.641 2 12.5C2 12.359 2.048 12.241 2.144 12.144C2.241 12.048 2.359 12 2.5 12L8 12C8.276 12 8.512 11.902 8.707 11.707C8.902 11.512 9 11.276 9 11L9 3.707L6.854 5.854C6.754 5.953 6.636 6.003 6.5 6.003C6.364 6.003 6.246 5.953 6.146 5.854C6.047 5.754 5.997 5.636 5.997 5.5C5.997 5.364 6.047 5.246 6.146 5.146L9.146 2.146Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat; } ``` ### Data URL ```text data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M9.146 2.146C9.246 2.047 9.364 1.997 9.5 1.997C9.636 1.997 9.754 2.047 9.854 2.146L12.854 5.146C12.951 5.244 13 5.362 13 5.5C13 5.638 12.951 5.756 12.854 5.854C12.754 5.953 12.636 6.003 12.5 6.003C12.364 6.003 12.246 5.953 12.146 5.854L10 3.707L10 11C10 11.254 9.953 11.5 9.86 11.736C9.758 11.993 9.609 12.219 9.414 12.414C9.219 12.609 8.993 12.758 8.736 12.86C8.5 12.953 8.254 13 8 13L2.5 13C2.359 13 2.241 12.952 2.144 12.856C2.048 12.759 2 12.641 2 12.5C2 12.359 2.048 12.241 2.144 12.144C2.241 12.048 2.359 12 2.5 12L8 12C8.276 12 8.512 11.902 8.707 11.707C8.902 11.512 9 11.276 9 11L9 3.707L6.854 5.854C6.754 5.953 6.636 6.003 6.5 6.003C6.364 6.003 6.246 5.953 6.146 5.854C6.047 5.754 5.997 5.636 5.997 5.5C5.997 5.364 6.047 5.246 6.146 5.146L9.146 2.146Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "corner-right-up" (line-round), MIT. https://gentleface.com/icons/corner-right-up import SwiftUI struct CornerRightUpIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 9.146, y: 2.146)) p.addCurve(to: CGPoint(x: 9.5, y: 1.997), control1: CGPoint(x: 9.246, y: 2.047), control2: CGPoint(x: 9.364, y: 1.997)) p.addCurve(to: CGPoint(x: 9.854, y: 2.146), control1: CGPoint(x: 9.636, y: 1.997), control2: CGPoint(x: 9.754, y: 2.047)) p.addLine(to: CGPoint(x: 12.854, y: 5.146)) p.addCurve(to: CGPoint(x: 13, y: 5.5), control1: CGPoint(x: 12.951, y: 5.244), control2: CGPoint(x: 13, y: 5.362)) p.addCurve(to: CGPoint(x: 12.854, y: 5.854), control1: CGPoint(x: 13, y: 5.638), control2: CGPoint(x: 12.951, y: 5.756)) p.addCurve(to: CGPoint(x: 12.5, y: 6.003), control1: CGPoint(x: 12.754, y: 5.953), control2: CGPoint(x: 12.636, y: 6.003)) p.addCurve(to: CGPoint(x: 12.146, y: 5.854), control1: CGPoint(x: 12.364, y: 6.003), control2: CGPoint(x: 12.246, y: 5.953)) p.addLine(to: CGPoint(x: 10, y: 3.707)) p.addLine(to: CGPoint(x: 10, y: 11)) p.addCurve(to: CGPoint(x: 9.86, y: 11.736), control1: CGPoint(x: 10, y: 11.254), control2: CGPoint(x: 9.953, y: 11.5)) p.addCurve(to: CGPoint(x: 9.414, y: 12.414), control1: CGPoint(x: 9.758, y: 11.993), control2: CGPoint(x: 9.609, y: 12.219)) p.addCurve(to: CGPoint(x: 8.736, y: 12.86), control1: CGPoint(x: 9.219, y: 12.609), control2: CGPoint(x: 8.993, y: 12.758)) p.addCurve(to: CGPoint(x: 8, y: 13), control1: CGPoint(x: 8.5, y: 12.953), control2: CGPoint(x: 8.254, y: 13)) p.addLine(to: CGPoint(x: 2.5, y: 13)) p.addCurve(to: CGPoint(x: 2.144, y: 12.856), control1: CGPoint(x: 2.359, y: 13), control2: CGPoint(x: 2.241, y: 12.952)) p.addCurve(to: CGPoint(x: 2, y: 12.5), control1: CGPoint(x: 2.048, y: 12.759), control2: CGPoint(x: 2, y: 12.641)) p.addCurve(to: CGPoint(x: 2.144, y: 12.144), control1: CGPoint(x: 2, y: 12.359), control2: CGPoint(x: 2.048, y: 12.241)) p.addCurve(to: CGPoint(x: 2.5, y: 12), control1: CGPoint(x: 2.241, y: 12.048), control2: CGPoint(x: 2.359, y: 12)) p.addLine(to: CGPoint(x: 8, y: 12)) p.addCurve(to: CGPoint(x: 8.707, y: 11.707), control1: CGPoint(x: 8.276, y: 12), control2: CGPoint(x: 8.512, y: 11.902)) p.addCurve(to: CGPoint(x: 9, y: 11), control1: CGPoint(x: 8.902, y: 11.512), control2: CGPoint(x: 9, y: 11.276)) p.addLine(to: CGPoint(x: 9, y: 3.707)) p.addLine(to: CGPoint(x: 6.854, y: 5.854)) p.addCurve(to: CGPoint(x: 6.5, y: 6.003), control1: CGPoint(x: 6.754, y: 5.953), control2: CGPoint(x: 6.636, y: 6.003)) p.addCurve(to: CGPoint(x: 6.146, y: 5.854), control1: CGPoint(x: 6.364, y: 6.003), control2: CGPoint(x: 6.246, y: 5.953)) p.addCurve(to: CGPoint(x: 5.997, y: 5.5), control1: CGPoint(x: 6.047, y: 5.754), control2: CGPoint(x: 5.997, y: 5.636)) p.addCurve(to: CGPoint(x: 6.146, y: 5.146), control1: CGPoint(x: 5.997, y: 5.364), control2: CGPoint(x: 6.047, y: 5.246)) p.addLine(to: CGPoint(x: 9.146, y: 2.146)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // CornerRightUpIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "corner-right-up" (line-round), MIT. https://gentleface.com/icons/corner-right-up import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.graphics.vector.addPathNodes import androidx.compose.ui.unit.dp val CornerRightUpIcon: ImageVector by lazy { ImageVector.Builder( name = "corner-right-up", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M9.146 2.146C9.246 2.047 9.364 1.997 9.5 1.997C9.636 1.997 9.754 2.047 9.854 2.146L12.854 5.146C12.951 5.244 13 5.362 13 5.5C13 5.638 12.951 5.756 12.854 5.854C12.754 5.953 12.636 6.003 12.5 6.003C12.364 6.003 12.246 5.953 12.146 5.854L10 3.707L10 11C10 11.254 9.953 11.5 9.86 11.736C9.758 11.993 9.609 12.219 9.414 12.414C9.219 12.609 8.993 12.758 8.736 12.86C8.5 12.953 8.254 13 8 13L2.5 13C2.359 13 2.241 12.952 2.144 12.856C2.048 12.759 2 12.641 2 12.5C2 12.359 2.048 12.241 2.144 12.144C2.241 12.048 2.359 12 2.5 12L8 12C8.276 12 8.512 11.902 8.707 11.707C8.902 11.512 9 11.276 9 11L9 3.707L6.854 5.854C6.754 5.953 6.636 6.003 6.5 6.003C6.364 6.003 6.246 5.953 6.146 5.854C6.047 5.754 5.997 5.636 5.997 5.5C5.997 5.364 6.047 5.246 6.146 5.146L9.146 2.146Z"), fill = SolidColor(Color.Black), ).build() } // Icon(CornerRightUpIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "corner-right-up" (line-round), MIT. https://gentleface.com/icons/corner-right-up import 'package:flutter/widgets.dart'; class CornerRightUpIcon extends StatelessWidget { const CornerRightUpIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _CornerRightUpIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _CornerRightUpIconPainter extends CustomPainter { _CornerRightUpIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(9.146, 2.146) ..cubicTo(9.246, 2.047, 9.364, 1.997, 9.5, 1.997) ..cubicTo(9.636, 1.997, 9.754, 2.047, 9.854, 2.146) ..lineTo(12.854, 5.146) ..cubicTo(12.951, 5.244, 13, 5.362, 13, 5.5) ..cubicTo(13, 5.638, 12.951, 5.756, 12.854, 5.854) ..cubicTo(12.754, 5.953, 12.636, 6.003, 12.5, 6.003) ..cubicTo(12.364, 6.003, 12.246, 5.953, 12.146, 5.854) ..lineTo(10, 3.707) ..lineTo(10, 11) ..cubicTo(10, 11.254, 9.953, 11.5, 9.86, 11.736) ..cubicTo(9.758, 11.993, 9.609, 12.219, 9.414, 12.414) ..cubicTo(9.219, 12.609, 8.993, 12.758, 8.736, 12.86) ..cubicTo(8.5, 12.953, 8.254, 13, 8, 13) ..lineTo(2.5, 13) ..cubicTo(2.359, 13, 2.241, 12.952, 2.144, 12.856) ..cubicTo(2.048, 12.759, 2, 12.641, 2, 12.5) ..cubicTo(2, 12.359, 2.048, 12.241, 2.144, 12.144) ..cubicTo(2.241, 12.048, 2.359, 12, 2.5, 12) ..lineTo(8, 12) ..cubicTo(8.276, 12, 8.512, 11.902, 8.707, 11.707) ..cubicTo(8.902, 11.512, 9, 11.276, 9, 11) ..lineTo(9, 3.707) ..lineTo(6.854, 5.854) ..cubicTo(6.754, 5.953, 6.636, 6.003, 6.5, 6.003) ..cubicTo(6.364, 6.003, 6.246, 5.953, 6.146, 5.854) ..cubicTo(6.047, 5.754, 5.997, 5.636, 5.997, 5.5) ..cubicTo(5.997, 5.364, 6.047, 5.246, 6.146, 5.146) ..lineTo(9.146, 2.146) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_CornerRightUpIconPainter old) => old.color != color; } ```