Gentleface › Design › send-to-back

send-to-back icon

Send to back: send to back, move to back, send to bottom. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path 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"/></svg>

React

// Gentleface "send-to-back" (line-round), MIT. https://gentleface.com/icons/send-to-back
import type { SVGProps } from 'react';

export function SendToBackIcon(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="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" />
    </svg>
  );
}

Vue

Vue: see /icons/send-to-back.md

Svelte

Svelte: see /icons/send-to-back.md

HTML img

HTML img: see /icons/send-to-back.md

CSS

CSS: see /icons/send-to-back.md

Data URL

Data URL: see /icons/send-to-back.md

Sprite

Sprite: see /icons/send-to-back.md

SwiftUI

SwiftUI: see /icons/send-to-back.md

Compose

Compose: see /icons/send-to-back.md

Android XML

Android XML: see /icons/send-to-back.md

Flutter

Flutter: see /icons/send-to-back.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 { SendToBackIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

send to back, move to back, send to bottom

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

Tags

send to back, move to back, send to bottom, arrange, z-order, order, back, bottom, behind, stack, overlap, figma, design tool, ui design

Category

Design

Component name

SendToBackIcon

History

2026-10-29 released in 0.2.0
2026-10-30 added

Since

version 0.2.0

Family 5

bring-forward bring-forward-stack bring-to-front bring-to-front-stack send-backward

More design icons

align-horizontal-center align-objects-bottom align-objects-bottom-three align-objects-left align-objects-left-three align-objects-right align-objects-right-three align-objects-top align-objects-top-three align-vertical-center angle animation animation-off auto-layout-horizontal auto-layout-vertical auto-layout-wrap · all design icons

For agents

Metadata: /icons/send-to-back.json · Markdown: /icons/send-to-back.md · SVG: https://gentleface.com/svg/{style}/16/send-to-back.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/send-to-back.png

send-to-back icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp