# send-to-back icon Send to back. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/send-to-back - Category: Design - Use it for: send to back, move to back, send to bottom - Tags: send to back, move to back, send to bottom, arrange, z-order, order, back, bottom, behind, stack, overlap, figma, design tool, ui design - Family: bring-forward, bring-forward-stack, bring-to-front, bring-to-front-stack, send-backward - Component name: SendToBackIcon - Added: 2026-10-29 - Since: version 0.2.0 - npm: `import { SendToBackIcon } from '@gentleface/react';` (@gentleface/react 0.2.0) - Changed: 2026-10-30 (added) ## Alternatives - `send-backward`: one step down ## Also fits - move to bottom: the bottom of the z-order on a canvas (send-to-back) - z order: move to the bottom of the stack in one step - send backward: all the way to the bottom of the stack ## 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/send-to-back.svg · PNG https://gentleface.com/png/line-round/16/send-to-back.png · https://gentleface.com/png/line-round/32/send-to-back.png · https://gentleface.com/png/line-round/48/send-to-back.png - line-soft: https://gentleface.com/svg/line-soft/16/send-to-back.svg · PNG https://gentleface.com/png/line-soft/16/send-to-back.png · https://gentleface.com/png/line-soft/32/send-to-back.png · https://gentleface.com/png/line-soft/48/send-to-back.png - line-sharp: https://gentleface.com/svg/line-sharp/16/send-to-back.svg · PNG https://gentleface.com/png/line-sharp/16/send-to-back.png · https://gentleface.com/png/line-sharp/32/send-to-back.png · https://gentleface.com/png/line-sharp/48/send-to-back.png - solid-round: https://gentleface.com/svg/solid-round/16/send-to-back.svg · PNG https://gentleface.com/png/solid-round/16/send-to-back.png · https://gentleface.com/png/solid-round/32/send-to-back.png · https://gentleface.com/png/solid-round/48/send-to-back.png - solid-soft: https://gentleface.com/svg/solid-soft/16/send-to-back.svg · PNG https://gentleface.com/png/solid-soft/16/send-to-back.png · https://gentleface.com/png/solid-soft/32/send-to-back.png · https://gentleface.com/png/solid-soft/48/send-to-back.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/send-to-back.svg · PNG https://gentleface.com/png/solid-sharp/16/send-to-back.png · https://gentleface.com/png/solid-sharp/32/send-to-back.png · https://gentleface.com/png/solid-sharp/48/send-to-back.png The SVG of every style: https://gentleface.com/icons/send-to-back.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 "send-to-back" (line-round), MIT. https://gentleface.com/icons/send-to-back import type { SVGProps } from 'react'; export function SendToBackIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "send-to-back" (line-round), MIT. https://gentleface.com/icons/send-to-back. Takes the text color. */ .icon-send-to-back { 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='M5.707 1.293C5.902 1.488 6 1.724 6 2L6 5C6 5.276 5.902 5.512 5.707 5.707C5.512 5.902 5.276 6 5 6L2 6C1.724 6 1.488 5.902 1.293 5.707C1.098 5.512 1 5.276 1 5L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L5 1C5.276 1 5.512 1.098 5.707 1.293ZM2 5L5 5L5 2L2 2L2 5ZM6.414 6.414C6.805 6.024 7 5.552 7 5L10 5C10.276 5 10.512 5.098 10.707 5.293C10.902 5.488 11 5.724 11 6L11 9C10.448 9 9.976 9.195 9.586 9.586C9.195 9.976 9 10.448 9 11L6 11C5.724 11 5.488 10.902 5.293 10.707C5.098 10.512 5 10.276 5 10L5 7C5.552 7 6.024 6.805 6.414 6.414ZM14.707 14.707C14.512 14.902 14.276 15 14 15L11 15C10.724 15 10.488 14.902 10.293 14.707C10.098 14.512 10 14.276 10 14L10 11C10 10.724 10.098 10.488 10.293 10.293C10.488 10.098 10.724 10 11 10L14 10C14.276 10 14.512 10.098 14.707 10.293C14.902 10.488 15 10.724 15 11L15 14C15 14.276 14.902 14.512 14.707 14.707ZM14 14L14 11L11 11L11 14L14 14Z'/%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='M5.707 1.293C5.902 1.488 6 1.724 6 2L6 5C6 5.276 5.902 5.512 5.707 5.707C5.512 5.902 5.276 6 5 6L2 6C1.724 6 1.488 5.902 1.293 5.707C1.098 5.512 1 5.276 1 5L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L5 1C5.276 1 5.512 1.098 5.707 1.293ZM2 5L5 5L5 2L2 2L2 5ZM6.414 6.414C6.805 6.024 7 5.552 7 5L10 5C10.276 5 10.512 5.098 10.707 5.293C10.902 5.488 11 5.724 11 6L11 9C10.448 9 9.976 9.195 9.586 9.586C9.195 9.976 9 10.448 9 11L6 11C5.724 11 5.488 10.902 5.293 10.707C5.098 10.512 5 10.276 5 10L5 7C5.552 7 6.024 6.805 6.414 6.414ZM14.707 14.707C14.512 14.902 14.276 15 14 15L11 15C10.724 15 10.488 14.902 10.293 14.707C10.098 14.512 10 14.276 10 14L10 11C10 10.724 10.098 10.488 10.293 10.293C10.488 10.098 10.724 10 11 10L14 10C14.276 10 14.512 10.098 14.707 10.293C14.902 10.488 15 10.724 15 11L15 14C15 14.276 14.902 14.512 14.707 14.707ZM14 14L14 11L11 11L11 14L14 14Z'/%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='M5.707 1.293C5.902 1.488 6 1.724 6 2L6 5C6 5.276 5.902 5.512 5.707 5.707C5.512 5.902 5.276 6 5 6L2 6C1.724 6 1.488 5.902 1.293 5.707C1.098 5.512 1 5.276 1 5L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L5 1C5.276 1 5.512 1.098 5.707 1.293ZM2 5L5 5L5 2L2 2L2 5ZM6.414 6.414C6.805 6.024 7 5.552 7 5L10 5C10.276 5 10.512 5.098 10.707 5.293C10.902 5.488 11 5.724 11 6L11 9C10.448 9 9.976 9.195 9.586 9.586C9.195 9.976 9 10.448 9 11L6 11C5.724 11 5.488 10.902 5.293 10.707C5.098 10.512 5 10.276 5 10L5 7C5.552 7 6.024 6.805 6.414 6.414ZM14.707 14.707C14.512 14.902 14.276 15 14 15L11 15C10.724 15 10.488 14.902 10.293 14.707C10.098 14.512 10 14.276 10 14L10 11C10 10.724 10.098 10.488 10.293 10.293C10.488 10.098 10.724 10 11 10L14 10C14.276 10 14.512 10.098 14.707 10.293C14.902 10.488 15 10.724 15 11L15 14C15 14.276 14.902 14.512 14.707 14.707ZM14 14L14 11L11 11L11 14L14 14Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "send-to-back" (line-round), MIT. https://gentleface.com/icons/send-to-back import SwiftUI struct SendToBackIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 5.707, y: 1.293)) p.addCurve(to: CGPoint(x: 6, y: 2), control1: CGPoint(x: 5.902, y: 1.488), control2: CGPoint(x: 6, y: 1.724)) p.addLine(to: CGPoint(x: 6, y: 5)) p.addCurve(to: CGPoint(x: 5.707, y: 5.707), control1: CGPoint(x: 6, y: 5.276), control2: CGPoint(x: 5.902, y: 5.512)) p.addCurve(to: CGPoint(x: 5, y: 6), control1: CGPoint(x: 5.512, y: 5.902), control2: CGPoint(x: 5.276, y: 6)) p.addLine(to: CGPoint(x: 2, y: 6)) p.addCurve(to: CGPoint(x: 1.293, y: 5.707), control1: CGPoint(x: 1.724, y: 6), control2: CGPoint(x: 1.488, y: 5.902)) p.addCurve(to: CGPoint(x: 1, y: 5), control1: CGPoint(x: 1.098, y: 5.512), control2: CGPoint(x: 1, y: 5.276)) p.addLine(to: CGPoint(x: 1, y: 2)) p.addCurve(to: CGPoint(x: 1.293, y: 1.293), control1: CGPoint(x: 1, y: 1.724), control2: CGPoint(x: 1.098, y: 1.488)) p.addCurve(to: CGPoint(x: 2, y: 1), control1: CGPoint(x: 1.488, y: 1.098), control2: CGPoint(x: 1.724, y: 1)) p.addLine(to: CGPoint(x: 5, y: 1)) p.addCurve(to: CGPoint(x: 5.707, y: 1.293), control1: CGPoint(x: 5.276, y: 1), control2: CGPoint(x: 5.512, y: 1.098)) p.closeSubpath() p.move(to: CGPoint(x: 2, y: 5)) p.addLine(to: CGPoint(x: 5, y: 5)) p.addLine(to: CGPoint(x: 5, y: 2)) p.addLine(to: CGPoint(x: 2, y: 2)) p.addLine(to: CGPoint(x: 2, y: 5)) p.closeSubpath() p.move(to: CGPoint(x: 6.414, y: 6.414)) p.addCurve(to: CGPoint(x: 7, y: 5), control1: CGPoint(x: 6.805, y: 6.024), control2: CGPoint(x: 7, y: 5.552)) p.addLine(to: CGPoint(x: 10, y: 5)) p.addCurve(to: CGPoint(x: 10.707, y: 5.293), control1: CGPoint(x: 10.276, y: 5), control2: CGPoint(x: 10.512, y: 5.098)) p.addCurve(to: CGPoint(x: 11, y: 6), control1: CGPoint(x: 10.902, y: 5.488), control2: CGPoint(x: 11, y: 5.724)) p.addLine(to: CGPoint(x: 11, y: 9)) p.addCurve(to: CGPoint(x: 9.586, y: 9.586), control1: CGPoint(x: 10.448, y: 9), control2: CGPoint(x: 9.976, y: 9.195)) p.addCurve(to: CGPoint(x: 9, y: 11), control1: CGPoint(x: 9.195, y: 9.976), control2: CGPoint(x: 9, y: 10.448)) p.addLine(to: CGPoint(x: 6, y: 11)) p.addCurve(to: CGPoint(x: 5.293, y: 10.707), control1: CGPoint(x: 5.724, y: 11), control2: CGPoint(x: 5.488, y: 10.902)) p.addCurve(to: CGPoint(x: 5, y: 10), control1: CGPoint(x: 5.098, y: 10.512), control2: CGPoint(x: 5, y: 10.276)) p.addLine(to: CGPoint(x: 5, y: 7)) p.addCurve(to: CGPoint(x: 6.414, y: 6.414), control1: CGPoint(x: 5.552, y: 7), control2: CGPoint(x: 6.024, y: 6.805)) p.closeSubpath() p.move(to: CGPoint(x: 14.707, y: 14.707)) p.addCurve(to: CGPoint(x: 14, y: 15), control1: CGPoint(x: 14.512, y: 14.902), control2: CGPoint(x: 14.276, y: 15)) p.addLine(to: CGPoint(x: 11, y: 15)) p.addCurve(to: CGPoint(x: 10.293, y: 14.707), control1: CGPoint(x: 10.724, y: 15), control2: CGPoint(x: 10.488, y: 14.902)) p.addCurve(to: CGPoint(x: 10, y: 14), control1: CGPoint(x: 10.098, y: 14.512), control2: CGPoint(x: 10, y: 14.276)) p.addLine(to: CGPoint(x: 10, y: 11)) p.addCurve(to: CGPoint(x: 10.293, y: 10.293), control1: CGPoint(x: 10, y: 10.724), control2: CGPoint(x: 10.098, y: 10.488)) p.addCurve(to: CGPoint(x: 11, y: 10), control1: CGPoint(x: 10.488, y: 10.098), control2: CGPoint(x: 10.724, y: 10)) p.addLine(to: CGPoint(x: 14, y: 10)) p.addCurve(to: CGPoint(x: 14.707, y: 10.293), control1: CGPoint(x: 14.276, y: 10), control2: CGPoint(x: 14.512, y: 10.098)) p.addCurve(to: CGPoint(x: 15, y: 11), control1: CGPoint(x: 14.902, y: 10.488), control2: CGPoint(x: 15, y: 10.724)) p.addLine(to: CGPoint(x: 15, y: 14)) p.addCurve(to: CGPoint(x: 14.707, y: 14.707), control1: CGPoint(x: 15, y: 14.276), control2: CGPoint(x: 14.902, y: 14.512)) p.closeSubpath() p.move(to: CGPoint(x: 14, y: 14)) p.addLine(to: CGPoint(x: 14, y: 11)) p.addLine(to: CGPoint(x: 11, y: 11)) p.addLine(to: CGPoint(x: 11, y: 14)) p.addLine(to: CGPoint(x: 14, y: 14)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // SendToBackIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "send-to-back" (line-round), MIT. https://gentleface.com/icons/send-to-back 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 SendToBackIcon: ImageVector by lazy { ImageVector.Builder( name = "send-to-back", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M5.707 1.293C5.902 1.488 6 1.724 6 2L6 5C6 5.276 5.902 5.512 5.707 5.707C5.512 5.902 5.276 6 5 6L2 6C1.724 6 1.488 5.902 1.293 5.707C1.098 5.512 1 5.276 1 5L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L5 1C5.276 1 5.512 1.098 5.707 1.293ZM2 5L5 5L5 2L2 2L2 5ZM6.414 6.414C6.805 6.024 7 5.552 7 5L10 5C10.276 5 10.512 5.098 10.707 5.293C10.902 5.488 11 5.724 11 6L11 9C10.448 9 9.976 9.195 9.586 9.586C9.195 9.976 9 10.448 9 11L6 11C5.724 11 5.488 10.902 5.293 10.707C5.098 10.512 5 10.276 5 10L5 7C5.552 7 6.024 6.805 6.414 6.414ZM14.707 14.707C14.512 14.902 14.276 15 14 15L11 15C10.724 15 10.488 14.902 10.293 14.707C10.098 14.512 10 14.276 10 14L10 11C10 10.724 10.098 10.488 10.293 10.293C10.488 10.098 10.724 10 11 10L14 10C14.276 10 14.512 10.098 14.707 10.293C14.902 10.488 15 10.724 15 11L15 14C15 14.276 14.902 14.512 14.707 14.707ZM14 14L14 11L11 11L11 14L14 14Z"), fill = SolidColor(Color.Black), ).build() } // Icon(SendToBackIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "send-to-back" (line-round), MIT. https://gentleface.com/icons/send-to-back import 'package:flutter/widgets.dart'; class SendToBackIcon extends StatelessWidget { const SendToBackIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _SendToBackIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _SendToBackIconPainter extends CustomPainter { _SendToBackIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(5.707, 1.293) ..cubicTo(5.902, 1.488, 6, 1.724, 6, 2) ..lineTo(6, 5) ..cubicTo(6, 5.276, 5.902, 5.512, 5.707, 5.707) ..cubicTo(5.512, 5.902, 5.276, 6, 5, 6) ..lineTo(2, 6) ..cubicTo(1.724, 6, 1.488, 5.902, 1.293, 5.707) ..cubicTo(1.098, 5.512, 1, 5.276, 1, 5) ..lineTo(1, 2) ..cubicTo(1, 1.724, 1.098, 1.488, 1.293, 1.293) ..cubicTo(1.488, 1.098, 1.724, 1, 2, 1) ..lineTo(5, 1) ..cubicTo(5.276, 1, 5.512, 1.098, 5.707, 1.293) ..close() ..moveTo(2, 5) ..lineTo(5, 5) ..lineTo(5, 2) ..lineTo(2, 2) ..lineTo(2, 5) ..close() ..moveTo(6.414, 6.414) ..cubicTo(6.805, 6.024, 7, 5.552, 7, 5) ..lineTo(10, 5) ..cubicTo(10.276, 5, 10.512, 5.098, 10.707, 5.293) ..cubicTo(10.902, 5.488, 11, 5.724, 11, 6) ..lineTo(11, 9) ..cubicTo(10.448, 9, 9.976, 9.195, 9.586, 9.586) ..cubicTo(9.195, 9.976, 9, 10.448, 9, 11) ..lineTo(6, 11) ..cubicTo(5.724, 11, 5.488, 10.902, 5.293, 10.707) ..cubicTo(5.098, 10.512, 5, 10.276, 5, 10) ..lineTo(5, 7) ..cubicTo(5.552, 7, 6.024, 6.805, 6.414, 6.414) ..close() ..moveTo(14.707, 14.707) ..cubicTo(14.512, 14.902, 14.276, 15, 14, 15) ..lineTo(11, 15) ..cubicTo(10.724, 15, 10.488, 14.902, 10.293, 14.707) ..cubicTo(10.098, 14.512, 10, 14.276, 10, 14) ..lineTo(10, 11) ..cubicTo(10, 10.724, 10.098, 10.488, 10.293, 10.293) ..cubicTo(10.488, 10.098, 10.724, 10, 11, 10) ..lineTo(14, 10) ..cubicTo(14.276, 10, 14.512, 10.098, 14.707, 10.293) ..cubicTo(14.902, 10.488, 15, 10.724, 15, 11) ..lineTo(15, 14) ..cubicTo(15, 14.276, 14.902, 14.512, 14.707, 14.707) ..close() ..moveTo(14, 14) ..lineTo(14, 11) ..lineTo(11, 11) ..lineTo(11, 14) ..lineTo(14, 14) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_SendToBackIconPainter old) => old.color != color; } ```