# ungroup icon Ungroup. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/ungroup - Category: Design - Use it for: ungroup, ungroup objects - Tags: ungroup, ungroup objects, separate, split, detach, break apart, objects, arrange, layers, design tool - Component name: UngroupIcon - Added: 2026-10-29 - Since: version 0.2.0 - npm: `import { UngroupIcon } 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/ungroup.svg · PNG https://gentleface.com/png/line-round/16/ungroup.png · https://gentleface.com/png/line-round/32/ungroup.png · https://gentleface.com/png/line-round/48/ungroup.png - line-soft: https://gentleface.com/svg/line-soft/16/ungroup.svg · PNG https://gentleface.com/png/line-soft/16/ungroup.png · https://gentleface.com/png/line-soft/32/ungroup.png · https://gentleface.com/png/line-soft/48/ungroup.png - line-sharp: https://gentleface.com/svg/line-sharp/16/ungroup.svg · PNG https://gentleface.com/png/line-sharp/16/ungroup.png · https://gentleface.com/png/line-sharp/32/ungroup.png · https://gentleface.com/png/line-sharp/48/ungroup.png - solid-round: https://gentleface.com/svg/solid-round/16/ungroup.svg · PNG https://gentleface.com/png/solid-round/16/ungroup.png · https://gentleface.com/png/solid-round/32/ungroup.png · https://gentleface.com/png/solid-round/48/ungroup.png - solid-soft: https://gentleface.com/svg/solid-soft/16/ungroup.svg · PNG https://gentleface.com/png/solid-soft/16/ungroup.png · https://gentleface.com/png/solid-soft/32/ungroup.png · https://gentleface.com/png/solid-soft/48/ungroup.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/ungroup.svg · PNG https://gentleface.com/png/solid-sharp/16/ungroup.png · https://gentleface.com/png/solid-sharp/32/ungroup.png · https://gentleface.com/png/solid-sharp/48/ungroup.png The SVG of every style: https://gentleface.com/icons/ungroup.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 "ungroup" (line-round), MIT. https://gentleface.com/icons/ungroup import type { SVGProps } from 'react'; export function UngroupIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "ungroup" (line-round), MIT. https://gentleface.com/icons/ungroup. Takes the text color. */ .icon-ungroup { 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.707 1.293C8.902 1.488 9 1.724 9 2L9 6C9 6.276 8.902 6.512 8.707 6.707C8.512 6.902 8.276 7 8 7L2 7C1.724 7 1.488 6.902 1.293 6.707C1.098 6.512 1 6.276 1 6L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L8 1C8.276 1 8.512 1.098 8.707 1.293ZM2 6L8 6L8 2L2 2L2 6ZM14.707 14.707C14.512 14.902 14.276 15 14 15L8 15C7.724 15 7.488 14.902 7.293 14.707C7.098 14.512 7 14.276 7 14L7 10C7 9.724 7.098 9.488 7.293 9.293C7.488 9.098 7.724 9 8 9L14 9C14.276 9 14.512 9.098 14.707 9.293C14.902 9.488 15 9.724 15 10L15 14C15 14.276 14.902 14.512 14.707 14.707ZM14 14L14 10L8 10L8 14L14 14Z'/%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.707 1.293C8.902 1.488 9 1.724 9 2L9 6C9 6.276 8.902 6.512 8.707 6.707C8.512 6.902 8.276 7 8 7L2 7C1.724 7 1.488 6.902 1.293 6.707C1.098 6.512 1 6.276 1 6L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L8 1C8.276 1 8.512 1.098 8.707 1.293ZM2 6L8 6L8 2L2 2L2 6ZM14.707 14.707C14.512 14.902 14.276 15 14 15L8 15C7.724 15 7.488 14.902 7.293 14.707C7.098 14.512 7 14.276 7 14L7 10C7 9.724 7.098 9.488 7.293 9.293C7.488 9.098 7.724 9 8 9L14 9C14.276 9 14.512 9.098 14.707 9.293C14.902 9.488 15 9.724 15 10L15 14C15 14.276 14.902 14.512 14.707 14.707ZM14 14L14 10L8 10L8 14L14 14Z'/%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.707 1.293C8.902 1.488 9 1.724 9 2L9 6C9 6.276 8.902 6.512 8.707 6.707C8.512 6.902 8.276 7 8 7L2 7C1.724 7 1.488 6.902 1.293 6.707C1.098 6.512 1 6.276 1 6L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L8 1C8.276 1 8.512 1.098 8.707 1.293ZM2 6L8 6L8 2L2 2L2 6ZM14.707 14.707C14.512 14.902 14.276 15 14 15L8 15C7.724 15 7.488 14.902 7.293 14.707C7.098 14.512 7 14.276 7 14L7 10C7 9.724 7.098 9.488 7.293 9.293C7.488 9.098 7.724 9 8 9L14 9C14.276 9 14.512 9.098 14.707 9.293C14.902 9.488 15 9.724 15 10L15 14C15 14.276 14.902 14.512 14.707 14.707ZM14 14L14 10L8 10L8 14L14 14Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "ungroup" (line-round), MIT. https://gentleface.com/icons/ungroup import SwiftUI struct UngroupIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 8.707, y: 1.293)) p.addCurve(to: CGPoint(x: 9, y: 2), control1: CGPoint(x: 8.902, y: 1.488), control2: CGPoint(x: 9, y: 1.724)) p.addLine(to: CGPoint(x: 9, y: 6)) p.addCurve(to: CGPoint(x: 8.707, y: 6.707), control1: CGPoint(x: 9, y: 6.276), control2: CGPoint(x: 8.902, y: 6.512)) p.addCurve(to: CGPoint(x: 8, y: 7), control1: CGPoint(x: 8.512, y: 6.902), control2: CGPoint(x: 8.276, y: 7)) p.addLine(to: CGPoint(x: 2, y: 7)) p.addCurve(to: CGPoint(x: 1.293, y: 6.707), control1: CGPoint(x: 1.724, y: 7), control2: CGPoint(x: 1.488, y: 6.902)) p.addCurve(to: CGPoint(x: 1, y: 6), control1: CGPoint(x: 1.098, y: 6.512), control2: CGPoint(x: 1, y: 6.276)) p.addLine(to: CGPoint(x: 1, y: 2)) p.addCurve(to: CGPoint(x: 1.293, y: 1.293), control1: CGPoint(x: 1, y: 1.724), control2: CGPoint(x: 1.098, y: 1.488)) p.addCurve(to: CGPoint(x: 2, y: 1), control1: CGPoint(x: 1.488, y: 1.098), control2: CGPoint(x: 1.724, y: 1)) p.addLine(to: CGPoint(x: 8, y: 1)) p.addCurve(to: CGPoint(x: 8.707, y: 1.293), control1: CGPoint(x: 8.276, y: 1), control2: CGPoint(x: 8.512, y: 1.098)) p.closeSubpath() p.move(to: CGPoint(x: 2, y: 6)) p.addLine(to: CGPoint(x: 8, y: 6)) p.addLine(to: CGPoint(x: 8, y: 2)) p.addLine(to: CGPoint(x: 2, y: 2)) p.addLine(to: CGPoint(x: 2, y: 6)) p.closeSubpath() p.move(to: CGPoint(x: 14.707, y: 14.707)) p.addCurve(to: CGPoint(x: 14, y: 15), control1: CGPoint(x: 14.512, y: 14.902), control2: CGPoint(x: 14.276, y: 15)) p.addLine(to: CGPoint(x: 8, y: 15)) p.addCurve(to: CGPoint(x: 7.293, y: 14.707), control1: CGPoint(x: 7.724, y: 15), control2: CGPoint(x: 7.488, y: 14.902)) p.addCurve(to: CGPoint(x: 7, y: 14), control1: CGPoint(x: 7.098, y: 14.512), control2: CGPoint(x: 7, y: 14.276)) p.addLine(to: CGPoint(x: 7, y: 10)) p.addCurve(to: CGPoint(x: 7.293, y: 9.293), control1: CGPoint(x: 7, y: 9.724), control2: CGPoint(x: 7.098, y: 9.488)) p.addCurve(to: CGPoint(x: 8, y: 9), control1: CGPoint(x: 7.488, y: 9.098), control2: CGPoint(x: 7.724, y: 9)) p.addLine(to: CGPoint(x: 14, y: 9)) p.addCurve(to: CGPoint(x: 14.707, y: 9.293), control1: CGPoint(x: 14.276, y: 9), control2: CGPoint(x: 14.512, y: 9.098)) p.addCurve(to: CGPoint(x: 15, y: 10), control1: CGPoint(x: 14.902, y: 9.488), control2: CGPoint(x: 15, y: 9.724)) p.addLine(to: CGPoint(x: 15, y: 14)) p.addCurve(to: CGPoint(x: 14.707, y: 14.707), control1: CGPoint(x: 15, y: 14.276), control2: CGPoint(x: 14.902, y: 14.512)) p.closeSubpath() p.move(to: CGPoint(x: 14, y: 14)) p.addLine(to: CGPoint(x: 14, y: 10)) p.addLine(to: CGPoint(x: 8, y: 10)) p.addLine(to: CGPoint(x: 8, y: 14)) p.addLine(to: CGPoint(x: 14, y: 14)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // UngroupIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "ungroup" (line-round), MIT. https://gentleface.com/icons/ungroup 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 UngroupIcon: ImageVector by lazy { ImageVector.Builder( name = "ungroup", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M8.707 1.293C8.902 1.488 9 1.724 9 2L9 6C9 6.276 8.902 6.512 8.707 6.707C8.512 6.902 8.276 7 8 7L2 7C1.724 7 1.488 6.902 1.293 6.707C1.098 6.512 1 6.276 1 6L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L8 1C8.276 1 8.512 1.098 8.707 1.293ZM2 6L8 6L8 2L2 2L2 6ZM14.707 14.707C14.512 14.902 14.276 15 14 15L8 15C7.724 15 7.488 14.902 7.293 14.707C7.098 14.512 7 14.276 7 14L7 10C7 9.724 7.098 9.488 7.293 9.293C7.488 9.098 7.724 9 8 9L14 9C14.276 9 14.512 9.098 14.707 9.293C14.902 9.488 15 9.724 15 10L15 14C15 14.276 14.902 14.512 14.707 14.707ZM14 14L14 10L8 10L8 14L14 14Z"), fill = SolidColor(Color.Black), ).build() } // Icon(UngroupIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "ungroup" (line-round), MIT. https://gentleface.com/icons/ungroup import 'package:flutter/widgets.dart'; class UngroupIcon extends StatelessWidget { const UngroupIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _UngroupIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _UngroupIconPainter extends CustomPainter { _UngroupIconPainter(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.707, 1.293) ..cubicTo(8.902, 1.488, 9, 1.724, 9, 2) ..lineTo(9, 6) ..cubicTo(9, 6.276, 8.902, 6.512, 8.707, 6.707) ..cubicTo(8.512, 6.902, 8.276, 7, 8, 7) ..lineTo(2, 7) ..cubicTo(1.724, 7, 1.488, 6.902, 1.293, 6.707) ..cubicTo(1.098, 6.512, 1, 6.276, 1, 6) ..lineTo(1, 2) ..cubicTo(1, 1.724, 1.098, 1.488, 1.293, 1.293) ..cubicTo(1.488, 1.098, 1.724, 1, 2, 1) ..lineTo(8, 1) ..cubicTo(8.276, 1, 8.512, 1.098, 8.707, 1.293) ..close() ..moveTo(2, 6) ..lineTo(8, 6) ..lineTo(8, 2) ..lineTo(2, 2) ..lineTo(2, 6) ..close() ..moveTo(14.707, 14.707) ..cubicTo(14.512, 14.902, 14.276, 15, 14, 15) ..lineTo(8, 15) ..cubicTo(7.724, 15, 7.488, 14.902, 7.293, 14.707) ..cubicTo(7.098, 14.512, 7, 14.276, 7, 14) ..lineTo(7, 10) ..cubicTo(7, 9.724, 7.098, 9.488, 7.293, 9.293) ..cubicTo(7.488, 9.098, 7.724, 9, 8, 9) ..lineTo(14, 9) ..cubicTo(14.276, 9, 14.512, 9.098, 14.707, 9.293) ..cubicTo(14.902, 9.488, 15, 9.724, 15, 10) ..lineTo(15, 14) ..cubicTo(15, 14.276, 14.902, 14.512, 14.707, 14.707) ..close() ..moveTo(14, 14) ..lineTo(14, 10) ..lineTo(8, 10) ..lineTo(8, 14) ..lineTo(14, 14) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_UngroupIconPainter old) => old.color != color; } ```