Gentleface › Design › ease-in-out
ease-in-out icon
ease-in-outEase in out: ease in out, easing, easing curve, timing function. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.
Code line-round
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path 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"/></svg>
// Gentleface "ease-in-out" (line-round), MIT. https://gentleface.com/icons/ease-in-out
import type { SVGProps } from 'react';
export function EaseInOutIcon(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="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" />
</svg>
);
}Vue: see /icons/ease-in-out.md
Svelte: see /icons/ease-in-out.md
HTML img: see /icons/ease-in-out.md
CSS: see /icons/ease-in-out.md
Data URL: see /icons/ease-in-out.md
Sprite: see /icons/ease-in-out.md
SwiftUI: see /icons/ease-in-out.md
Compose: see /icons/ease-in-out.md
Android XML: see /icons/ease-in-out.md
Flutter: see /icons/ease-in-out.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 { EaseInOutIcon } from '@gentleface/react'; (setup).
Meaning
- Use it for
- ease in out, easing, easing curve, timing function, cubic bezier
- Alternatives
bounce: a bouncing easing that overshoots
- Also fits
- bounce: a smooth easing without overshoot
- Tags
- ease in out, easing, timing function, animation curve, s-curve, sigmoid, smooth, cubic bezier, motion, transition
- Category
- Design
- Component name
EaseInOutIcon- History
- released in 0.2.0
- added
- Since
- version 0.2.0
Family 2
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/ease-in-out.json · Markdown: /icons/ease-in-out.md · SVG: https://gentleface.com/svg/{style}/16/ease-in-out.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/ease-in-out.png