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

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