# frustum-square icon Frustum square. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/frustum-square - Category: Shapes - Use it for: frustum square, truncated pyramid - Built from: variant of frustum - Tags: frustum, truncated cone, 3d, shape, solid, geometry, primitive, truncated pyramid, square frustum - Family: frustum - Component name: FrustumSquareIcon - 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/frustum-square.svg · PNG https://gentleface.com/png/line-round/16/frustum-square.png · https://gentleface.com/png/line-round/32/frustum-square.png · https://gentleface.com/png/line-round/48/frustum-square.png - line-soft: https://gentleface.com/svg/line-soft/16/frustum-square.svg · PNG https://gentleface.com/png/line-soft/16/frustum-square.png · https://gentleface.com/png/line-soft/32/frustum-square.png · https://gentleface.com/png/line-soft/48/frustum-square.png - line-sharp: https://gentleface.com/svg/line-sharp/16/frustum-square.svg · PNG https://gentleface.com/png/line-sharp/16/frustum-square.png · https://gentleface.com/png/line-sharp/32/frustum-square.png · https://gentleface.com/png/line-sharp/48/frustum-square.png - solid-round: https://gentleface.com/svg/solid-round/16/frustum-square.svg · PNG https://gentleface.com/png/solid-round/16/frustum-square.png · https://gentleface.com/png/solid-round/32/frustum-square.png · https://gentleface.com/png/solid-round/48/frustum-square.png - solid-soft: https://gentleface.com/svg/solid-soft/16/frustum-square.svg · PNG https://gentleface.com/png/solid-soft/16/frustum-square.png · https://gentleface.com/png/solid-soft/32/frustum-square.png · https://gentleface.com/png/solid-soft/48/frustum-square.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/frustum-square.svg · PNG https://gentleface.com/png/solid-sharp/16/frustum-square.png · https://gentleface.com/png/solid-sharp/32/frustum-square.png · https://gentleface.com/png/solid-sharp/48/frustum-square.png The SVG of every style: https://gentleface.com/icons/frustum-square.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 "frustum-square" (line-round), MIT. https://gentleface.com/icons/frustum-square import type { SVGProps } from 'react'; export function FrustumSquareIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "frustum-square" (line-round), MIT. https://gentleface.com/icons/frustum-square. Takes the text color. */ .icon-frustum-square { 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='M13.783 11.148C13.804 11.292 13.794 11.434 13.754 11.574C13.713 11.714 13.645 11.839 13.55 11.949C13.463 12.049 13.36 12.129 13.241 12.189L8.618 14.5C8.266 14.676 7.893 14.764 7.5 14.764C7.107 14.764 6.734 14.676 6.382 14.5L1.759 12.189C1.64 12.129 1.537 12.049 1.45 11.949C1.355 11.839 1.287 11.714 1.246 11.574C1.206 11.434 1.196 11.292 1.217 11.148C1.237 11.017 1.281 10.894 1.349 10.78L3.557 7.1C3.95 6.445 4.488 5.947 5.171 5.606L6.382 5C6.734 4.824 7.107 4.736 7.5 4.736C7.893 4.736 8.266 4.824 8.618 5L9.829 5.606C10.512 5.947 11.05 6.445 11.443 7.1L13.651 10.78C13.719 10.894 13.763 11.017 13.783 11.148ZM6.829 7.106C7.04 7.211 7.264 7.264 7.5 7.264C7.736 7.264 7.96 7.211 8.171 7.106L9.382 6.5L8.171 5.894C7.96 5.789 7.736 5.736 7.5 5.736C7.264 5.736 7.04 5.789 6.829 5.894L5.618 6.5L6.829 7.106ZM4.734 7.176C4.616 7.31 4.509 7.456 4.414 7.615L2.207 11.294L6.829 13.606C6.885 13.634 6.942 13.658 7 13.679L7 8.214C6.787 8.171 6.581 8.1 6.382 8L4.734 7.176ZM8.171 13.606L12.793 11.294L10.586 7.615C10.491 7.456 10.384 7.31 10.266 7.176L8.618 8C8.419 8.1 8.213 8.171 8 8.214L8 13.679C8.058 13.658 8.115 13.634 8.171 13.606Z'/%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='M13.783 11.148C13.804 11.292 13.794 11.434 13.754 11.574C13.713 11.714 13.645 11.839 13.55 11.949C13.463 12.049 13.36 12.129 13.241 12.189L8.618 14.5C8.266 14.676 7.893 14.764 7.5 14.764C7.107 14.764 6.734 14.676 6.382 14.5L1.759 12.189C1.64 12.129 1.537 12.049 1.45 11.949C1.355 11.839 1.287 11.714 1.246 11.574C1.206 11.434 1.196 11.292 1.217 11.148C1.237 11.017 1.281 10.894 1.349 10.78L3.557 7.1C3.95 6.445 4.488 5.947 5.171 5.606L6.382 5C6.734 4.824 7.107 4.736 7.5 4.736C7.893 4.736 8.266 4.824 8.618 5L9.829 5.606C10.512 5.947 11.05 6.445 11.443 7.1L13.651 10.78C13.719 10.894 13.763 11.017 13.783 11.148ZM6.829 7.106C7.04 7.211 7.264 7.264 7.5 7.264C7.736 7.264 7.96 7.211 8.171 7.106L9.382 6.5L8.171 5.894C7.96 5.789 7.736 5.736 7.5 5.736C7.264 5.736 7.04 5.789 6.829 5.894L5.618 6.5L6.829 7.106ZM4.734 7.176C4.616 7.31 4.509 7.456 4.414 7.615L2.207 11.294L6.829 13.606C6.885 13.634 6.942 13.658 7 13.679L7 8.214C6.787 8.171 6.581 8.1 6.382 8L4.734 7.176ZM8.171 13.606L12.793 11.294L10.586 7.615C10.491 7.456 10.384 7.31 10.266 7.176L8.618 8C8.419 8.1 8.213 8.171 8 8.214L8 13.679C8.058 13.658 8.115 13.634 8.171 13.606Z'/%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='M13.783 11.148C13.804 11.292 13.794 11.434 13.754 11.574C13.713 11.714 13.645 11.839 13.55 11.949C13.463 12.049 13.36 12.129 13.241 12.189L8.618 14.5C8.266 14.676 7.893 14.764 7.5 14.764C7.107 14.764 6.734 14.676 6.382 14.5L1.759 12.189C1.64 12.129 1.537 12.049 1.45 11.949C1.355 11.839 1.287 11.714 1.246 11.574C1.206 11.434 1.196 11.292 1.217 11.148C1.237 11.017 1.281 10.894 1.349 10.78L3.557 7.1C3.95 6.445 4.488 5.947 5.171 5.606L6.382 5C6.734 4.824 7.107 4.736 7.5 4.736C7.893 4.736 8.266 4.824 8.618 5L9.829 5.606C10.512 5.947 11.05 6.445 11.443 7.1L13.651 10.78C13.719 10.894 13.763 11.017 13.783 11.148ZM6.829 7.106C7.04 7.211 7.264 7.264 7.5 7.264C7.736 7.264 7.96 7.211 8.171 7.106L9.382 6.5L8.171 5.894C7.96 5.789 7.736 5.736 7.5 5.736C7.264 5.736 7.04 5.789 6.829 5.894L5.618 6.5L6.829 7.106ZM4.734 7.176C4.616 7.31 4.509 7.456 4.414 7.615L2.207 11.294L6.829 13.606C6.885 13.634 6.942 13.658 7 13.679L7 8.214C6.787 8.171 6.581 8.1 6.382 8L4.734 7.176ZM8.171 13.606L12.793 11.294L10.586 7.615C10.491 7.456 10.384 7.31 10.266 7.176L8.618 8C8.419 8.1 8.213 8.171 8 8.214L8 13.679C8.058 13.658 8.115 13.634 8.171 13.606Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "frustum-square" (line-round), MIT. https://gentleface.com/icons/frustum-square import SwiftUI struct FrustumSquareIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 13.783, y: 11.148)) p.addCurve(to: CGPoint(x: 13.754, y: 11.574), control1: CGPoint(x: 13.804, y: 11.292), control2: CGPoint(x: 13.794, y: 11.434)) p.addCurve(to: CGPoint(x: 13.55, y: 11.949), control1: CGPoint(x: 13.713, y: 11.714), control2: CGPoint(x: 13.645, y: 11.839)) p.addCurve(to: CGPoint(x: 13.241, y: 12.189), control1: CGPoint(x: 13.463, y: 12.049), control2: CGPoint(x: 13.36, y: 12.129)) p.addLine(to: CGPoint(x: 8.618, y: 14.5)) p.addCurve(to: CGPoint(x: 7.5, y: 14.764), control1: CGPoint(x: 8.266, y: 14.676), control2: CGPoint(x: 7.893, y: 14.764)) p.addCurve(to: CGPoint(x: 6.382, y: 14.5), control1: CGPoint(x: 7.107, y: 14.764), control2: CGPoint(x: 6.734, y: 14.676)) p.addLine(to: CGPoint(x: 1.759, y: 12.189)) p.addCurve(to: CGPoint(x: 1.45, y: 11.949), control1: CGPoint(x: 1.64, y: 12.129), control2: CGPoint(x: 1.537, y: 12.049)) p.addCurve(to: CGPoint(x: 1.246, y: 11.574), control1: CGPoint(x: 1.355, y: 11.839), control2: CGPoint(x: 1.287, y: 11.714)) p.addCurve(to: CGPoint(x: 1.217, y: 11.148), control1: CGPoint(x: 1.206, y: 11.434), control2: CGPoint(x: 1.196, y: 11.292)) p.addCurve(to: CGPoint(x: 1.349, y: 10.78), control1: CGPoint(x: 1.237, y: 11.017), control2: CGPoint(x: 1.281, y: 10.894)) p.addLine(to: CGPoint(x: 3.557, y: 7.1)) p.addCurve(to: CGPoint(x: 5.171, y: 5.606), control1: CGPoint(x: 3.95, y: 6.445), control2: CGPoint(x: 4.488, y: 5.947)) p.addLine(to: CGPoint(x: 6.382, y: 5)) p.addCurve(to: CGPoint(x: 7.5, y: 4.736), control1: CGPoint(x: 6.734, y: 4.824), control2: CGPoint(x: 7.107, y: 4.736)) p.addCurve(to: CGPoint(x: 8.618, y: 5), control1: CGPoint(x: 7.893, y: 4.736), control2: CGPoint(x: 8.266, y: 4.824)) p.addLine(to: CGPoint(x: 9.829, y: 5.606)) p.addCurve(to: CGPoint(x: 11.443, y: 7.1), control1: CGPoint(x: 10.512, y: 5.947), control2: CGPoint(x: 11.05, y: 6.445)) p.addLine(to: CGPoint(x: 13.651, y: 10.78)) p.addCurve(to: CGPoint(x: 13.783, y: 11.148), control1: CGPoint(x: 13.719, y: 10.894), control2: CGPoint(x: 13.763, y: 11.017)) p.closeSubpath() p.move(to: CGPoint(x: 6.829, y: 7.106)) p.addCurve(to: CGPoint(x: 7.5, y: 7.264), control1: CGPoint(x: 7.04, y: 7.211), control2: CGPoint(x: 7.264, y: 7.264)) p.addCurve(to: CGPoint(x: 8.171, y: 7.106), control1: CGPoint(x: 7.736, y: 7.264), control2: CGPoint(x: 7.96, y: 7.211)) p.addLine(to: CGPoint(x: 9.382, y: 6.5)) p.addLine(to: CGPoint(x: 8.171, y: 5.894)) p.addCurve(to: CGPoint(x: 7.5, y: 5.736), control1: CGPoint(x: 7.96, y: 5.789), control2: CGPoint(x: 7.736, y: 5.736)) p.addCurve(to: CGPoint(x: 6.829, y: 5.894), control1: CGPoint(x: 7.264, y: 5.736), control2: CGPoint(x: 7.04, y: 5.789)) p.addLine(to: CGPoint(x: 5.618, y: 6.5)) p.addLine(to: CGPoint(x: 6.829, y: 7.106)) p.closeSubpath() p.move(to: CGPoint(x: 4.734, y: 7.176)) p.addCurve(to: CGPoint(x: 4.414, y: 7.615), control1: CGPoint(x: 4.616, y: 7.31), control2: CGPoint(x: 4.509, y: 7.456)) p.addLine(to: CGPoint(x: 2.207, y: 11.294)) p.addLine(to: CGPoint(x: 6.829, y: 13.606)) p.addCurve(to: CGPoint(x: 7, y: 13.679), control1: CGPoint(x: 6.885, y: 13.634), control2: CGPoint(x: 6.942, y: 13.658)) p.addLine(to: CGPoint(x: 7, y: 8.214)) p.addCurve(to: CGPoint(x: 6.382, y: 8), control1: CGPoint(x: 6.787, y: 8.171), control2: CGPoint(x: 6.581, y: 8.1)) p.addLine(to: CGPoint(x: 4.734, y: 7.176)) p.closeSubpath() p.move(to: CGPoint(x: 8.171, y: 13.606)) p.addLine(to: CGPoint(x: 12.793, y: 11.294)) p.addLine(to: CGPoint(x: 10.586, y: 7.615)) p.addCurve(to: CGPoint(x: 10.266, y: 7.176), control1: CGPoint(x: 10.491, y: 7.456), control2: CGPoint(x: 10.384, y: 7.31)) p.addLine(to: CGPoint(x: 8.618, y: 8)) p.addCurve(to: CGPoint(x: 8, y: 8.214), control1: CGPoint(x: 8.419, y: 8.1), control2: CGPoint(x: 8.213, y: 8.171)) p.addLine(to: CGPoint(x: 8, y: 13.679)) p.addCurve(to: CGPoint(x: 8.171, y: 13.606), control1: CGPoint(x: 8.058, y: 13.658), control2: CGPoint(x: 8.115, y: 13.634)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // FrustumSquareIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "frustum-square" (line-round), MIT. https://gentleface.com/icons/frustum-square 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 FrustumSquareIcon: ImageVector by lazy { ImageVector.Builder( name = "frustum-square", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M13.783 11.148C13.804 11.292 13.794 11.434 13.754 11.574C13.713 11.714 13.645 11.839 13.55 11.949C13.463 12.049 13.36 12.129 13.241 12.189L8.618 14.5C8.266 14.676 7.893 14.764 7.5 14.764C7.107 14.764 6.734 14.676 6.382 14.5L1.759 12.189C1.64 12.129 1.537 12.049 1.45 11.949C1.355 11.839 1.287 11.714 1.246 11.574C1.206 11.434 1.196 11.292 1.217 11.148C1.237 11.017 1.281 10.894 1.349 10.78L3.557 7.1C3.95 6.445 4.488 5.947 5.171 5.606L6.382 5C6.734 4.824 7.107 4.736 7.5 4.736C7.893 4.736 8.266 4.824 8.618 5L9.829 5.606C10.512 5.947 11.05 6.445 11.443 7.1L13.651 10.78C13.719 10.894 13.763 11.017 13.783 11.148ZM6.829 7.106C7.04 7.211 7.264 7.264 7.5 7.264C7.736 7.264 7.96 7.211 8.171 7.106L9.382 6.5L8.171 5.894C7.96 5.789 7.736 5.736 7.5 5.736C7.264 5.736 7.04 5.789 6.829 5.894L5.618 6.5L6.829 7.106ZM4.734 7.176C4.616 7.31 4.509 7.456 4.414 7.615L2.207 11.294L6.829 13.606C6.885 13.634 6.942 13.658 7 13.679L7 8.214C6.787 8.171 6.581 8.1 6.382 8L4.734 7.176ZM8.171 13.606L12.793 11.294L10.586 7.615C10.491 7.456 10.384 7.31 10.266 7.176L8.618 8C8.419 8.1 8.213 8.171 8 8.214L8 13.679C8.058 13.658 8.115 13.634 8.171 13.606Z"), fill = SolidColor(Color.Black), ).build() } // Icon(FrustumSquareIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "frustum-square" (line-round), MIT. https://gentleface.com/icons/frustum-square import 'package:flutter/widgets.dart'; class FrustumSquareIcon extends StatelessWidget { const FrustumSquareIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _FrustumSquareIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _FrustumSquareIconPainter extends CustomPainter { _FrustumSquareIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(13.783, 11.148) ..cubicTo(13.804, 11.292, 13.794, 11.434, 13.754, 11.574) ..cubicTo(13.713, 11.714, 13.645, 11.839, 13.55, 11.949) ..cubicTo(13.463, 12.049, 13.36, 12.129, 13.241, 12.189) ..lineTo(8.618, 14.5) ..cubicTo(8.266, 14.676, 7.893, 14.764, 7.5, 14.764) ..cubicTo(7.107, 14.764, 6.734, 14.676, 6.382, 14.5) ..lineTo(1.759, 12.189) ..cubicTo(1.64, 12.129, 1.537, 12.049, 1.45, 11.949) ..cubicTo(1.355, 11.839, 1.287, 11.714, 1.246, 11.574) ..cubicTo(1.206, 11.434, 1.196, 11.292, 1.217, 11.148) ..cubicTo(1.237, 11.017, 1.281, 10.894, 1.349, 10.78) ..lineTo(3.557, 7.1) ..cubicTo(3.95, 6.445, 4.488, 5.947, 5.171, 5.606) ..lineTo(6.382, 5) ..cubicTo(6.734, 4.824, 7.107, 4.736, 7.5, 4.736) ..cubicTo(7.893, 4.736, 8.266, 4.824, 8.618, 5) ..lineTo(9.829, 5.606) ..cubicTo(10.512, 5.947, 11.05, 6.445, 11.443, 7.1) ..lineTo(13.651, 10.78) ..cubicTo(13.719, 10.894, 13.763, 11.017, 13.783, 11.148) ..close() ..moveTo(6.829, 7.106) ..cubicTo(7.04, 7.211, 7.264, 7.264, 7.5, 7.264) ..cubicTo(7.736, 7.264, 7.96, 7.211, 8.171, 7.106) ..lineTo(9.382, 6.5) ..lineTo(8.171, 5.894) ..cubicTo(7.96, 5.789, 7.736, 5.736, 7.5, 5.736) ..cubicTo(7.264, 5.736, 7.04, 5.789, 6.829, 5.894) ..lineTo(5.618, 6.5) ..lineTo(6.829, 7.106) ..close() ..moveTo(4.734, 7.176) ..cubicTo(4.616, 7.31, 4.509, 7.456, 4.414, 7.615) ..lineTo(2.207, 11.294) ..lineTo(6.829, 13.606) ..cubicTo(6.885, 13.634, 6.942, 13.658, 7, 13.679) ..lineTo(7, 8.214) ..cubicTo(6.787, 8.171, 6.581, 8.1, 6.382, 8) ..lineTo(4.734, 7.176) ..close() ..moveTo(8.171, 13.606) ..lineTo(12.793, 11.294) ..lineTo(10.586, 7.615) ..cubicTo(10.491, 7.456, 10.384, 7.31, 10.266, 7.176) ..lineTo(8.618, 8) ..cubicTo(8.419, 8.1, 8.213, 8.171, 8, 8.214) ..lineTo(8, 13.679) ..cubicTo(8.058, 13.658, 8.115, 13.634, 8.171, 13.606) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_FrustumSquareIconPainter old) => old.color != color; } ```