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

``` ### CSS ```css /* Gentleface "ease-in-out" (line-round), MIT. https://gentleface.com/icons/ease-in-out. Takes the text color. */ .icon-ease-in-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.5 13C2.199 13 2.874 12.871 3.525 12.614C4.231 12.334 4.852 11.926 5.389 11.389C5.926 10.852 6.334 10.231 6.614 9.525C6.871 8.874 7 8.199 7 7.5C7 6.673 7.152 5.876 7.456 5.107C7.787 4.273 8.269 3.538 8.904 2.904C9.538 2.269 10.273 1.787 11.107 1.456C11.876 1.152 12.673 1 13.5 1C13.638 1 13.756 1.049 13.854 1.146C13.951 1.244 14 1.362 14 1.5C14 1.641 13.952 1.76 13.856 1.856C13.759 1.952 13.641 2 13.5 2C12.801 2 12.126 2.129 11.475 2.386C10.769 2.666 10.148 3.074 9.611 3.611C9.074 4.148 8.666 4.769 8.386 5.475C8.129 6.126 8 6.801 8 7.5C8 8.327 7.848 9.124 7.544 9.893C7.213 10.727 6.731 11.462 6.096 12.096C5.462 12.731 4.727 13.213 3.893 13.544C3.124 13.848 2.327 14 1.5 14C1.359 14 1.241 13.952 1.144 13.856C1.048 13.759 1 13.641 1 13.5C1 13.359 1.048 13.241 1.144 13.144C1.241 13.048 1.359 13 1.5 13Z'/%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.5 13C2.199 13 2.874 12.871 3.525 12.614C4.231 12.334 4.852 11.926 5.389 11.389C5.926 10.852 6.334 10.231 6.614 9.525C6.871 8.874 7 8.199 7 7.5C7 6.673 7.152 5.876 7.456 5.107C7.787 4.273 8.269 3.538 8.904 2.904C9.538 2.269 10.273 1.787 11.107 1.456C11.876 1.152 12.673 1 13.5 1C13.638 1 13.756 1.049 13.854 1.146C13.951 1.244 14 1.362 14 1.5C14 1.641 13.952 1.76 13.856 1.856C13.759 1.952 13.641 2 13.5 2C12.801 2 12.126 2.129 11.475 2.386C10.769 2.666 10.148 3.074 9.611 3.611C9.074 4.148 8.666 4.769 8.386 5.475C8.129 6.126 8 6.801 8 7.5C8 8.327 7.848 9.124 7.544 9.893C7.213 10.727 6.731 11.462 6.096 12.096C5.462 12.731 4.727 13.213 3.893 13.544C3.124 13.848 2.327 14 1.5 14C1.359 14 1.241 13.952 1.144 13.856C1.048 13.759 1 13.641 1 13.5C1 13.359 1.048 13.241 1.144 13.144C1.241 13.048 1.359 13 1.5 13Z'/%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.5 13C2.199 13 2.874 12.871 3.525 12.614C4.231 12.334 4.852 11.926 5.389 11.389C5.926 10.852 6.334 10.231 6.614 9.525C6.871 8.874 7 8.199 7 7.5C7 6.673 7.152 5.876 7.456 5.107C7.787 4.273 8.269 3.538 8.904 2.904C9.538 2.269 10.273 1.787 11.107 1.456C11.876 1.152 12.673 1 13.5 1C13.638 1 13.756 1.049 13.854 1.146C13.951 1.244 14 1.362 14 1.5C14 1.641 13.952 1.76 13.856 1.856C13.759 1.952 13.641 2 13.5 2C12.801 2 12.126 2.129 11.475 2.386C10.769 2.666 10.148 3.074 9.611 3.611C9.074 4.148 8.666 4.769 8.386 5.475C8.129 6.126 8 6.801 8 7.5C8 8.327 7.848 9.124 7.544 9.893C7.213 10.727 6.731 11.462 6.096 12.096C5.462 12.731 4.727 13.213 3.893 13.544C3.124 13.848 2.327 14 1.5 14C1.359 14 1.241 13.952 1.144 13.856C1.048 13.759 1 13.641 1 13.5C1 13.359 1.048 13.241 1.144 13.144C1.241 13.048 1.359 13 1.5 13Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "ease-in-out" (line-round), MIT. https://gentleface.com/icons/ease-in-out import SwiftUI struct EaseInOutIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 1.5, y: 13)) p.addCurve(to: CGPoint(x: 3.525, y: 12.614), control1: CGPoint(x: 2.199, y: 13), control2: CGPoint(x: 2.874, y: 12.871)) p.addCurve(to: CGPoint(x: 5.389, y: 11.389), control1: CGPoint(x: 4.231, y: 12.334), control2: CGPoint(x: 4.852, y: 11.926)) p.addCurve(to: CGPoint(x: 6.614, y: 9.525), control1: CGPoint(x: 5.926, y: 10.852), control2: CGPoint(x: 6.334, y: 10.231)) p.addCurve(to: CGPoint(x: 7, y: 7.5), control1: CGPoint(x: 6.871, y: 8.874), control2: CGPoint(x: 7, y: 8.199)) p.addCurve(to: CGPoint(x: 7.456, y: 5.107), control1: CGPoint(x: 7, y: 6.673), control2: CGPoint(x: 7.152, y: 5.876)) p.addCurve(to: CGPoint(x: 8.904, y: 2.904), control1: CGPoint(x: 7.787, y: 4.273), control2: CGPoint(x: 8.269, y: 3.538)) p.addCurve(to: CGPoint(x: 11.107, y: 1.456), control1: CGPoint(x: 9.538, y: 2.269), control2: CGPoint(x: 10.273, y: 1.787)) p.addCurve(to: CGPoint(x: 13.5, y: 1), control1: CGPoint(x: 11.876, y: 1.152), control2: CGPoint(x: 12.673, y: 1)) p.addCurve(to: CGPoint(x: 13.854, y: 1.146), control1: CGPoint(x: 13.638, y: 1), control2: CGPoint(x: 13.756, y: 1.049)) p.addCurve(to: CGPoint(x: 14, y: 1.5), control1: CGPoint(x: 13.951, y: 1.244), control2: CGPoint(x: 14, y: 1.362)) p.addCurve(to: CGPoint(x: 13.856, y: 1.856), control1: CGPoint(x: 14, y: 1.641), control2: CGPoint(x: 13.952, y: 1.76)) 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: 11.475, y: 2.386), control1: CGPoint(x: 12.801, y: 2), control2: CGPoint(x: 12.126, y: 2.129)) p.addCurve(to: CGPoint(x: 9.611, y: 3.611), control1: CGPoint(x: 10.769, y: 2.666), control2: CGPoint(x: 10.148, y: 3.074)) p.addCurve(to: CGPoint(x: 8.386, y: 5.475), control1: CGPoint(x: 9.074, y: 4.148), control2: CGPoint(x: 8.666, y: 4.769)) p.addCurve(to: CGPoint(x: 8, y: 7.5), control1: CGPoint(x: 8.129, y: 6.126), control2: CGPoint(x: 8, y: 6.801)) p.addCurve(to: CGPoint(x: 7.544, y: 9.893), control1: CGPoint(x: 8, y: 8.327), control2: CGPoint(x: 7.848, y: 9.124)) p.addCurve(to: CGPoint(x: 6.096, y: 12.096), control1: CGPoint(x: 7.213, y: 10.727), control2: CGPoint(x: 6.731, y: 11.462)) p.addCurve(to: CGPoint(x: 3.893, y: 13.544), control1: CGPoint(x: 5.462, y: 12.731), control2: CGPoint(x: 4.727, y: 13.213)) p.addCurve(to: CGPoint(x: 1.5, y: 14), control1: CGPoint(x: 3.124, y: 13.848), control2: CGPoint(x: 2.327, 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.addCurve(to: CGPoint(x: 1.144, y: 13.144), control1: CGPoint(x: 1, y: 13.359), control2: CGPoint(x: 1.048, y: 13.241)) p.addCurve(to: CGPoint(x: 1.5, y: 13), control1: CGPoint(x: 1.241, y: 13.048), control2: CGPoint(x: 1.359, y: 13)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // EaseInOutIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "ease-in-out" (line-round), MIT. https://gentleface.com/icons/ease-in-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 EaseInOutIcon: ImageVector by lazy { ImageVector.Builder( name = "ease-in-out", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M1.5 13C2.199 13 2.874 12.871 3.525 12.614C4.231 12.334 4.852 11.926 5.389 11.389C5.926 10.852 6.334 10.231 6.614 9.525C6.871 8.874 7 8.199 7 7.5C7 6.673 7.152 5.876 7.456 5.107C7.787 4.273 8.269 3.538 8.904 2.904C9.538 2.269 10.273 1.787 11.107 1.456C11.876 1.152 12.673 1 13.5 1C13.638 1 13.756 1.049 13.854 1.146C13.951 1.244 14 1.362 14 1.5C14 1.641 13.952 1.76 13.856 1.856C13.759 1.952 13.641 2 13.5 2C12.801 2 12.126 2.129 11.475 2.386C10.769 2.666 10.148 3.074 9.611 3.611C9.074 4.148 8.666 4.769 8.386 5.475C8.129 6.126 8 6.801 8 7.5C8 8.327 7.848 9.124 7.544 9.893C7.213 10.727 6.731 11.462 6.096 12.096C5.462 12.731 4.727 13.213 3.893 13.544C3.124 13.848 2.327 14 1.5 14C1.359 14 1.241 13.952 1.144 13.856C1.048 13.759 1 13.641 1 13.5C1 13.359 1.048 13.241 1.144 13.144C1.241 13.048 1.359 13 1.5 13Z"), fill = SolidColor(Color.Black), ).build() } // Icon(EaseInOutIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "ease-in-out" (line-round), MIT. https://gentleface.com/icons/ease-in-out import 'package:flutter/widgets.dart'; class EaseInOutIcon extends StatelessWidget { const EaseInOutIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _EaseInOutIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _EaseInOutIconPainter extends CustomPainter { _EaseInOutIconPainter(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.5, 13) ..cubicTo(2.199, 13, 2.874, 12.871, 3.525, 12.614) ..cubicTo(4.231, 12.334, 4.852, 11.926, 5.389, 11.389) ..cubicTo(5.926, 10.852, 6.334, 10.231, 6.614, 9.525) ..cubicTo(6.871, 8.874, 7, 8.199, 7, 7.5) ..cubicTo(7, 6.673, 7.152, 5.876, 7.456, 5.107) ..cubicTo(7.787, 4.273, 8.269, 3.538, 8.904, 2.904) ..cubicTo(9.538, 2.269, 10.273, 1.787, 11.107, 1.456) ..cubicTo(11.876, 1.152, 12.673, 1, 13.5, 1) ..cubicTo(13.638, 1, 13.756, 1.049, 13.854, 1.146) ..cubicTo(13.951, 1.244, 14, 1.362, 14, 1.5) ..cubicTo(14, 1.641, 13.952, 1.76, 13.856, 1.856) ..cubicTo(13.759, 1.952, 13.641, 2, 13.5, 2) ..cubicTo(12.801, 2, 12.126, 2.129, 11.475, 2.386) ..cubicTo(10.769, 2.666, 10.148, 3.074, 9.611, 3.611) ..cubicTo(9.074, 4.148, 8.666, 4.769, 8.386, 5.475) ..cubicTo(8.129, 6.126, 8, 6.801, 8, 7.5) ..cubicTo(8, 8.327, 7.848, 9.124, 7.544, 9.893) ..cubicTo(7.213, 10.727, 6.731, 11.462, 6.096, 12.096) ..cubicTo(5.462, 12.731, 4.727, 13.213, 3.893, 13.544) ..cubicTo(3.124, 13.848, 2.327, 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) ..cubicTo(1, 13.359, 1.048, 13.241, 1.144, 13.144) ..cubicTo(1.241, 13.048, 1.359, 13, 1.5, 13) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_EaseInOutIconPainter old) => old.color != color; } ```