# send icon Send. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/send - Category: Communication - Use it for: send, submit message, send message - Tags: paper-plane, send, message, submit - Component name: SendIcon - Added: 2026-10-14 ## Alternatives - `send-horizontal`: the horizontal paper plane, where the product uses it ## Don't confuse with - `arrow-right`: arrow-right is navigation; the paper plane is the send convention ## Also fits - go: submit a message (send) - outbox: the send action or the Sent folder - send money: send a message ## Not for - navigation (use `navigation`): the paper plane means send - plane (use `plane`): the paper plane means send ## 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.svg · PNG https://gentleface.com/png/line-round/16/send.png · https://gentleface.com/png/line-round/32/send.png · https://gentleface.com/png/line-round/48/send.png - line-soft: https://gentleface.com/svg/line-soft/16/send.svg · PNG https://gentleface.com/png/line-soft/16/send.png · https://gentleface.com/png/line-soft/32/send.png · https://gentleface.com/png/line-soft/48/send.png - line-sharp: https://gentleface.com/svg/line-sharp/16/send.svg · PNG https://gentleface.com/png/line-sharp/16/send.png · https://gentleface.com/png/line-sharp/32/send.png · https://gentleface.com/png/line-sharp/48/send.png - solid-round: https://gentleface.com/svg/solid-round/16/send.svg · PNG https://gentleface.com/png/solid-round/16/send.png · https://gentleface.com/png/solid-round/32/send.png · https://gentleface.com/png/solid-round/48/send.png - solid-soft: https://gentleface.com/svg/solid-soft/16/send.svg · PNG https://gentleface.com/png/solid-soft/16/send.png · https://gentleface.com/png/solid-soft/32/send.png · https://gentleface.com/png/solid-soft/48/send.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/send.svg · PNG https://gentleface.com/png/solid-sharp/16/send.png · https://gentleface.com/png/solid-sharp/32/send.png · https://gentleface.com/png/solid-sharp/48/send.png The SVG of every style: https://gentleface.com/icons/send.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" (line-round), MIT. https://gentleface.com/icons/send import type { SVGProps } from 'react'; export function SendIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "send" (line-round), MIT. https://gentleface.com/icons/send. Takes the text color. */ .icon-send { 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='M7.342 9.607C7.267 9.383 7.146 9.187 6.98 9.02C6.813 8.854 6.617 8.733 6.393 8.658L1.342 6.974C1.208 6.93 1.111 6.847 1.05 6.725C0.989 6.603 0.981 6.476 1.026 6.342C1.078 6.184 1.184 6.078 1.342 6.026L13.342 2.026C13.473 1.982 13.6 1.991 13.724 2.053C13.847 2.115 13.931 2.211 13.974 2.342C14.009 2.447 14.009 2.553 13.974 2.658L9.974 14.658C9.931 14.789 9.847 14.885 9.724 14.947C9.6 15.009 9.473 15.018 9.342 14.974C9.184 14.922 9.078 14.816 9.026 14.658L7.342 9.607ZM3.081 6.5L6.709 7.709C6.921 7.78 7.117 7.875 7.298 7.995L9.146 6.146C9.246 6.047 9.364 5.997 9.5 5.997C9.636 5.997 9.754 6.047 9.854 6.146C9.951 6.244 10 6.362 10 6.5C10 6.638 9.951 6.756 9.854 6.854L8.005 8.702C8.125 8.883 8.22 9.079 8.291 9.291L9.5 12.919L12.709 3.291L3.081 6.5Z'/%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='M7.342 9.607C7.267 9.383 7.146 9.187 6.98 9.02C6.813 8.854 6.617 8.733 6.393 8.658L1.342 6.974C1.208 6.93 1.111 6.847 1.05 6.725C0.989 6.603 0.981 6.476 1.026 6.342C1.078 6.184 1.184 6.078 1.342 6.026L13.342 2.026C13.473 1.982 13.6 1.991 13.724 2.053C13.847 2.115 13.931 2.211 13.974 2.342C14.009 2.447 14.009 2.553 13.974 2.658L9.974 14.658C9.931 14.789 9.847 14.885 9.724 14.947C9.6 15.009 9.473 15.018 9.342 14.974C9.184 14.922 9.078 14.816 9.026 14.658L7.342 9.607ZM3.081 6.5L6.709 7.709C6.921 7.78 7.117 7.875 7.298 7.995L9.146 6.146C9.246 6.047 9.364 5.997 9.5 5.997C9.636 5.997 9.754 6.047 9.854 6.146C9.951 6.244 10 6.362 10 6.5C10 6.638 9.951 6.756 9.854 6.854L8.005 8.702C8.125 8.883 8.22 9.079 8.291 9.291L9.5 12.919L12.709 3.291L3.081 6.5Z'/%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='M7.342 9.607C7.267 9.383 7.146 9.187 6.98 9.02C6.813 8.854 6.617 8.733 6.393 8.658L1.342 6.974C1.208 6.93 1.111 6.847 1.05 6.725C0.989 6.603 0.981 6.476 1.026 6.342C1.078 6.184 1.184 6.078 1.342 6.026L13.342 2.026C13.473 1.982 13.6 1.991 13.724 2.053C13.847 2.115 13.931 2.211 13.974 2.342C14.009 2.447 14.009 2.553 13.974 2.658L9.974 14.658C9.931 14.789 9.847 14.885 9.724 14.947C9.6 15.009 9.473 15.018 9.342 14.974C9.184 14.922 9.078 14.816 9.026 14.658L7.342 9.607ZM3.081 6.5L6.709 7.709C6.921 7.78 7.117 7.875 7.298 7.995L9.146 6.146C9.246 6.047 9.364 5.997 9.5 5.997C9.636 5.997 9.754 6.047 9.854 6.146C9.951 6.244 10 6.362 10 6.5C10 6.638 9.951 6.756 9.854 6.854L8.005 8.702C8.125 8.883 8.22 9.079 8.291 9.291L9.5 12.919L12.709 3.291L3.081 6.5Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "send" (line-round), MIT. https://gentleface.com/icons/send import SwiftUI struct SendIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 7.342, y: 9.607)) p.addCurve(to: CGPoint(x: 6.98, y: 9.02), control1: CGPoint(x: 7.267, y: 9.383), control2: CGPoint(x: 7.146, y: 9.187)) p.addCurve(to: CGPoint(x: 6.393, y: 8.658), control1: CGPoint(x: 6.813, y: 8.854), control2: CGPoint(x: 6.617, y: 8.733)) p.addLine(to: CGPoint(x: 1.342, y: 6.974)) p.addCurve(to: CGPoint(x: 1.05, y: 6.725), control1: CGPoint(x: 1.208, y: 6.93), control2: CGPoint(x: 1.111, y: 6.847)) p.addCurve(to: CGPoint(x: 1.026, y: 6.342), control1: CGPoint(x: 0.989, y: 6.603), control2: CGPoint(x: 0.981, y: 6.476)) p.addCurve(to: CGPoint(x: 1.342, y: 6.026), control1: CGPoint(x: 1.078, y: 6.184), control2: CGPoint(x: 1.184, y: 6.078)) p.addLine(to: CGPoint(x: 13.342, y: 2.026)) p.addCurve(to: CGPoint(x: 13.724, y: 2.053), control1: CGPoint(x: 13.473, y: 1.982), control2: CGPoint(x: 13.6, y: 1.991)) p.addCurve(to: CGPoint(x: 13.974, y: 2.342), control1: CGPoint(x: 13.847, y: 2.115), control2: CGPoint(x: 13.931, y: 2.211)) p.addCurve(to: CGPoint(x: 13.974, y: 2.658), control1: CGPoint(x: 14.009, y: 2.447), control2: CGPoint(x: 14.009, y: 2.553)) p.addLine(to: CGPoint(x: 9.974, y: 14.658)) p.addCurve(to: CGPoint(x: 9.724, y: 14.947), control1: CGPoint(x: 9.931, y: 14.789), control2: CGPoint(x: 9.847, y: 14.885)) p.addCurve(to: CGPoint(x: 9.342, y: 14.974), control1: CGPoint(x: 9.6, y: 15.009), control2: CGPoint(x: 9.473, y: 15.018)) p.addCurve(to: CGPoint(x: 9.026, y: 14.658), control1: CGPoint(x: 9.184, y: 14.922), control2: CGPoint(x: 9.078, y: 14.816)) p.addLine(to: CGPoint(x: 7.342, y: 9.607)) p.closeSubpath() p.move(to: CGPoint(x: 3.081, y: 6.5)) p.addLine(to: CGPoint(x: 6.709, y: 7.709)) p.addCurve(to: CGPoint(x: 7.298, y: 7.995), control1: CGPoint(x: 6.921, y: 7.78), control2: CGPoint(x: 7.117, y: 7.875)) p.addLine(to: CGPoint(x: 9.146, y: 6.146)) p.addCurve(to: CGPoint(x: 9.5, y: 5.997), control1: CGPoint(x: 9.246, y: 6.047), control2: CGPoint(x: 9.364, y: 5.997)) p.addCurve(to: CGPoint(x: 9.854, y: 6.146), control1: CGPoint(x: 9.636, y: 5.997), control2: CGPoint(x: 9.754, y: 6.047)) p.addCurve(to: CGPoint(x: 10, y: 6.5), control1: CGPoint(x: 9.951, y: 6.244), control2: CGPoint(x: 10, y: 6.362)) p.addCurve(to: CGPoint(x: 9.854, y: 6.854), control1: CGPoint(x: 10, y: 6.638), control2: CGPoint(x: 9.951, y: 6.756)) p.addLine(to: CGPoint(x: 8.005, y: 8.702)) p.addCurve(to: CGPoint(x: 8.291, y: 9.291), control1: CGPoint(x: 8.125, y: 8.883), control2: CGPoint(x: 8.22, y: 9.079)) p.addLine(to: CGPoint(x: 9.5, y: 12.919)) p.addLine(to: CGPoint(x: 12.709, y: 3.291)) p.addLine(to: CGPoint(x: 3.081, y: 6.5)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // SendIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "send" (line-round), MIT. https://gentleface.com/icons/send 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 SendIcon: ImageVector by lazy { ImageVector.Builder( name = "send", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M7.342 9.607C7.267 9.383 7.146 9.187 6.98 9.02C6.813 8.854 6.617 8.733 6.393 8.658L1.342 6.974C1.208 6.93 1.111 6.847 1.05 6.725C0.989 6.603 0.981 6.476 1.026 6.342C1.078 6.184 1.184 6.078 1.342 6.026L13.342 2.026C13.473 1.982 13.6 1.991 13.724 2.053C13.847 2.115 13.931 2.211 13.974 2.342C14.009 2.447 14.009 2.553 13.974 2.658L9.974 14.658C9.931 14.789 9.847 14.885 9.724 14.947C9.6 15.009 9.473 15.018 9.342 14.974C9.184 14.922 9.078 14.816 9.026 14.658L7.342 9.607ZM3.081 6.5L6.709 7.709C6.921 7.78 7.117 7.875 7.298 7.995L9.146 6.146C9.246 6.047 9.364 5.997 9.5 5.997C9.636 5.997 9.754 6.047 9.854 6.146C9.951 6.244 10 6.362 10 6.5C10 6.638 9.951 6.756 9.854 6.854L8.005 8.702C8.125 8.883 8.22 9.079 8.291 9.291L9.5 12.919L12.709 3.291L3.081 6.5Z"), fill = SolidColor(Color.Black), ).build() } // Icon(SendIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "send" (line-round), MIT. https://gentleface.com/icons/send import 'package:flutter/widgets.dart'; class SendIcon extends StatelessWidget { const SendIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _SendIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _SendIconPainter extends CustomPainter { _SendIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(7.342, 9.607) ..cubicTo(7.267, 9.383, 7.146, 9.187, 6.98, 9.02) ..cubicTo(6.813, 8.854, 6.617, 8.733, 6.393, 8.658) ..lineTo(1.342, 6.974) ..cubicTo(1.208, 6.93, 1.111, 6.847, 1.05, 6.725) ..cubicTo(0.989, 6.603, 0.981, 6.476, 1.026, 6.342) ..cubicTo(1.078, 6.184, 1.184, 6.078, 1.342, 6.026) ..lineTo(13.342, 2.026) ..cubicTo(13.473, 1.982, 13.6, 1.991, 13.724, 2.053) ..cubicTo(13.847, 2.115, 13.931, 2.211, 13.974, 2.342) ..cubicTo(14.009, 2.447, 14.009, 2.553, 13.974, 2.658) ..lineTo(9.974, 14.658) ..cubicTo(9.931, 14.789, 9.847, 14.885, 9.724, 14.947) ..cubicTo(9.6, 15.009, 9.473, 15.018, 9.342, 14.974) ..cubicTo(9.184, 14.922, 9.078, 14.816, 9.026, 14.658) ..lineTo(7.342, 9.607) ..close() ..moveTo(3.081, 6.5) ..lineTo(6.709, 7.709) ..cubicTo(6.921, 7.78, 7.117, 7.875, 7.298, 7.995) ..lineTo(9.146, 6.146) ..cubicTo(9.246, 6.047, 9.364, 5.997, 9.5, 5.997) ..cubicTo(9.636, 5.997, 9.754, 6.047, 9.854, 6.146) ..cubicTo(9.951, 6.244, 10, 6.362, 10, 6.5) ..cubicTo(10, 6.638, 9.951, 6.756, 9.854, 6.854) ..lineTo(8.005, 8.702) ..cubicTo(8.125, 8.883, 8.22, 9.079, 8.291, 9.291) ..lineTo(9.5, 12.919) ..lineTo(12.709, 3.291) ..lineTo(3.081, 6.5) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_SendIconPainter old) => old.color != color; } ```