# pyramid icon Pyramid. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/pyramid - Category: Shapes - Use it for: pyramid solid - Tags: pyramid, 3d, shape, solid, geometry, tetrahedron, polyhedron, apex, triangle - Component name: PyramidIcon - Added: 2026-10-29 - Since: version 0.2.0 - npm: `import { PyramidIcon } from '@gentleface/react';` (@gentleface/react 0.2.0) - Changed: 2026-10-30 (added) ## Alternatives - `triangle`: the flat triangle shape (triangle) ## 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/pyramid.svg · PNG https://gentleface.com/png/line-round/16/pyramid.png · https://gentleface.com/png/line-round/32/pyramid.png · https://gentleface.com/png/line-round/48/pyramid.png - line-soft: https://gentleface.com/svg/line-soft/16/pyramid.svg · PNG https://gentleface.com/png/line-soft/16/pyramid.png · https://gentleface.com/png/line-soft/32/pyramid.png · https://gentleface.com/png/line-soft/48/pyramid.png - line-sharp: https://gentleface.com/svg/line-sharp/16/pyramid.svg · PNG https://gentleface.com/png/line-sharp/16/pyramid.png · https://gentleface.com/png/line-sharp/32/pyramid.png · https://gentleface.com/png/line-sharp/48/pyramid.png - solid-round: https://gentleface.com/svg/solid-round/16/pyramid.svg · PNG https://gentleface.com/png/solid-round/16/pyramid.png · https://gentleface.com/png/solid-round/32/pyramid.png · https://gentleface.com/png/solid-round/48/pyramid.png - solid-soft: https://gentleface.com/svg/solid-soft/16/pyramid.svg · PNG https://gentleface.com/png/solid-soft/16/pyramid.png · https://gentleface.com/png/solid-soft/32/pyramid.png · https://gentleface.com/png/solid-soft/48/pyramid.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/pyramid.svg · PNG https://gentleface.com/png/solid-sharp/16/pyramid.png · https://gentleface.com/png/solid-sharp/32/pyramid.png · https://gentleface.com/png/solid-sharp/48/pyramid.png The SVG of every style: https://gentleface.com/icons/pyramid.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 "pyramid" (line-round), MIT. https://gentleface.com/icons/pyramid import type { SVGProps } from 'react'; export function PyramidIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "pyramid" (line-round), MIT. https://gentleface.com/icons/pyramid. Takes the text color. */ .icon-pyramid { 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.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.78L6.643 1.957C6.726 1.818 6.837 1.705 6.976 1.62C6.984 1.615 6.992 1.61 7 1.606L7.006 1.602C7.088 1.556 7.173 1.522 7.261 1.5C7.338 1.481 7.418 1.472 7.5 1.472C7.582 1.472 7.662 1.481 7.739 1.5L7.74 1.5C7.83 1.522 7.917 1.558 8 1.606C8.008 1.61 8.016 1.615 8.024 1.62C8.163 1.705 8.274 1.818 8.357 1.957L13.651 10.78C13.719 10.894 13.763 11.017 13.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.5ZM2.207 11.294L6.829 13.606C6.885 13.634 6.942 13.658 7 13.679L7 3.305L2.207 11.294ZM8.171 13.606L12.793 11.294L8 3.305L8 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='M8.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.78L6.643 1.957C6.726 1.818 6.837 1.705 6.976 1.62C6.984 1.615 6.992 1.61 7 1.606L7.006 1.602C7.088 1.556 7.173 1.522 7.261 1.5C7.338 1.481 7.418 1.472 7.5 1.472C7.582 1.472 7.662 1.481 7.739 1.5L7.74 1.5C7.83 1.522 7.917 1.558 8 1.606C8.008 1.61 8.016 1.615 8.024 1.62C8.163 1.705 8.274 1.818 8.357 1.957L13.651 10.78C13.719 10.894 13.763 11.017 13.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.5ZM2.207 11.294L6.829 13.606C6.885 13.634 6.942 13.658 7 13.679L7 3.305L2.207 11.294ZM8.171 13.606L12.793 11.294L8 3.305L8 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='M8.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.78L6.643 1.957C6.726 1.818 6.837 1.705 6.976 1.62C6.984 1.615 6.992 1.61 7 1.606L7.006 1.602C7.088 1.556 7.173 1.522 7.261 1.5C7.338 1.481 7.418 1.472 7.5 1.472C7.582 1.472 7.662 1.481 7.739 1.5L7.74 1.5C7.83 1.522 7.917 1.558 8 1.606C8.008 1.61 8.016 1.615 8.024 1.62C8.163 1.705 8.274 1.818 8.357 1.957L13.651 10.78C13.719 10.894 13.763 11.017 13.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.5ZM2.207 11.294L6.829 13.606C6.885 13.634 6.942 13.658 7 13.679L7 3.305L2.207 11.294ZM8.171 13.606L12.793 11.294L8 3.305L8 13.679C8.058 13.658 8.115 13.634 8.171 13.606Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "pyramid" (line-round), MIT. https://gentleface.com/icons/pyramid import SwiftUI struct PyramidIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(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: 6.643, y: 1.957)) p.addCurve(to: CGPoint(x: 6.976, y: 1.62), control1: CGPoint(x: 6.726, y: 1.818), control2: CGPoint(x: 6.837, y: 1.705)) p.addCurve(to: CGPoint(x: 7, y: 1.606), control1: CGPoint(x: 6.984, y: 1.615), control2: CGPoint(x: 6.992, y: 1.61)) p.addLine(to: CGPoint(x: 7.006, y: 1.602)) p.addCurve(to: CGPoint(x: 7.261, y: 1.5), control1: CGPoint(x: 7.088, y: 1.556), control2: CGPoint(x: 7.173, y: 1.522)) p.addCurve(to: CGPoint(x: 7.5, y: 1.472), control1: CGPoint(x: 7.338, y: 1.481), control2: CGPoint(x: 7.418, y: 1.472)) p.addCurve(to: CGPoint(x: 7.739, y: 1.5), control1: CGPoint(x: 7.582, y: 1.472), control2: CGPoint(x: 7.662, y: 1.481)) p.addLine(to: CGPoint(x: 7.74, y: 1.5)) p.addCurve(to: CGPoint(x: 8, y: 1.606), control1: CGPoint(x: 7.83, y: 1.522), control2: CGPoint(x: 7.917, y: 1.558)) p.addCurve(to: CGPoint(x: 8.024, y: 1.62), control1: CGPoint(x: 8.008, y: 1.61), control2: CGPoint(x: 8.016, y: 1.615)) p.addCurve(to: CGPoint(x: 8.357, y: 1.957), control1: CGPoint(x: 8.163, y: 1.705), control2: CGPoint(x: 8.274, y: 1.818)) 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.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.closeSubpath() p.move(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: 3.305)) p.addLine(to: CGPoint(x: 2.207, y: 11.294)) 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: 8, y: 3.305)) 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)) } } // PyramidIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "pyramid" (line-round), MIT. https://gentleface.com/icons/pyramid 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 PyramidIcon: ImageVector by lazy { ImageVector.Builder( name = "pyramid", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M8.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.78L6.643 1.957C6.726 1.818 6.837 1.705 6.976 1.62C6.984 1.615 6.992 1.61 7 1.606L7.006 1.602C7.088 1.556 7.173 1.522 7.261 1.5C7.338 1.481 7.418 1.472 7.5 1.472C7.582 1.472 7.662 1.481 7.739 1.5L7.74 1.5C7.83 1.522 7.917 1.558 8 1.606C8.008 1.61 8.016 1.615 8.024 1.62C8.163 1.705 8.274 1.818 8.357 1.957L13.651 10.78C13.719 10.894 13.763 11.017 13.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.5ZM2.207 11.294L6.829 13.606C6.885 13.634 6.942 13.658 7 13.679L7 3.305L2.207 11.294ZM8.171 13.606L12.793 11.294L8 3.305L8 13.679C8.058 13.658 8.115 13.634 8.171 13.606Z"), fill = SolidColor(Color.Black), ).build() } // Icon(PyramidIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "pyramid" (line-round), MIT. https://gentleface.com/icons/pyramid import 'package:flutter/widgets.dart'; class PyramidIcon extends StatelessWidget { const PyramidIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _PyramidIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _PyramidIconPainter extends CustomPainter { _PyramidIconPainter(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.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(6.643, 1.957) ..cubicTo(6.726, 1.818, 6.837, 1.705, 6.976, 1.62) ..cubicTo(6.984, 1.615, 6.992, 1.61, 7, 1.606) ..lineTo(7.006, 1.602) ..cubicTo(7.088, 1.556, 7.173, 1.522, 7.261, 1.5) ..cubicTo(7.338, 1.481, 7.418, 1.472, 7.5, 1.472) ..cubicTo(7.582, 1.472, 7.662, 1.481, 7.739, 1.5) ..lineTo(7.74, 1.5) ..cubicTo(7.83, 1.522, 7.917, 1.558, 8, 1.606) ..cubicTo(8.008, 1.61, 8.016, 1.615, 8.024, 1.62) ..cubicTo(8.163, 1.705, 8.274, 1.818, 8.357, 1.957) ..lineTo(13.651, 10.78) ..cubicTo(13.719, 10.894, 13.763, 11.017, 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) ..close() ..moveTo(2.207, 11.294) ..lineTo(6.829, 13.606) ..cubicTo(6.885, 13.634, 6.942, 13.658, 7, 13.679) ..lineTo(7, 3.305) ..lineTo(2.207, 11.294) ..close() ..moveTo(8.171, 13.606) ..lineTo(12.793, 11.294) ..lineTo(8, 3.305) ..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(_PyramidIconPainter old) => old.color != color; } ```