# shift icon Shift. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/shift - Category: Devices & hardware - Use it for: shift key - Tags: shift, key, keyboard, uppercase, modifier, shortcut, arrow - Component name: ShiftIcon - Added: 2026-10-15 ## Alternatives - `caps-lock`: caps lock: the shift arrow with a bar (caps-lock) ## Don't confuse with - `arrow-up`: move up or scroll to top (move-up) ## Not for - caps lock (use `caps-lock`): the shift key (shift-key); caps lock adds the bar under the arrow ## 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/shift.svg · PNG https://gentleface.com/png/line-round/16/shift.png · https://gentleface.com/png/line-round/32/shift.png · https://gentleface.com/png/line-round/48/shift.png - line-soft: https://gentleface.com/svg/line-soft/16/shift.svg · PNG https://gentleface.com/png/line-soft/16/shift.png · https://gentleface.com/png/line-soft/32/shift.png · https://gentleface.com/png/line-soft/48/shift.png - line-sharp: https://gentleface.com/svg/line-sharp/16/shift.svg · PNG https://gentleface.com/png/line-sharp/16/shift.png · https://gentleface.com/png/line-sharp/32/shift.png · https://gentleface.com/png/line-sharp/48/shift.png - solid-round: https://gentleface.com/svg/solid-round/16/shift.svg · PNG https://gentleface.com/png/solid-round/16/shift.png · https://gentleface.com/png/solid-round/32/shift.png · https://gentleface.com/png/solid-round/48/shift.png - solid-soft: https://gentleface.com/svg/solid-soft/16/shift.svg · PNG https://gentleface.com/png/solid-soft/16/shift.png · https://gentleface.com/png/solid-soft/32/shift.png · https://gentleface.com/png/solid-soft/48/shift.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/shift.svg · PNG https://gentleface.com/png/solid-sharp/16/shift.png · https://gentleface.com/png/solid-sharp/32/shift.png · https://gentleface.com/png/solid-sharp/48/shift.png The SVG of every style: https://gentleface.com/icons/shift.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 "shift" (line-round), MIT. https://gentleface.com/icons/shift import type { SVGProps } from 'react'; export function ShiftIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "shift" (line-round), MIT. https://gentleface.com/icons/shift. Takes the text color. */ .icon-shift { 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='M14.003 7.5C14.003 7.636 13.953 7.754 13.854 7.854C13.756 7.951 13.638 8 13.5 8L10 8L10 13.5C10 13.641 9.952 13.759 9.856 13.856C9.759 13.952 9.641 14 9.5 14L5.5 14C5.359 14 5.241 13.952 5.144 13.856C5.048 13.759 5 13.641 5 13.5L5 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.362 1.049 7.244 1.146 7.146L7.146 1.146C7.244 1.049 7.362 1 7.5 1C7.638 1 7.756 1.049 7.854 1.146L13.854 7.146C13.953 7.246 14.003 7.364 14.003 7.5ZM5.856 7.144C5.952 7.241 6 7.359 6 7.5L6 13L9 13L9 7.5C9 7.359 9.048 7.241 9.144 7.144C9.241 7.048 9.359 7 9.5 7L12.293 7L7.5 2.207L2.707 7L5.5 7C5.641 7 5.759 7.048 5.856 7.144Z'/%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='M14.003 7.5C14.003 7.636 13.953 7.754 13.854 7.854C13.756 7.951 13.638 8 13.5 8L10 8L10 13.5C10 13.641 9.952 13.759 9.856 13.856C9.759 13.952 9.641 14 9.5 14L5.5 14C5.359 14 5.241 13.952 5.144 13.856C5.048 13.759 5 13.641 5 13.5L5 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.362 1.049 7.244 1.146 7.146L7.146 1.146C7.244 1.049 7.362 1 7.5 1C7.638 1 7.756 1.049 7.854 1.146L13.854 7.146C13.953 7.246 14.003 7.364 14.003 7.5ZM5.856 7.144C5.952 7.241 6 7.359 6 7.5L6 13L9 13L9 7.5C9 7.359 9.048 7.241 9.144 7.144C9.241 7.048 9.359 7 9.5 7L12.293 7L7.5 2.207L2.707 7L5.5 7C5.641 7 5.759 7.048 5.856 7.144Z'/%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='M14.003 7.5C14.003 7.636 13.953 7.754 13.854 7.854C13.756 7.951 13.638 8 13.5 8L10 8L10 13.5C10 13.641 9.952 13.759 9.856 13.856C9.759 13.952 9.641 14 9.5 14L5.5 14C5.359 14 5.241 13.952 5.144 13.856C5.048 13.759 5 13.641 5 13.5L5 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.362 1.049 7.244 1.146 7.146L7.146 1.146C7.244 1.049 7.362 1 7.5 1C7.638 1 7.756 1.049 7.854 1.146L13.854 7.146C13.953 7.246 14.003 7.364 14.003 7.5ZM5.856 7.144C5.952 7.241 6 7.359 6 7.5L6 13L9 13L9 7.5C9 7.359 9.048 7.241 9.144 7.144C9.241 7.048 9.359 7 9.5 7L12.293 7L7.5 2.207L2.707 7L5.5 7C5.641 7 5.759 7.048 5.856 7.144Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "shift" (line-round), MIT. https://gentleface.com/icons/shift import SwiftUI struct ShiftIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 14.003, y: 7.5)) p.addCurve(to: CGPoint(x: 13.854, y: 7.854), control1: CGPoint(x: 14.003, y: 7.636), control2: CGPoint(x: 13.953, y: 7.754)) p.addCurve(to: CGPoint(x: 13.5, y: 8), control1: CGPoint(x: 13.756, y: 7.951), control2: CGPoint(x: 13.638, y: 8)) p.addLine(to: CGPoint(x: 10, y: 8)) p.addLine(to: CGPoint(x: 10, y: 13.5)) p.addCurve(to: CGPoint(x: 9.856, y: 13.856), control1: CGPoint(x: 10, y: 13.641), control2: CGPoint(x: 9.952, y: 13.759)) p.addCurve(to: CGPoint(x: 9.5, y: 14), control1: CGPoint(x: 9.759, y: 13.952), control2: CGPoint(x: 9.641, y: 14)) p.addLine(to: CGPoint(x: 5.5, y: 14)) p.addCurve(to: CGPoint(x: 5.144, y: 13.856), control1: CGPoint(x: 5.359, y: 14), control2: CGPoint(x: 5.241, y: 13.952)) p.addCurve(to: CGPoint(x: 5, y: 13.5), control1: CGPoint(x: 5.048, y: 13.759), control2: CGPoint(x: 5, y: 13.641)) p.addLine(to: CGPoint(x: 5, y: 8)) p.addLine(to: CGPoint(x: 1.5, y: 8)) p.addCurve(to: CGPoint(x: 1.144, y: 7.856), control1: CGPoint(x: 1.359, y: 8), control2: CGPoint(x: 1.241, y: 7.952)) p.addCurve(to: CGPoint(x: 1, y: 7.5), control1: CGPoint(x: 1.048, y: 7.759), control2: CGPoint(x: 1, y: 7.641)) p.addCurve(to: CGPoint(x: 1.146, y: 7.146), control1: CGPoint(x: 1, y: 7.362), control2: CGPoint(x: 1.049, y: 7.244)) p.addLine(to: CGPoint(x: 7.146, y: 1.146)) p.addCurve(to: CGPoint(x: 7.5, y: 1), control1: CGPoint(x: 7.244, y: 1.049), control2: CGPoint(x: 7.362, y: 1)) p.addCurve(to: CGPoint(x: 7.854, y: 1.146), control1: CGPoint(x: 7.638, y: 1), control2: CGPoint(x: 7.756, y: 1.049)) p.addLine(to: CGPoint(x: 13.854, y: 7.146)) p.addCurve(to: CGPoint(x: 14.003, y: 7.5), control1: CGPoint(x: 13.953, y: 7.246), control2: CGPoint(x: 14.003, y: 7.364)) p.closeSubpath() p.move(to: CGPoint(x: 5.856, y: 7.144)) p.addCurve(to: CGPoint(x: 6, y: 7.5), control1: CGPoint(x: 5.952, y: 7.241), control2: CGPoint(x: 6, y: 7.359)) p.addLine(to: CGPoint(x: 6, y: 13)) p.addLine(to: CGPoint(x: 9, y: 13)) p.addLine(to: CGPoint(x: 9, y: 7.5)) p.addCurve(to: CGPoint(x: 9.144, y: 7.144), control1: CGPoint(x: 9, y: 7.359), control2: CGPoint(x: 9.048, y: 7.241)) p.addCurve(to: CGPoint(x: 9.5, y: 7), control1: CGPoint(x: 9.241, y: 7.048), control2: CGPoint(x: 9.359, y: 7)) p.addLine(to: CGPoint(x: 12.293, y: 7)) p.addLine(to: CGPoint(x: 7.5, y: 2.207)) p.addLine(to: CGPoint(x: 2.707, y: 7)) p.addLine(to: CGPoint(x: 5.5, y: 7)) p.addCurve(to: CGPoint(x: 5.856, y: 7.144), control1: CGPoint(x: 5.641, y: 7), control2: CGPoint(x: 5.759, y: 7.048)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // ShiftIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "shift" (line-round), MIT. https://gentleface.com/icons/shift 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 ShiftIcon: ImageVector by lazy { ImageVector.Builder( name = "shift", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M14.003 7.5C14.003 7.636 13.953 7.754 13.854 7.854C13.756 7.951 13.638 8 13.5 8L10 8L10 13.5C10 13.641 9.952 13.759 9.856 13.856C9.759 13.952 9.641 14 9.5 14L5.5 14C5.359 14 5.241 13.952 5.144 13.856C5.048 13.759 5 13.641 5 13.5L5 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.362 1.049 7.244 1.146 7.146L7.146 1.146C7.244 1.049 7.362 1 7.5 1C7.638 1 7.756 1.049 7.854 1.146L13.854 7.146C13.953 7.246 14.003 7.364 14.003 7.5ZM5.856 7.144C5.952 7.241 6 7.359 6 7.5L6 13L9 13L9 7.5C9 7.359 9.048 7.241 9.144 7.144C9.241 7.048 9.359 7 9.5 7L12.293 7L7.5 2.207L2.707 7L5.5 7C5.641 7 5.759 7.048 5.856 7.144Z"), fill = SolidColor(Color.Black), ).build() } // Icon(ShiftIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "shift" (line-round), MIT. https://gentleface.com/icons/shift import 'package:flutter/widgets.dart'; class ShiftIcon extends StatelessWidget { const ShiftIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _ShiftIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _ShiftIconPainter extends CustomPainter { _ShiftIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(14.003, 7.5) ..cubicTo(14.003, 7.636, 13.953, 7.754, 13.854, 7.854) ..cubicTo(13.756, 7.951, 13.638, 8, 13.5, 8) ..lineTo(10, 8) ..lineTo(10, 13.5) ..cubicTo(10, 13.641, 9.952, 13.759, 9.856, 13.856) ..cubicTo(9.759, 13.952, 9.641, 14, 9.5, 14) ..lineTo(5.5, 14) ..cubicTo(5.359, 14, 5.241, 13.952, 5.144, 13.856) ..cubicTo(5.048, 13.759, 5, 13.641, 5, 13.5) ..lineTo(5, 8) ..lineTo(1.5, 8) ..cubicTo(1.359, 8, 1.241, 7.952, 1.144, 7.856) ..cubicTo(1.048, 7.759, 1, 7.641, 1, 7.5) ..cubicTo(1, 7.362, 1.049, 7.244, 1.146, 7.146) ..lineTo(7.146, 1.146) ..cubicTo(7.244, 1.049, 7.362, 1, 7.5, 1) ..cubicTo(7.638, 1, 7.756, 1.049, 7.854, 1.146) ..lineTo(13.854, 7.146) ..cubicTo(13.953, 7.246, 14.003, 7.364, 14.003, 7.5) ..close() ..moveTo(5.856, 7.144) ..cubicTo(5.952, 7.241, 6, 7.359, 6, 7.5) ..lineTo(6, 13) ..lineTo(9, 13) ..lineTo(9, 7.5) ..cubicTo(9, 7.359, 9.048, 7.241, 9.144, 7.144) ..cubicTo(9.241, 7.048, 9.359, 7, 9.5, 7) ..lineTo(12.293, 7) ..lineTo(7.5, 2.207) ..lineTo(2.707, 7) ..lineTo(5.5, 7) ..cubicTo(5.641, 7, 5.759, 7.048, 5.856, 7.144) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_ShiftIconPainter old) => old.color != color; } ```