# parallelogram icon Parallelogram. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/parallelogram - Category: Shapes - Use it for: parallelogram, rhomboid - Tags: parallelogram, rhomboid, shape, geometry, polygon, slanted - Component name: ParallelogramIcon - Added: 2026-11-12 ## Files Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. - line-round: https://gentleface.com/svg/line-round/16/parallelogram.svg · PNG https://gentleface.com/png/line-round/16/parallelogram.png · https://gentleface.com/png/line-round/32/parallelogram.png · https://gentleface.com/png/line-round/48/parallelogram.png - line-soft: https://gentleface.com/svg/line-soft/16/parallelogram.svg · PNG https://gentleface.com/png/line-soft/16/parallelogram.png · https://gentleface.com/png/line-soft/32/parallelogram.png · https://gentleface.com/png/line-soft/48/parallelogram.png - line-sharp: https://gentleface.com/svg/line-sharp/16/parallelogram.svg · PNG https://gentleface.com/png/line-sharp/16/parallelogram.png · https://gentleface.com/png/line-sharp/32/parallelogram.png · https://gentleface.com/png/line-sharp/48/parallelogram.png - solid-round: https://gentleface.com/svg/solid-round/16/parallelogram.svg · PNG https://gentleface.com/png/solid-round/16/parallelogram.png · https://gentleface.com/png/solid-round/32/parallelogram.png · https://gentleface.com/png/solid-round/48/parallelogram.png - solid-soft: https://gentleface.com/svg/solid-soft/16/parallelogram.svg · PNG https://gentleface.com/png/solid-soft/16/parallelogram.png · https://gentleface.com/png/solid-soft/32/parallelogram.png · https://gentleface.com/png/solid-soft/48/parallelogram.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/parallelogram.svg · PNG https://gentleface.com/png/solid-sharp/16/parallelogram.png · https://gentleface.com/png/solid-sharp/32/parallelogram.png · https://gentleface.com/png/solid-sharp/48/parallelogram.png The SVG of every style: https://gentleface.com/icons/parallelogram.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 "parallelogram" (line-round), MIT. https://gentleface.com/icons/parallelogram import type { SVGProps } from 'react'; export function ParallelogramIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "parallelogram" (line-round), MIT. https://gentleface.com/icons/parallelogram. Takes the text color. */ .icon-parallelogram { 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.283 4.149C5.444 4.05 5.62 4 5.809 4L13.691 4C13.852 4 14.004 4.037 14.147 4.11C14.312 4.195 14.444 4.316 14.542 4.474C14.639 4.632 14.689 4.804 14.691 4.99C14.693 5.151 14.657 5.303 14.585 5.447L11.085 12.447C11.001 12.617 10.878 12.751 10.717 12.851C10.556 12.95 10.38 13 10.191 13L2.309 13C2.148 13 1.996 12.963 1.853 12.89C1.688 12.805 1.556 12.684 1.458 12.526C1.361 12.368 1.311 12.196 1.309 12.01C1.307 11.849 1.343 11.697 1.415 11.553L4.915 4.553C4.999 4.383 5.122 4.249 5.283 4.149ZM13.691 5L5.809 5L2.309 12L10.191 12L13.691 5Z'/%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.283 4.149C5.444 4.05 5.62 4 5.809 4L13.691 4C13.852 4 14.004 4.037 14.147 4.11C14.312 4.195 14.444 4.316 14.542 4.474C14.639 4.632 14.689 4.804 14.691 4.99C14.693 5.151 14.657 5.303 14.585 5.447L11.085 12.447C11.001 12.617 10.878 12.751 10.717 12.851C10.556 12.95 10.38 13 10.191 13L2.309 13C2.148 13 1.996 12.963 1.853 12.89C1.688 12.805 1.556 12.684 1.458 12.526C1.361 12.368 1.311 12.196 1.309 12.01C1.307 11.849 1.343 11.697 1.415 11.553L4.915 4.553C4.999 4.383 5.122 4.249 5.283 4.149ZM13.691 5L5.809 5L2.309 12L10.191 12L13.691 5Z'/%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.283 4.149C5.444 4.05 5.62 4 5.809 4L13.691 4C13.852 4 14.004 4.037 14.147 4.11C14.312 4.195 14.444 4.316 14.542 4.474C14.639 4.632 14.689 4.804 14.691 4.99C14.693 5.151 14.657 5.303 14.585 5.447L11.085 12.447C11.001 12.617 10.878 12.751 10.717 12.851C10.556 12.95 10.38 13 10.191 13L2.309 13C2.148 13 1.996 12.963 1.853 12.89C1.688 12.805 1.556 12.684 1.458 12.526C1.361 12.368 1.311 12.196 1.309 12.01C1.307 11.849 1.343 11.697 1.415 11.553L4.915 4.553C4.999 4.383 5.122 4.249 5.283 4.149ZM13.691 5L5.809 5L2.309 12L10.191 12L13.691 5Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "parallelogram" (line-round), MIT. https://gentleface.com/icons/parallelogram import SwiftUI struct ParallelogramIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 5.283, y: 4.149)) p.addCurve(to: CGPoint(x: 5.809, y: 4), control1: CGPoint(x: 5.444, y: 4.05), control2: CGPoint(x: 5.62, y: 4)) p.addLine(to: CGPoint(x: 13.691, y: 4)) p.addCurve(to: CGPoint(x: 14.147, y: 4.11), control1: CGPoint(x: 13.852, y: 4), control2: CGPoint(x: 14.004, y: 4.037)) p.addCurve(to: CGPoint(x: 14.542, y: 4.474), control1: CGPoint(x: 14.312, y: 4.195), control2: CGPoint(x: 14.444, y: 4.316)) p.addCurve(to: CGPoint(x: 14.691, y: 4.99), control1: CGPoint(x: 14.639, y: 4.632), control2: CGPoint(x: 14.689, y: 4.804)) p.addCurve(to: CGPoint(x: 14.585, y: 5.447), control1: CGPoint(x: 14.693, y: 5.151), control2: CGPoint(x: 14.657, y: 5.303)) p.addLine(to: CGPoint(x: 11.085, y: 12.447)) p.addCurve(to: CGPoint(x: 10.717, y: 12.851), control1: CGPoint(x: 11.001, y: 12.617), control2: CGPoint(x: 10.878, y: 12.751)) p.addCurve(to: CGPoint(x: 10.191, y: 13), control1: CGPoint(x: 10.556, y: 12.95), control2: CGPoint(x: 10.38, y: 13)) p.addLine(to: CGPoint(x: 2.309, y: 13)) p.addCurve(to: CGPoint(x: 1.853, y: 12.89), control1: CGPoint(x: 2.148, y: 13), control2: CGPoint(x: 1.996, y: 12.963)) p.addCurve(to: CGPoint(x: 1.458, y: 12.526), control1: CGPoint(x: 1.688, y: 12.805), control2: CGPoint(x: 1.556, y: 12.684)) p.addCurve(to: CGPoint(x: 1.309, y: 12.01), control1: CGPoint(x: 1.361, y: 12.368), control2: CGPoint(x: 1.311, y: 12.196)) p.addCurve(to: CGPoint(x: 1.415, y: 11.553), control1: CGPoint(x: 1.307, y: 11.849), control2: CGPoint(x: 1.343, y: 11.697)) p.addLine(to: CGPoint(x: 4.915, y: 4.553)) p.addCurve(to: CGPoint(x: 5.283, y: 4.149), control1: CGPoint(x: 4.999, y: 4.383), control2: CGPoint(x: 5.122, y: 4.249)) p.closeSubpath() p.move(to: CGPoint(x: 13.691, y: 5)) p.addLine(to: CGPoint(x: 5.809, y: 5)) p.addLine(to: CGPoint(x: 2.309, y: 12)) p.addLine(to: CGPoint(x: 10.191, y: 12)) p.addLine(to: CGPoint(x: 13.691, y: 5)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // ParallelogramIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "parallelogram" (line-round), MIT. https://gentleface.com/icons/parallelogram 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 ParallelogramIcon: ImageVector by lazy { ImageVector.Builder( name = "parallelogram", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M5.283 4.149C5.444 4.05 5.62 4 5.809 4L13.691 4C13.852 4 14.004 4.037 14.147 4.11C14.312 4.195 14.444 4.316 14.542 4.474C14.639 4.632 14.689 4.804 14.691 4.99C14.693 5.151 14.657 5.303 14.585 5.447L11.085 12.447C11.001 12.617 10.878 12.751 10.717 12.851C10.556 12.95 10.38 13 10.191 13L2.309 13C2.148 13 1.996 12.963 1.853 12.89C1.688 12.805 1.556 12.684 1.458 12.526C1.361 12.368 1.311 12.196 1.309 12.01C1.307 11.849 1.343 11.697 1.415 11.553L4.915 4.553C4.999 4.383 5.122 4.249 5.283 4.149ZM13.691 5L5.809 5L2.309 12L10.191 12L13.691 5Z"), fill = SolidColor(Color.Black), ).build() } // Icon(ParallelogramIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "parallelogram" (line-round), MIT. https://gentleface.com/icons/parallelogram import 'package:flutter/widgets.dart'; class ParallelogramIcon extends StatelessWidget { const ParallelogramIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _ParallelogramIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _ParallelogramIconPainter extends CustomPainter { _ParallelogramIconPainter(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.283, 4.149) ..cubicTo(5.444, 4.05, 5.62, 4, 5.809, 4) ..lineTo(13.691, 4) ..cubicTo(13.852, 4, 14.004, 4.037, 14.147, 4.11) ..cubicTo(14.312, 4.195, 14.444, 4.316, 14.542, 4.474) ..cubicTo(14.639, 4.632, 14.689, 4.804, 14.691, 4.99) ..cubicTo(14.693, 5.151, 14.657, 5.303, 14.585, 5.447) ..lineTo(11.085, 12.447) ..cubicTo(11.001, 12.617, 10.878, 12.751, 10.717, 12.851) ..cubicTo(10.556, 12.95, 10.38, 13, 10.191, 13) ..lineTo(2.309, 13) ..cubicTo(2.148, 13, 1.996, 12.963, 1.853, 12.89) ..cubicTo(1.688, 12.805, 1.556, 12.684, 1.458, 12.526) ..cubicTo(1.361, 12.368, 1.311, 12.196, 1.309, 12.01) ..cubicTo(1.307, 11.849, 1.343, 11.697, 1.415, 11.553) ..lineTo(4.915, 4.553) ..cubicTo(4.999, 4.383, 5.122, 4.249, 5.283, 4.149) ..close() ..moveTo(13.691, 5) ..lineTo(5.809, 5) ..lineTo(2.309, 12) ..lineTo(10.191, 12) ..lineTo(13.691, 5) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_ParallelogramIconPainter old) => old.color != color; } ```