# more-horizontal icon More horizontal. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/more-horizontal - Category: Layout & interface - Use it for: more, more actions, overflow menu, more options, meatballs menu - Tags: more, ellipsis, dots, overflow, options, meatballs - Family: more-vertical - Component name: MoreHorizontalIcon - Added: 2026-10-14 ## Alternatives - `more-horizontal-circle`: the iOS More button (ellipsis.circle) in a toolbar - `more-vertical`: the Android and Material overflow menu, vertical dots ## Don't confuse with - `grip-horizontal`: a dot grip is a drag handle, not more ## Also fits - menu: a menu of extra actions (more) - more vertical: the iOS and web default (more) ## Not for - typing indicator (use `message-dots`): the bare ellipsis is the more menu - horizontal drag handle (use `grip-horizontal`): three dots in a row mean more actions ## 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/more-horizontal.svg · PNG https://gentleface.com/png/line-round/16/more-horizontal.png · https://gentleface.com/png/line-round/32/more-horizontal.png · https://gentleface.com/png/line-round/48/more-horizontal.png - line-soft: https://gentleface.com/svg/line-soft/16/more-horizontal.svg · PNG https://gentleface.com/png/line-soft/16/more-horizontal.png · https://gentleface.com/png/line-soft/32/more-horizontal.png · https://gentleface.com/png/line-soft/48/more-horizontal.png - line-sharp: https://gentleface.com/svg/line-sharp/16/more-horizontal.svg · PNG https://gentleface.com/png/line-sharp/16/more-horizontal.png · https://gentleface.com/png/line-sharp/32/more-horizontal.png · https://gentleface.com/png/line-sharp/48/more-horizontal.png - solid-round: https://gentleface.com/svg/solid-round/16/more-horizontal.svg · PNG https://gentleface.com/png/solid-round/16/more-horizontal.png · https://gentleface.com/png/solid-round/32/more-horizontal.png · https://gentleface.com/png/solid-round/48/more-horizontal.png - solid-soft: https://gentleface.com/svg/solid-soft/16/more-horizontal.svg · PNG https://gentleface.com/png/solid-soft/16/more-horizontal.png · https://gentleface.com/png/solid-soft/32/more-horizontal.png · https://gentleface.com/png/solid-soft/48/more-horizontal.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/more-horizontal.svg · PNG https://gentleface.com/png/solid-sharp/16/more-horizontal.png · https://gentleface.com/png/solid-sharp/32/more-horizontal.png · https://gentleface.com/png/solid-sharp/48/more-horizontal.png The SVG of every style: https://gentleface.com/icons/more-horizontal.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 "more-horizontal" (line-round), MIT. https://gentleface.com/icons/more-horizontal import type { SVGProps } from 'react'; export function MoreHorizontalIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "more-horizontal" (line-round), MIT. https://gentleface.com/icons/more-horizontal. Takes the text color. */ .icon-more-horizontal { 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='M3.561 6.439C3.854 6.732 4 7.086 4 7.5C4 7.914 3.854 8.268 3.561 8.561C3.268 8.854 2.914 9 2.5 9C2.086 9 1.732 8.854 1.439 8.561C1.146 8.268 1 7.914 1 7.5C1 7.086 1.146 6.732 1.439 6.439C1.732 6.146 2.086 6 2.5 6C2.914 6 3.268 6.146 3.561 6.439ZM8.561 6.439C8.854 6.732 9 7.086 9 7.5C9 7.914 8.854 8.268 8.561 8.561C8.268 8.854 7.914 9 7.5 9C7.086 9 6.732 8.854 6.439 8.561C6.146 8.268 6 7.914 6 7.5C6 7.086 6.146 6.732 6.439 6.439C6.732 6.146 7.086 6 7.5 6C7.914 6 8.268 6.146 8.561 6.439ZM13.561 6.439C13.854 6.732 14 7.086 14 7.5C14 7.914 13.854 8.268 13.561 8.561C13.268 8.854 12.914 9 12.5 9C12.086 9 11.732 8.854 11.439 8.561C11.146 8.268 11 7.914 11 7.5C11 7.086 11.146 6.732 11.439 6.439C11.732 6.146 12.086 6 12.5 6C12.914 6 13.268 6.146 13.561 6.439Z'/%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='M3.561 6.439C3.854 6.732 4 7.086 4 7.5C4 7.914 3.854 8.268 3.561 8.561C3.268 8.854 2.914 9 2.5 9C2.086 9 1.732 8.854 1.439 8.561C1.146 8.268 1 7.914 1 7.5C1 7.086 1.146 6.732 1.439 6.439C1.732 6.146 2.086 6 2.5 6C2.914 6 3.268 6.146 3.561 6.439ZM8.561 6.439C8.854 6.732 9 7.086 9 7.5C9 7.914 8.854 8.268 8.561 8.561C8.268 8.854 7.914 9 7.5 9C7.086 9 6.732 8.854 6.439 8.561C6.146 8.268 6 7.914 6 7.5C6 7.086 6.146 6.732 6.439 6.439C6.732 6.146 7.086 6 7.5 6C7.914 6 8.268 6.146 8.561 6.439ZM13.561 6.439C13.854 6.732 14 7.086 14 7.5C14 7.914 13.854 8.268 13.561 8.561C13.268 8.854 12.914 9 12.5 9C12.086 9 11.732 8.854 11.439 8.561C11.146 8.268 11 7.914 11 7.5C11 7.086 11.146 6.732 11.439 6.439C11.732 6.146 12.086 6 12.5 6C12.914 6 13.268 6.146 13.561 6.439Z'/%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='M3.561 6.439C3.854 6.732 4 7.086 4 7.5C4 7.914 3.854 8.268 3.561 8.561C3.268 8.854 2.914 9 2.5 9C2.086 9 1.732 8.854 1.439 8.561C1.146 8.268 1 7.914 1 7.5C1 7.086 1.146 6.732 1.439 6.439C1.732 6.146 2.086 6 2.5 6C2.914 6 3.268 6.146 3.561 6.439ZM8.561 6.439C8.854 6.732 9 7.086 9 7.5C9 7.914 8.854 8.268 8.561 8.561C8.268 8.854 7.914 9 7.5 9C7.086 9 6.732 8.854 6.439 8.561C6.146 8.268 6 7.914 6 7.5C6 7.086 6.146 6.732 6.439 6.439C6.732 6.146 7.086 6 7.5 6C7.914 6 8.268 6.146 8.561 6.439ZM13.561 6.439C13.854 6.732 14 7.086 14 7.5C14 7.914 13.854 8.268 13.561 8.561C13.268 8.854 12.914 9 12.5 9C12.086 9 11.732 8.854 11.439 8.561C11.146 8.268 11 7.914 11 7.5C11 7.086 11.146 6.732 11.439 6.439C11.732 6.146 12.086 6 12.5 6C12.914 6 13.268 6.146 13.561 6.439Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "more-horizontal" (line-round), MIT. https://gentleface.com/icons/more-horizontal import SwiftUI struct MoreHorizontalIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 3.561, y: 6.439)) p.addCurve(to: CGPoint(x: 4, y: 7.5), control1: CGPoint(x: 3.854, y: 6.732), control2: CGPoint(x: 4, y: 7.086)) p.addCurve(to: CGPoint(x: 3.561, y: 8.561), control1: CGPoint(x: 4, y: 7.914), control2: CGPoint(x: 3.854, y: 8.268)) p.addCurve(to: CGPoint(x: 2.5, y: 9), control1: CGPoint(x: 3.268, y: 8.854), control2: CGPoint(x: 2.914, y: 9)) p.addCurve(to: CGPoint(x: 1.439, y: 8.561), control1: CGPoint(x: 2.086, y: 9), control2: CGPoint(x: 1.732, y: 8.854)) p.addCurve(to: CGPoint(x: 1, y: 7.5), control1: CGPoint(x: 1.146, y: 8.268), control2: CGPoint(x: 1, y: 7.914)) p.addCurve(to: CGPoint(x: 1.439, y: 6.439), control1: CGPoint(x: 1, y: 7.086), control2: CGPoint(x: 1.146, y: 6.732)) p.addCurve(to: CGPoint(x: 2.5, y: 6), control1: CGPoint(x: 1.732, y: 6.146), control2: CGPoint(x: 2.086, y: 6)) p.addCurve(to: CGPoint(x: 3.561, y: 6.439), control1: CGPoint(x: 2.914, y: 6), control2: CGPoint(x: 3.268, y: 6.146)) p.closeSubpath() p.move(to: CGPoint(x: 8.561, y: 6.439)) p.addCurve(to: CGPoint(x: 9, y: 7.5), control1: CGPoint(x: 8.854, y: 6.732), control2: CGPoint(x: 9, y: 7.086)) p.addCurve(to: CGPoint(x: 8.561, y: 8.561), control1: CGPoint(x: 9, y: 7.914), control2: CGPoint(x: 8.854, y: 8.268)) p.addCurve(to: CGPoint(x: 7.5, y: 9), control1: CGPoint(x: 8.268, y: 8.854), control2: CGPoint(x: 7.914, y: 9)) p.addCurve(to: CGPoint(x: 6.439, y: 8.561), control1: CGPoint(x: 7.086, y: 9), control2: CGPoint(x: 6.732, y: 8.854)) p.addCurve(to: CGPoint(x: 6, y: 7.5), control1: CGPoint(x: 6.146, y: 8.268), control2: CGPoint(x: 6, y: 7.914)) p.addCurve(to: CGPoint(x: 6.439, y: 6.439), control1: CGPoint(x: 6, y: 7.086), control2: CGPoint(x: 6.146, y: 6.732)) p.addCurve(to: CGPoint(x: 7.5, y: 6), control1: CGPoint(x: 6.732, y: 6.146), control2: CGPoint(x: 7.086, y: 6)) p.addCurve(to: CGPoint(x: 8.561, y: 6.439), control1: CGPoint(x: 7.914, y: 6), control2: CGPoint(x: 8.268, y: 6.146)) p.closeSubpath() p.move(to: CGPoint(x: 13.561, y: 6.439)) p.addCurve(to: CGPoint(x: 14, y: 7.5), control1: CGPoint(x: 13.854, y: 6.732), control2: CGPoint(x: 14, y: 7.086)) p.addCurve(to: CGPoint(x: 13.561, y: 8.561), control1: CGPoint(x: 14, y: 7.914), control2: CGPoint(x: 13.854, y: 8.268)) p.addCurve(to: CGPoint(x: 12.5, y: 9), control1: CGPoint(x: 13.268, y: 8.854), control2: CGPoint(x: 12.914, y: 9)) p.addCurve(to: CGPoint(x: 11.439, y: 8.561), control1: CGPoint(x: 12.086, y: 9), control2: CGPoint(x: 11.732, y: 8.854)) p.addCurve(to: CGPoint(x: 11, y: 7.5), control1: CGPoint(x: 11.146, y: 8.268), control2: CGPoint(x: 11, y: 7.914)) p.addCurve(to: CGPoint(x: 11.439, y: 6.439), control1: CGPoint(x: 11, y: 7.086), control2: CGPoint(x: 11.146, y: 6.732)) p.addCurve(to: CGPoint(x: 12.5, y: 6), control1: CGPoint(x: 11.732, y: 6.146), control2: CGPoint(x: 12.086, y: 6)) p.addCurve(to: CGPoint(x: 13.561, y: 6.439), control1: CGPoint(x: 12.914, y: 6), control2: CGPoint(x: 13.268, y: 6.146)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // MoreHorizontalIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "more-horizontal" (line-round), MIT. https://gentleface.com/icons/more-horizontal 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 MoreHorizontalIcon: ImageVector by lazy { ImageVector.Builder( name = "more-horizontal", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M3.561 6.439C3.854 6.732 4 7.086 4 7.5C4 7.914 3.854 8.268 3.561 8.561C3.268 8.854 2.914 9 2.5 9C2.086 9 1.732 8.854 1.439 8.561C1.146 8.268 1 7.914 1 7.5C1 7.086 1.146 6.732 1.439 6.439C1.732 6.146 2.086 6 2.5 6C2.914 6 3.268 6.146 3.561 6.439ZM8.561 6.439C8.854 6.732 9 7.086 9 7.5C9 7.914 8.854 8.268 8.561 8.561C8.268 8.854 7.914 9 7.5 9C7.086 9 6.732 8.854 6.439 8.561C6.146 8.268 6 7.914 6 7.5C6 7.086 6.146 6.732 6.439 6.439C6.732 6.146 7.086 6 7.5 6C7.914 6 8.268 6.146 8.561 6.439ZM13.561 6.439C13.854 6.732 14 7.086 14 7.5C14 7.914 13.854 8.268 13.561 8.561C13.268 8.854 12.914 9 12.5 9C12.086 9 11.732 8.854 11.439 8.561C11.146 8.268 11 7.914 11 7.5C11 7.086 11.146 6.732 11.439 6.439C11.732 6.146 12.086 6 12.5 6C12.914 6 13.268 6.146 13.561 6.439Z"), fill = SolidColor(Color.Black), ).build() } // Icon(MoreHorizontalIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "more-horizontal" (line-round), MIT. https://gentleface.com/icons/more-horizontal import 'package:flutter/widgets.dart'; class MoreHorizontalIcon extends StatelessWidget { const MoreHorizontalIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _MoreHorizontalIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _MoreHorizontalIconPainter extends CustomPainter { _MoreHorizontalIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(3.561, 6.439) ..cubicTo(3.854, 6.732, 4, 7.086, 4, 7.5) ..cubicTo(4, 7.914, 3.854, 8.268, 3.561, 8.561) ..cubicTo(3.268, 8.854, 2.914, 9, 2.5, 9) ..cubicTo(2.086, 9, 1.732, 8.854, 1.439, 8.561) ..cubicTo(1.146, 8.268, 1, 7.914, 1, 7.5) ..cubicTo(1, 7.086, 1.146, 6.732, 1.439, 6.439) ..cubicTo(1.732, 6.146, 2.086, 6, 2.5, 6) ..cubicTo(2.914, 6, 3.268, 6.146, 3.561, 6.439) ..close() ..moveTo(8.561, 6.439) ..cubicTo(8.854, 6.732, 9, 7.086, 9, 7.5) ..cubicTo(9, 7.914, 8.854, 8.268, 8.561, 8.561) ..cubicTo(8.268, 8.854, 7.914, 9, 7.5, 9) ..cubicTo(7.086, 9, 6.732, 8.854, 6.439, 8.561) ..cubicTo(6.146, 8.268, 6, 7.914, 6, 7.5) ..cubicTo(6, 7.086, 6.146, 6.732, 6.439, 6.439) ..cubicTo(6.732, 6.146, 7.086, 6, 7.5, 6) ..cubicTo(7.914, 6, 8.268, 6.146, 8.561, 6.439) ..close() ..moveTo(13.561, 6.439) ..cubicTo(13.854, 6.732, 14, 7.086, 14, 7.5) ..cubicTo(14, 7.914, 13.854, 8.268, 13.561, 8.561) ..cubicTo(13.268, 8.854, 12.914, 9, 12.5, 9) ..cubicTo(12.086, 9, 11.732, 8.854, 11.439, 8.561) ..cubicTo(11.146, 8.268, 11, 7.914, 11, 7.5) ..cubicTo(11, 7.086, 11.146, 6.732, 11.439, 6.439) ..cubicTo(11.732, 6.146, 12.086, 6, 12.5, 6) ..cubicTo(12.914, 6, 13.268, 6.146, 13.561, 6.439) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_MoreHorizontalIconPainter old) => old.color != color; } ```