# rocking-chair icon Rocking chair. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/rocking-chair - Category: Home & household - Use it for: rocking chair - Tags: rocking-chair, rocker, chair, seat, furniture, relax, porch, nursery, armchair - Component name: RockingChairIcon - Added: 2026-10-29 - Since: version 0.2.0 - npm: `import { RockingChairIcon } 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/rocking-chair.svg · PNG https://gentleface.com/png/line-round/16/rocking-chair.png · https://gentleface.com/png/line-round/32/rocking-chair.png · https://gentleface.com/png/line-round/48/rocking-chair.png - line-soft: https://gentleface.com/svg/line-soft/16/rocking-chair.svg · PNG https://gentleface.com/png/line-soft/16/rocking-chair.png · https://gentleface.com/png/line-soft/32/rocking-chair.png · https://gentleface.com/png/line-soft/48/rocking-chair.png - line-sharp: https://gentleface.com/svg/line-sharp/16/rocking-chair.svg · PNG https://gentleface.com/png/line-sharp/16/rocking-chair.png · https://gentleface.com/png/line-sharp/32/rocking-chair.png · https://gentleface.com/png/line-sharp/48/rocking-chair.png - solid-round: https://gentleface.com/svg/solid-round/16/rocking-chair.svg · PNG https://gentleface.com/png/solid-round/16/rocking-chair.png · https://gentleface.com/png/solid-round/32/rocking-chair.png · https://gentleface.com/png/solid-round/48/rocking-chair.png - solid-soft: https://gentleface.com/svg/solid-soft/16/rocking-chair.svg · PNG https://gentleface.com/png/solid-soft/16/rocking-chair.png · https://gentleface.com/png/solid-soft/32/rocking-chair.png · https://gentleface.com/png/solid-soft/48/rocking-chair.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/rocking-chair.svg · PNG https://gentleface.com/png/solid-sharp/16/rocking-chair.png · https://gentleface.com/png/solid-sharp/32/rocking-chair.png · https://gentleface.com/png/solid-sharp/48/rocking-chair.png The SVG of every style: https://gentleface.com/icons/rocking-chair.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 "rocking-chair" (line-round), MIT. https://gentleface.com/icons/rocking-chair import type { SVGProps } from 'react'; export function RockingChairIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "rocking-chair" (line-round), MIT. https://gentleface.com/icons/rocking-chair. Takes the text color. */ .icon-rocking-chair { 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='M5.809 7L12.5 7C12.641 7 12.759 7.048 12.856 7.144C12.952 7.241 13 7.359 13 7.5C13 7.641 12.952 7.759 12.856 7.856C12.759 7.952 12.641 8 12.5 8L10.309 8L12.587 12.556C13.146 12.166 13.65 11.706 14.1 11.176C14.191 11.069 14.304 11.01 14.44 10.999C14.575 10.988 14.697 11.028 14.804 11.119C14.912 11.21 14.971 11.323 14.982 11.459C14.993 11.595 14.953 11.716 14.862 11.824C14.05 12.78 13.081 13.534 11.954 14.085C10.707 14.695 9.389 15 8 15C6.611 15 5.293 14.695 4.046 14.085C2.919 13.534 1.95 12.78 1.138 11.824C1.049 11.718 1.01 11.597 1.021 11.459C1.032 11.322 1.09 11.208 1.196 11.119C1.303 11.028 1.425 10.988 1.56 10.999C1.696 11.01 1.809 11.069 1.9 11.176C2.547 11.938 3.306 12.555 4.177 13.028L6.691 8L5.5 8C5.404 8 5.317 7.975 5.237 7.926C5.157 7.876 5.096 7.809 5.053 7.724L2.053 1.724C1.991 1.6 1.982 1.473 2.026 1.342C2.069 1.211 2.153 1.115 2.276 1.053C2.402 0.99 2.53 0.98 2.659 1.023C2.788 1.066 2.884 1.15 2.947 1.276L5.809 7ZM5.084 13.451C6.013 13.817 6.986 14 8 14C9.234 14 10.406 13.729 11.515 13.186C11.587 13.151 11.659 13.115 11.73 13.078L9.191 8L7.809 8L5.084 13.451Z'/%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='M5.809 7L12.5 7C12.641 7 12.759 7.048 12.856 7.144C12.952 7.241 13 7.359 13 7.5C13 7.641 12.952 7.759 12.856 7.856C12.759 7.952 12.641 8 12.5 8L10.309 8L12.587 12.556C13.146 12.166 13.65 11.706 14.1 11.176C14.191 11.069 14.304 11.01 14.44 10.999C14.575 10.988 14.697 11.028 14.804 11.119C14.912 11.21 14.971 11.323 14.982 11.459C14.993 11.595 14.953 11.716 14.862 11.824C14.05 12.78 13.081 13.534 11.954 14.085C10.707 14.695 9.389 15 8 15C6.611 15 5.293 14.695 4.046 14.085C2.919 13.534 1.95 12.78 1.138 11.824C1.049 11.718 1.01 11.597 1.021 11.459C1.032 11.322 1.09 11.208 1.196 11.119C1.303 11.028 1.425 10.988 1.56 10.999C1.696 11.01 1.809 11.069 1.9 11.176C2.547 11.938 3.306 12.555 4.177 13.028L6.691 8L5.5 8C5.404 8 5.317 7.975 5.237 7.926C5.157 7.876 5.096 7.809 5.053 7.724L2.053 1.724C1.991 1.6 1.982 1.473 2.026 1.342C2.069 1.211 2.153 1.115 2.276 1.053C2.402 0.99 2.53 0.98 2.659 1.023C2.788 1.066 2.884 1.15 2.947 1.276L5.809 7ZM5.084 13.451C6.013 13.817 6.986 14 8 14C9.234 14 10.406 13.729 11.515 13.186C11.587 13.151 11.659 13.115 11.73 13.078L9.191 8L7.809 8L5.084 13.451Z'/%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='M5.809 7L12.5 7C12.641 7 12.759 7.048 12.856 7.144C12.952 7.241 13 7.359 13 7.5C13 7.641 12.952 7.759 12.856 7.856C12.759 7.952 12.641 8 12.5 8L10.309 8L12.587 12.556C13.146 12.166 13.65 11.706 14.1 11.176C14.191 11.069 14.304 11.01 14.44 10.999C14.575 10.988 14.697 11.028 14.804 11.119C14.912 11.21 14.971 11.323 14.982 11.459C14.993 11.595 14.953 11.716 14.862 11.824C14.05 12.78 13.081 13.534 11.954 14.085C10.707 14.695 9.389 15 8 15C6.611 15 5.293 14.695 4.046 14.085C2.919 13.534 1.95 12.78 1.138 11.824C1.049 11.718 1.01 11.597 1.021 11.459C1.032 11.322 1.09 11.208 1.196 11.119C1.303 11.028 1.425 10.988 1.56 10.999C1.696 11.01 1.809 11.069 1.9 11.176C2.547 11.938 3.306 12.555 4.177 13.028L6.691 8L5.5 8C5.404 8 5.317 7.975 5.237 7.926C5.157 7.876 5.096 7.809 5.053 7.724L2.053 1.724C1.991 1.6 1.982 1.473 2.026 1.342C2.069 1.211 2.153 1.115 2.276 1.053C2.402 0.99 2.53 0.98 2.659 1.023C2.788 1.066 2.884 1.15 2.947 1.276L5.809 7ZM5.084 13.451C6.013 13.817 6.986 14 8 14C9.234 14 10.406 13.729 11.515 13.186C11.587 13.151 11.659 13.115 11.73 13.078L9.191 8L7.809 8L5.084 13.451Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "rocking-chair" (line-round), MIT. https://gentleface.com/icons/rocking-chair import SwiftUI struct RockingChairIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 5.809, y: 7)) p.addLine(to: CGPoint(x: 12.5, y: 7)) p.addCurve(to: CGPoint(x: 12.856, y: 7.144), control1: CGPoint(x: 12.641, y: 7), control2: CGPoint(x: 12.759, y: 7.048)) p.addCurve(to: CGPoint(x: 13, y: 7.5), control1: CGPoint(x: 12.952, y: 7.241), control2: CGPoint(x: 13, y: 7.359)) p.addCurve(to: CGPoint(x: 12.856, y: 7.856), control1: CGPoint(x: 13, y: 7.641), control2: CGPoint(x: 12.952, y: 7.759)) p.addCurve(to: CGPoint(x: 12.5, y: 8), control1: CGPoint(x: 12.759, y: 7.952), control2: CGPoint(x: 12.641, y: 8)) p.addLine(to: CGPoint(x: 10.309, y: 8)) p.addLine(to: CGPoint(x: 12.587, y: 12.556)) p.addCurve(to: CGPoint(x: 14.1, y: 11.176), control1: CGPoint(x: 13.146, y: 12.166), control2: CGPoint(x: 13.65, y: 11.706)) p.addCurve(to: CGPoint(x: 14.44, y: 10.999), control1: CGPoint(x: 14.191, y: 11.069), control2: CGPoint(x: 14.304, y: 11.01)) p.addCurve(to: CGPoint(x: 14.804, y: 11.119), control1: CGPoint(x: 14.575, y: 10.988), control2: CGPoint(x: 14.697, y: 11.028)) p.addCurve(to: CGPoint(x: 14.982, y: 11.459), control1: CGPoint(x: 14.912, y: 11.21), control2: CGPoint(x: 14.971, y: 11.323)) p.addCurve(to: CGPoint(x: 14.862, y: 11.824), control1: CGPoint(x: 14.993, y: 11.595), control2: CGPoint(x: 14.953, y: 11.716)) p.addCurve(to: CGPoint(x: 11.954, y: 14.085), control1: CGPoint(x: 14.05, y: 12.78), control2: CGPoint(x: 13.081, y: 13.534)) p.addCurve(to: CGPoint(x: 8, y: 15), control1: CGPoint(x: 10.707, y: 14.695), control2: CGPoint(x: 9.389, y: 15)) p.addCurve(to: CGPoint(x: 4.046, y: 14.085), control1: CGPoint(x: 6.611, y: 15), control2: CGPoint(x: 5.293, y: 14.695)) p.addCurve(to: CGPoint(x: 1.138, y: 11.824), control1: CGPoint(x: 2.919, y: 13.534), control2: CGPoint(x: 1.95, y: 12.78)) p.addCurve(to: CGPoint(x: 1.021, y: 11.459), control1: CGPoint(x: 1.049, y: 11.718), control2: CGPoint(x: 1.01, y: 11.597)) p.addCurve(to: CGPoint(x: 1.196, y: 11.119), control1: CGPoint(x: 1.032, y: 11.322), control2: CGPoint(x: 1.09, y: 11.208)) p.addCurve(to: CGPoint(x: 1.56, y: 10.999), control1: CGPoint(x: 1.303, y: 11.028), control2: CGPoint(x: 1.425, y: 10.988)) p.addCurve(to: CGPoint(x: 1.9, y: 11.176), control1: CGPoint(x: 1.696, y: 11.01), control2: CGPoint(x: 1.809, y: 11.069)) p.addCurve(to: CGPoint(x: 4.177, y: 13.028), control1: CGPoint(x: 2.547, y: 11.938), control2: CGPoint(x: 3.306, y: 12.555)) p.addLine(to: CGPoint(x: 6.691, y: 8)) p.addLine(to: CGPoint(x: 5.5, y: 8)) p.addCurve(to: CGPoint(x: 5.237, y: 7.926), control1: CGPoint(x: 5.404, y: 8), control2: CGPoint(x: 5.317, y: 7.975)) p.addCurve(to: CGPoint(x: 5.053, y: 7.724), control1: CGPoint(x: 5.157, y: 7.876), control2: CGPoint(x: 5.096, y: 7.809)) p.addLine(to: CGPoint(x: 2.053, y: 1.724)) p.addCurve(to: CGPoint(x: 2.026, y: 1.342), control1: CGPoint(x: 1.991, y: 1.6), control2: CGPoint(x: 1.982, y: 1.473)) p.addCurve(to: CGPoint(x: 2.276, y: 1.053), control1: CGPoint(x: 2.069, y: 1.211), control2: CGPoint(x: 2.153, y: 1.115)) p.addCurve(to: CGPoint(x: 2.659, y: 1.023), control1: CGPoint(x: 2.402, y: 0.99), control2: CGPoint(x: 2.53, y: 0.98)) p.addCurve(to: CGPoint(x: 2.947, y: 1.276), control1: CGPoint(x: 2.788, y: 1.066), control2: CGPoint(x: 2.884, y: 1.15)) p.addLine(to: CGPoint(x: 5.809, y: 7)) p.closeSubpath() p.move(to: CGPoint(x: 5.084, y: 13.451)) p.addCurve(to: CGPoint(x: 8, y: 14), control1: CGPoint(x: 6.013, y: 13.817), control2: CGPoint(x: 6.986, y: 14)) p.addCurve(to: CGPoint(x: 11.515, y: 13.186), control1: CGPoint(x: 9.234, y: 14), control2: CGPoint(x: 10.406, y: 13.729)) p.addCurve(to: CGPoint(x: 11.73, y: 13.078), control1: CGPoint(x: 11.587, y: 13.151), control2: CGPoint(x: 11.659, y: 13.115)) p.addLine(to: CGPoint(x: 9.191, y: 8)) p.addLine(to: CGPoint(x: 7.809, y: 8)) p.addLine(to: CGPoint(x: 5.084, y: 13.451)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // RockingChairIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "rocking-chair" (line-round), MIT. https://gentleface.com/icons/rocking-chair 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 RockingChairIcon: ImageVector by lazy { ImageVector.Builder( name = "rocking-chair", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M5.809 7L12.5 7C12.641 7 12.759 7.048 12.856 7.144C12.952 7.241 13 7.359 13 7.5C13 7.641 12.952 7.759 12.856 7.856C12.759 7.952 12.641 8 12.5 8L10.309 8L12.587 12.556C13.146 12.166 13.65 11.706 14.1 11.176C14.191 11.069 14.304 11.01 14.44 10.999C14.575 10.988 14.697 11.028 14.804 11.119C14.912 11.21 14.971 11.323 14.982 11.459C14.993 11.595 14.953 11.716 14.862 11.824C14.05 12.78 13.081 13.534 11.954 14.085C10.707 14.695 9.389 15 8 15C6.611 15 5.293 14.695 4.046 14.085C2.919 13.534 1.95 12.78 1.138 11.824C1.049 11.718 1.01 11.597 1.021 11.459C1.032 11.322 1.09 11.208 1.196 11.119C1.303 11.028 1.425 10.988 1.56 10.999C1.696 11.01 1.809 11.069 1.9 11.176C2.547 11.938 3.306 12.555 4.177 13.028L6.691 8L5.5 8C5.404 8 5.317 7.975 5.237 7.926C5.157 7.876 5.096 7.809 5.053 7.724L2.053 1.724C1.991 1.6 1.982 1.473 2.026 1.342C2.069 1.211 2.153 1.115 2.276 1.053C2.402 0.99 2.53 0.98 2.659 1.023C2.788 1.066 2.884 1.15 2.947 1.276L5.809 7ZM5.084 13.451C6.013 13.817 6.986 14 8 14C9.234 14 10.406 13.729 11.515 13.186C11.587 13.151 11.659 13.115 11.73 13.078L9.191 8L7.809 8L5.084 13.451Z"), fill = SolidColor(Color.Black), ).build() } // Icon(RockingChairIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "rocking-chair" (line-round), MIT. https://gentleface.com/icons/rocking-chair import 'package:flutter/widgets.dart'; class RockingChairIcon extends StatelessWidget { const RockingChairIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _RockingChairIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _RockingChairIconPainter extends CustomPainter { _RockingChairIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(5.809, 7) ..lineTo(12.5, 7) ..cubicTo(12.641, 7, 12.759, 7.048, 12.856, 7.144) ..cubicTo(12.952, 7.241, 13, 7.359, 13, 7.5) ..cubicTo(13, 7.641, 12.952, 7.759, 12.856, 7.856) ..cubicTo(12.759, 7.952, 12.641, 8, 12.5, 8) ..lineTo(10.309, 8) ..lineTo(12.587, 12.556) ..cubicTo(13.146, 12.166, 13.65, 11.706, 14.1, 11.176) ..cubicTo(14.191, 11.069, 14.304, 11.01, 14.44, 10.999) ..cubicTo(14.575, 10.988, 14.697, 11.028, 14.804, 11.119) ..cubicTo(14.912, 11.21, 14.971, 11.323, 14.982, 11.459) ..cubicTo(14.993, 11.595, 14.953, 11.716, 14.862, 11.824) ..cubicTo(14.05, 12.78, 13.081, 13.534, 11.954, 14.085) ..cubicTo(10.707, 14.695, 9.389, 15, 8, 15) ..cubicTo(6.611, 15, 5.293, 14.695, 4.046, 14.085) ..cubicTo(2.919, 13.534, 1.95, 12.78, 1.138, 11.824) ..cubicTo(1.049, 11.718, 1.01, 11.597, 1.021, 11.459) ..cubicTo(1.032, 11.322, 1.09, 11.208, 1.196, 11.119) ..cubicTo(1.303, 11.028, 1.425, 10.988, 1.56, 10.999) ..cubicTo(1.696, 11.01, 1.809, 11.069, 1.9, 11.176) ..cubicTo(2.547, 11.938, 3.306, 12.555, 4.177, 13.028) ..lineTo(6.691, 8) ..lineTo(5.5, 8) ..cubicTo(5.404, 8, 5.317, 7.975, 5.237, 7.926) ..cubicTo(5.157, 7.876, 5.096, 7.809, 5.053, 7.724) ..lineTo(2.053, 1.724) ..cubicTo(1.991, 1.6, 1.982, 1.473, 2.026, 1.342) ..cubicTo(2.069, 1.211, 2.153, 1.115, 2.276, 1.053) ..cubicTo(2.402, 0.99, 2.53, 0.98, 2.659, 1.023) ..cubicTo(2.788, 1.066, 2.884, 1.15, 2.947, 1.276) ..lineTo(5.809, 7) ..close() ..moveTo(5.084, 13.451) ..cubicTo(6.013, 13.817, 6.986, 14, 8, 14) ..cubicTo(9.234, 14, 10.406, 13.729, 11.515, 13.186) ..cubicTo(11.587, 13.151, 11.659, 13.115, 11.73, 13.078) ..lineTo(9.191, 8) ..lineTo(7.809, 8) ..lineTo(5.084, 13.451) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_RockingChairIconPainter old) => old.color != color; } ```