# ease-out icon Ease out. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/ease-out - Category: Design - Use it for: ease out - Tags: ease out, easing, timing function, animation curve, deceleration, decelerate, slow end, cubic bezier, motion, transition - Family: ease-in, ease-in-out - Component name: EaseOutIcon - Added: 2026-10-29 - Since: version 0.2.0 - npm: `import { EaseOutIcon } from '@gentleface/react';` (@gentleface/react 0.2.0) - Changed: 2026-10-30 (added) ## 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/ease-out.svg · PNG https://gentleface.com/png/line-round/16/ease-out.png · https://gentleface.com/png/line-round/32/ease-out.png · https://gentleface.com/png/line-round/48/ease-out.png - line-soft: https://gentleface.com/svg/line-soft/16/ease-out.svg · PNG https://gentleface.com/png/line-soft/16/ease-out.png · https://gentleface.com/png/line-soft/32/ease-out.png · https://gentleface.com/png/line-soft/48/ease-out.png - line-sharp: https://gentleface.com/svg/line-sharp/16/ease-out.svg · PNG https://gentleface.com/png/line-sharp/16/ease-out.png · https://gentleface.com/png/line-sharp/32/ease-out.png · https://gentleface.com/png/line-sharp/48/ease-out.png - solid-round: https://gentleface.com/svg/solid-round/16/ease-out.svg · PNG https://gentleface.com/png/solid-round/16/ease-out.png · https://gentleface.com/png/solid-round/32/ease-out.png · https://gentleface.com/png/solid-round/48/ease-out.png - solid-soft: https://gentleface.com/svg/solid-soft/16/ease-out.svg · PNG https://gentleface.com/png/solid-soft/16/ease-out.png · https://gentleface.com/png/solid-soft/32/ease-out.png · https://gentleface.com/png/solid-soft/48/ease-out.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/ease-out.svg · PNG https://gentleface.com/png/solid-sharp/16/ease-out.png · https://gentleface.com/png/solid-sharp/32/ease-out.png · https://gentleface.com/png/solid-sharp/48/ease-out.png The SVG of every style: https://gentleface.com/icons/ease-out.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 "ease-out" (line-round), MIT. https://gentleface.com/icons/ease-out import type { SVGProps } from 'react'; export function EaseOutIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "ease-out" (line-round), MIT. https://gentleface.com/icons/ease-out. Takes the text color. */ .icon-ease-out { 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='M1 13.5C1 11.91 1.293 10.377 1.878 8.899C2.513 7.294 3.441 5.882 4.661 4.661C5.882 3.441 7.294 2.513 8.899 1.878C10.377 1.293 11.91 1 13.5 1C13.641 1 13.759 1.048 13.856 1.144C13.952 1.241 14 1.359 14 1.5C14 1.641 13.952 1.759 13.856 1.856C13.759 1.952 13.641 2 13.5 2C12.038 2 10.627 2.269 9.267 2.807C7.791 3.392 6.491 4.246 5.368 5.368C4.246 6.491 3.392 7.791 2.807 9.267C2.269 10.627 2 12.038 2 13.5C2 13.641 1.952 13.759 1.856 13.856C1.759 13.952 1.641 14 1.5 14C1.359 14 1.241 13.952 1.144 13.856C1.048 13.759 1 13.641 1 13.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='M1 13.5C1 11.91 1.293 10.377 1.878 8.899C2.513 7.294 3.441 5.882 4.661 4.661C5.882 3.441 7.294 2.513 8.899 1.878C10.377 1.293 11.91 1 13.5 1C13.641 1 13.759 1.048 13.856 1.144C13.952 1.241 14 1.359 14 1.5C14 1.641 13.952 1.759 13.856 1.856C13.759 1.952 13.641 2 13.5 2C12.038 2 10.627 2.269 9.267 2.807C7.791 3.392 6.491 4.246 5.368 5.368C4.246 6.491 3.392 7.791 2.807 9.267C2.269 10.627 2 12.038 2 13.5C2 13.641 1.952 13.759 1.856 13.856C1.759 13.952 1.641 14 1.5 14C1.359 14 1.241 13.952 1.144 13.856C1.048 13.759 1 13.641 1 13.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='M1 13.5C1 11.91 1.293 10.377 1.878 8.899C2.513 7.294 3.441 5.882 4.661 4.661C5.882 3.441 7.294 2.513 8.899 1.878C10.377 1.293 11.91 1 13.5 1C13.641 1 13.759 1.048 13.856 1.144C13.952 1.241 14 1.359 14 1.5C14 1.641 13.952 1.759 13.856 1.856C13.759 1.952 13.641 2 13.5 2C12.038 2 10.627 2.269 9.267 2.807C7.791 3.392 6.491 4.246 5.368 5.368C4.246 6.491 3.392 7.791 2.807 9.267C2.269 10.627 2 12.038 2 13.5C2 13.641 1.952 13.759 1.856 13.856C1.759 13.952 1.641 14 1.5 14C1.359 14 1.241 13.952 1.144 13.856C1.048 13.759 1 13.641 1 13.5Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "ease-out" (line-round), MIT. https://gentleface.com/icons/ease-out import SwiftUI struct EaseOutIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 1, y: 13.5)) p.addCurve(to: CGPoint(x: 1.878, y: 8.899), control1: CGPoint(x: 1, y: 11.91), control2: CGPoint(x: 1.293, y: 10.377)) p.addCurve(to: CGPoint(x: 4.661, y: 4.661), control1: CGPoint(x: 2.513, y: 7.294), control2: CGPoint(x: 3.441, y: 5.882)) p.addCurve(to: CGPoint(x: 8.899, y: 1.878), control1: CGPoint(x: 5.882, y: 3.441), control2: CGPoint(x: 7.294, y: 2.513)) p.addCurve(to: CGPoint(x: 13.5, y: 1), control1: CGPoint(x: 10.377, y: 1.293), control2: CGPoint(x: 11.91, y: 1)) p.addCurve(to: CGPoint(x: 13.856, y: 1.144), control1: CGPoint(x: 13.641, y: 1), control2: CGPoint(x: 13.759, y: 1.048)) p.addCurve(to: CGPoint(x: 14, y: 1.5), control1: CGPoint(x: 13.952, y: 1.241), control2: CGPoint(x: 14, y: 1.359)) p.addCurve(to: CGPoint(x: 13.856, y: 1.856), control1: CGPoint(x: 14, y: 1.641), control2: CGPoint(x: 13.952, y: 1.759)) p.addCurve(to: CGPoint(x: 13.5, y: 2), control1: CGPoint(x: 13.759, y: 1.952), control2: CGPoint(x: 13.641, y: 2)) p.addCurve(to: CGPoint(x: 9.267, y: 2.807), control1: CGPoint(x: 12.038, y: 2), control2: CGPoint(x: 10.627, y: 2.269)) p.addCurve(to: CGPoint(x: 5.368, y: 5.368), control1: CGPoint(x: 7.791, y: 3.392), control2: CGPoint(x: 6.491, y: 4.246)) p.addCurve(to: CGPoint(x: 2.807, y: 9.267), control1: CGPoint(x: 4.246, y: 6.491), control2: CGPoint(x: 3.392, y: 7.791)) p.addCurve(to: CGPoint(x: 2, y: 13.5), control1: CGPoint(x: 2.269, y: 10.627), control2: CGPoint(x: 2, y: 12.038)) p.addCurve(to: CGPoint(x: 1.856, y: 13.856), control1: CGPoint(x: 2, y: 13.641), control2: CGPoint(x: 1.952, y: 13.759)) p.addCurve(to: CGPoint(x: 1.5, y: 14), control1: CGPoint(x: 1.759, y: 13.952), control2: CGPoint(x: 1.641, y: 14)) p.addCurve(to: CGPoint(x: 1.144, y: 13.856), control1: CGPoint(x: 1.359, y: 14), control2: CGPoint(x: 1.241, y: 13.952)) p.addCurve(to: CGPoint(x: 1, y: 13.5), control1: CGPoint(x: 1.048, y: 13.759), control2: CGPoint(x: 1, y: 13.641)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // EaseOutIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "ease-out" (line-round), MIT. https://gentleface.com/icons/ease-out 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 EaseOutIcon: ImageVector by lazy { ImageVector.Builder( name = "ease-out", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M1 13.5C1 11.91 1.293 10.377 1.878 8.899C2.513 7.294 3.441 5.882 4.661 4.661C5.882 3.441 7.294 2.513 8.899 1.878C10.377 1.293 11.91 1 13.5 1C13.641 1 13.759 1.048 13.856 1.144C13.952 1.241 14 1.359 14 1.5C14 1.641 13.952 1.759 13.856 1.856C13.759 1.952 13.641 2 13.5 2C12.038 2 10.627 2.269 9.267 2.807C7.791 3.392 6.491 4.246 5.368 5.368C4.246 6.491 3.392 7.791 2.807 9.267C2.269 10.627 2 12.038 2 13.5C2 13.641 1.952 13.759 1.856 13.856C1.759 13.952 1.641 14 1.5 14C1.359 14 1.241 13.952 1.144 13.856C1.048 13.759 1 13.641 1 13.5Z"), fill = SolidColor(Color.Black), ).build() } // Icon(EaseOutIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "ease-out" (line-round), MIT. https://gentleface.com/icons/ease-out import 'package:flutter/widgets.dart'; class EaseOutIcon extends StatelessWidget { const EaseOutIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _EaseOutIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _EaseOutIconPainter extends CustomPainter { _EaseOutIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(1, 13.5) ..cubicTo(1, 11.91, 1.293, 10.377, 1.878, 8.899) ..cubicTo(2.513, 7.294, 3.441, 5.882, 4.661, 4.661) ..cubicTo(5.882, 3.441, 7.294, 2.513, 8.899, 1.878) ..cubicTo(10.377, 1.293, 11.91, 1, 13.5, 1) ..cubicTo(13.641, 1, 13.759, 1.048, 13.856, 1.144) ..cubicTo(13.952, 1.241, 14, 1.359, 14, 1.5) ..cubicTo(14, 1.641, 13.952, 1.759, 13.856, 1.856) ..cubicTo(13.759, 1.952, 13.641, 2, 13.5, 2) ..cubicTo(12.038, 2, 10.627, 2.269, 9.267, 2.807) ..cubicTo(7.791, 3.392, 6.491, 4.246, 5.368, 5.368) ..cubicTo(4.246, 6.491, 3.392, 7.791, 2.807, 9.267) ..cubicTo(2.269, 10.627, 2, 12.038, 2, 13.5) ..cubicTo(2, 13.641, 1.952, 13.759, 1.856, 13.856) ..cubicTo(1.759, 13.952, 1.641, 14, 1.5, 14) ..cubicTo(1.359, 14, 1.241, 13.952, 1.144, 13.856) ..cubicTo(1.048, 13.759, 1, 13.641, 1, 13.5) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_EaseOutIconPainter old) => old.color != color; } ```