# billiards icon Billiards. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/billiards - Category: Games & sports - Use it for: billiards, snooker, eight ball, pool table, cue sports - Tags: billiards, pool-table, snooker, eight-ball, 8-ball, cue, cue-stick, ball, pocket, bar, game, sport - Component name: BilliardsIcon - Added: 2026-10-29 - Since: version 0.2.0 - npm: `import { BilliardsIcon } from '@gentleface/react';` (@gentleface/react 0.2.0) - Changed: 2026-10-30 (added) ## Don't confuse with - `swimming-pool`: pool is swimming-pool's concept ## 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/billiards.svg · PNG https://gentleface.com/png/line-round/16/billiards.png · https://gentleface.com/png/line-round/32/billiards.png · https://gentleface.com/png/line-round/48/billiards.png - line-soft: https://gentleface.com/svg/line-soft/16/billiards.svg · PNG https://gentleface.com/png/line-soft/16/billiards.png · https://gentleface.com/png/line-soft/32/billiards.png · https://gentleface.com/png/line-soft/48/billiards.png - line-sharp: https://gentleface.com/svg/line-sharp/16/billiards.svg · PNG https://gentleface.com/png/line-sharp/16/billiards.png · https://gentleface.com/png/line-sharp/32/billiards.png · https://gentleface.com/png/line-sharp/48/billiards.png - solid-round: https://gentleface.com/svg/solid-round/16/billiards.svg · PNG https://gentleface.com/png/solid-round/16/billiards.png · https://gentleface.com/png/solid-round/32/billiards.png · https://gentleface.com/png/solid-round/48/billiards.png - solid-soft: https://gentleface.com/svg/solid-soft/16/billiards.svg · PNG https://gentleface.com/png/solid-soft/16/billiards.png · https://gentleface.com/png/solid-soft/32/billiards.png · https://gentleface.com/png/solid-soft/48/billiards.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/billiards.svg · PNG https://gentleface.com/png/solid-sharp/16/billiards.png · https://gentleface.com/png/solid-sharp/32/billiards.png · https://gentleface.com/png/solid-sharp/48/billiards.png The SVG of every style: https://gentleface.com/icons/billiards.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 "billiards" (line-round), MIT. https://gentleface.com/icons/billiards import type { SVGProps } from 'react'; export function BilliardsIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "billiards" (line-round), MIT. https://gentleface.com/icons/billiards. Takes the text color. */ .icon-billiards { 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='M7 6C7.138 6.138 7.207 6.305 7.207 6.5C7.207 6.695 7.138 6.862 7 7C6.862 7.138 6.695 7.207 6.5 7.207C6.305 7.207 6.138 7.138 6 7L1.5 2.5C1.362 2.362 1.293 2.195 1.293 2C1.293 1.805 1.362 1.638 1.5 1.5C1.638 1.362 1.805 1.293 2 1.293C2.195 1.293 2.362 1.362 2.5 1.5L7 6ZM7.281 9.528C7.484 9.014 7.781 8.562 8.172 8.172C8.562 7.781 9.014 7.484 9.528 7.281C10.001 7.094 10.491 7 11 7C11.509 7 11.999 7.094 12.472 7.281C12.986 7.484 13.438 7.781 13.828 8.172C14.219 8.562 14.516 9.014 14.719 9.528C14.906 10.001 15 10.491 15 11C15 11.509 14.906 11.999 14.719 12.472C14.516 12.986 14.219 13.438 13.828 13.828C13.438 14.219 12.986 14.516 12.472 14.719C11.999 14.906 11.509 15 11 15C10.491 15 10.001 14.906 9.528 14.719C9.014 14.516 8.562 14.219 8.172 13.828C7.781 13.438 7.484 12.986 7.281 12.472C7.094 11.999 7 11.509 7 11C7 10.491 7.094 10.001 7.281 9.528ZM10 8.5C9.172 8.5 8.5 9.172 8.5 10C8.5 10.828 9.172 11.5 10 11.5C10.828 11.5 11.5 10.828 11.5 10C11.5 9.172 10.828 8.5 10 8.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='M7 6C7.138 6.138 7.207 6.305 7.207 6.5C7.207 6.695 7.138 6.862 7 7C6.862 7.138 6.695 7.207 6.5 7.207C6.305 7.207 6.138 7.138 6 7L1.5 2.5C1.362 2.362 1.293 2.195 1.293 2C1.293 1.805 1.362 1.638 1.5 1.5C1.638 1.362 1.805 1.293 2 1.293C2.195 1.293 2.362 1.362 2.5 1.5L7 6ZM7.281 9.528C7.484 9.014 7.781 8.562 8.172 8.172C8.562 7.781 9.014 7.484 9.528 7.281C10.001 7.094 10.491 7 11 7C11.509 7 11.999 7.094 12.472 7.281C12.986 7.484 13.438 7.781 13.828 8.172C14.219 8.562 14.516 9.014 14.719 9.528C14.906 10.001 15 10.491 15 11C15 11.509 14.906 11.999 14.719 12.472C14.516 12.986 14.219 13.438 13.828 13.828C13.438 14.219 12.986 14.516 12.472 14.719C11.999 14.906 11.509 15 11 15C10.491 15 10.001 14.906 9.528 14.719C9.014 14.516 8.562 14.219 8.172 13.828C7.781 13.438 7.484 12.986 7.281 12.472C7.094 11.999 7 11.509 7 11C7 10.491 7.094 10.001 7.281 9.528ZM10 8.5C9.172 8.5 8.5 9.172 8.5 10C8.5 10.828 9.172 11.5 10 11.5C10.828 11.5 11.5 10.828 11.5 10C11.5 9.172 10.828 8.5 10 8.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='M7 6C7.138 6.138 7.207 6.305 7.207 6.5C7.207 6.695 7.138 6.862 7 7C6.862 7.138 6.695 7.207 6.5 7.207C6.305 7.207 6.138 7.138 6 7L1.5 2.5C1.362 2.362 1.293 2.195 1.293 2C1.293 1.805 1.362 1.638 1.5 1.5C1.638 1.362 1.805 1.293 2 1.293C2.195 1.293 2.362 1.362 2.5 1.5L7 6ZM7.281 9.528C7.484 9.014 7.781 8.562 8.172 8.172C8.562 7.781 9.014 7.484 9.528 7.281C10.001 7.094 10.491 7 11 7C11.509 7 11.999 7.094 12.472 7.281C12.986 7.484 13.438 7.781 13.828 8.172C14.219 8.562 14.516 9.014 14.719 9.528C14.906 10.001 15 10.491 15 11C15 11.509 14.906 11.999 14.719 12.472C14.516 12.986 14.219 13.438 13.828 13.828C13.438 14.219 12.986 14.516 12.472 14.719C11.999 14.906 11.509 15 11 15C10.491 15 10.001 14.906 9.528 14.719C9.014 14.516 8.562 14.219 8.172 13.828C7.781 13.438 7.484 12.986 7.281 12.472C7.094 11.999 7 11.509 7 11C7 10.491 7.094 10.001 7.281 9.528ZM10 8.5C9.172 8.5 8.5 9.172 8.5 10C8.5 10.828 9.172 11.5 10 11.5C10.828 11.5 11.5 10.828 11.5 10C11.5 9.172 10.828 8.5 10 8.5Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "billiards" (line-round), MIT. https://gentleface.com/icons/billiards import SwiftUI struct BilliardsIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 7, y: 6)) p.addCurve(to: CGPoint(x: 7.207, y: 6.5), control1: CGPoint(x: 7.138, y: 6.138), control2: CGPoint(x: 7.207, y: 6.305)) p.addCurve(to: CGPoint(x: 7, y: 7), control1: CGPoint(x: 7.207, y: 6.695), control2: CGPoint(x: 7.138, y: 6.862)) p.addCurve(to: CGPoint(x: 6.5, y: 7.207), control1: CGPoint(x: 6.862, y: 7.138), control2: CGPoint(x: 6.695, y: 7.207)) p.addCurve(to: CGPoint(x: 6, y: 7), control1: CGPoint(x: 6.305, y: 7.207), control2: CGPoint(x: 6.138, y: 7.138)) p.addLine(to: CGPoint(x: 1.5, y: 2.5)) p.addCurve(to: CGPoint(x: 1.293, y: 2), control1: CGPoint(x: 1.362, y: 2.362), control2: CGPoint(x: 1.293, y: 2.195)) p.addCurve(to: CGPoint(x: 1.5, y: 1.5), control1: CGPoint(x: 1.293, y: 1.805), control2: CGPoint(x: 1.362, y: 1.638)) p.addCurve(to: CGPoint(x: 2, y: 1.293), control1: CGPoint(x: 1.638, y: 1.362), control2: CGPoint(x: 1.805, y: 1.293)) p.addCurve(to: CGPoint(x: 2.5, y: 1.5), control1: CGPoint(x: 2.195, y: 1.293), control2: CGPoint(x: 2.362, y: 1.362)) p.addLine(to: CGPoint(x: 7, y: 6)) p.closeSubpath() p.move(to: CGPoint(x: 7.281, y: 9.528)) p.addCurve(to: CGPoint(x: 8.172, y: 8.172), control1: CGPoint(x: 7.484, y: 9.014), control2: CGPoint(x: 7.781, y: 8.562)) p.addCurve(to: CGPoint(x: 9.528, y: 7.281), control1: CGPoint(x: 8.562, y: 7.781), control2: CGPoint(x: 9.014, y: 7.484)) p.addCurve(to: CGPoint(x: 11, y: 7), control1: CGPoint(x: 10.001, y: 7.094), control2: CGPoint(x: 10.491, y: 7)) p.addCurve(to: CGPoint(x: 12.472, y: 7.281), control1: CGPoint(x: 11.509, y: 7), control2: CGPoint(x: 11.999, y: 7.094)) p.addCurve(to: CGPoint(x: 13.828, y: 8.172), control1: CGPoint(x: 12.986, y: 7.484), control2: CGPoint(x: 13.438, y: 7.781)) p.addCurve(to: CGPoint(x: 14.719, y: 9.528), control1: CGPoint(x: 14.219, y: 8.562), control2: CGPoint(x: 14.516, y: 9.014)) p.addCurve(to: CGPoint(x: 15, y: 11), control1: CGPoint(x: 14.906, y: 10.001), control2: CGPoint(x: 15, y: 10.491)) p.addCurve(to: CGPoint(x: 14.719, y: 12.472), control1: CGPoint(x: 15, y: 11.509), control2: CGPoint(x: 14.906, y: 11.999)) p.addCurve(to: CGPoint(x: 13.828, y: 13.828), control1: CGPoint(x: 14.516, y: 12.986), control2: CGPoint(x: 14.219, y: 13.438)) p.addCurve(to: CGPoint(x: 12.472, y: 14.719), control1: CGPoint(x: 13.438, y: 14.219), control2: CGPoint(x: 12.986, y: 14.516)) p.addCurve(to: CGPoint(x: 11, y: 15), control1: CGPoint(x: 11.999, y: 14.906), control2: CGPoint(x: 11.509, y: 15)) p.addCurve(to: CGPoint(x: 9.528, y: 14.719), control1: CGPoint(x: 10.491, y: 15), control2: CGPoint(x: 10.001, y: 14.906)) p.addCurve(to: CGPoint(x: 8.172, y: 13.828), control1: CGPoint(x: 9.014, y: 14.516), control2: CGPoint(x: 8.562, y: 14.219)) p.addCurve(to: CGPoint(x: 7.281, y: 12.472), control1: CGPoint(x: 7.781, y: 13.438), control2: CGPoint(x: 7.484, y: 12.986)) p.addCurve(to: CGPoint(x: 7, y: 11), control1: CGPoint(x: 7.094, y: 11.999), control2: CGPoint(x: 7, y: 11.509)) p.addCurve(to: CGPoint(x: 7.281, y: 9.528), control1: CGPoint(x: 7, y: 10.491), control2: CGPoint(x: 7.094, y: 10.001)) p.closeSubpath() p.move(to: CGPoint(x: 10, y: 8.5)) p.addCurve(to: CGPoint(x: 8.5, y: 10), control1: CGPoint(x: 9.172, y: 8.5), control2: CGPoint(x: 8.5, y: 9.172)) p.addCurve(to: CGPoint(x: 10, y: 11.5), control1: CGPoint(x: 8.5, y: 10.828), control2: CGPoint(x: 9.172, y: 11.5)) p.addCurve(to: CGPoint(x: 11.5, y: 10), control1: CGPoint(x: 10.828, y: 11.5), control2: CGPoint(x: 11.5, y: 10.828)) p.addCurve(to: CGPoint(x: 10, y: 8.5), control1: CGPoint(x: 11.5, y: 9.172), control2: CGPoint(x: 10.828, y: 8.5)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // BilliardsIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "billiards" (line-round), MIT. https://gentleface.com/icons/billiards 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 BilliardsIcon: ImageVector by lazy { ImageVector.Builder( name = "billiards", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M7 6C7.138 6.138 7.207 6.305 7.207 6.5C7.207 6.695 7.138 6.862 7 7C6.862 7.138 6.695 7.207 6.5 7.207C6.305 7.207 6.138 7.138 6 7L1.5 2.5C1.362 2.362 1.293 2.195 1.293 2C1.293 1.805 1.362 1.638 1.5 1.5C1.638 1.362 1.805 1.293 2 1.293C2.195 1.293 2.362 1.362 2.5 1.5L7 6ZM7.281 9.528C7.484 9.014 7.781 8.562 8.172 8.172C8.562 7.781 9.014 7.484 9.528 7.281C10.001 7.094 10.491 7 11 7C11.509 7 11.999 7.094 12.472 7.281C12.986 7.484 13.438 7.781 13.828 8.172C14.219 8.562 14.516 9.014 14.719 9.528C14.906 10.001 15 10.491 15 11C15 11.509 14.906 11.999 14.719 12.472C14.516 12.986 14.219 13.438 13.828 13.828C13.438 14.219 12.986 14.516 12.472 14.719C11.999 14.906 11.509 15 11 15C10.491 15 10.001 14.906 9.528 14.719C9.014 14.516 8.562 14.219 8.172 13.828C7.781 13.438 7.484 12.986 7.281 12.472C7.094 11.999 7 11.509 7 11C7 10.491 7.094 10.001 7.281 9.528ZM10 8.5C9.172 8.5 8.5 9.172 8.5 10C8.5 10.828 9.172 11.5 10 11.5C10.828 11.5 11.5 10.828 11.5 10C11.5 9.172 10.828 8.5 10 8.5Z"), fill = SolidColor(Color.Black), ).build() } // Icon(BilliardsIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "billiards" (line-round), MIT. https://gentleface.com/icons/billiards import 'package:flutter/widgets.dart'; class BilliardsIcon extends StatelessWidget { const BilliardsIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _BilliardsIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _BilliardsIconPainter extends CustomPainter { _BilliardsIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(7, 6) ..cubicTo(7.138, 6.138, 7.207, 6.305, 7.207, 6.5) ..cubicTo(7.207, 6.695, 7.138, 6.862, 7, 7) ..cubicTo(6.862, 7.138, 6.695, 7.207, 6.5, 7.207) ..cubicTo(6.305, 7.207, 6.138, 7.138, 6, 7) ..lineTo(1.5, 2.5) ..cubicTo(1.362, 2.362, 1.293, 2.195, 1.293, 2) ..cubicTo(1.293, 1.805, 1.362, 1.638, 1.5, 1.5) ..cubicTo(1.638, 1.362, 1.805, 1.293, 2, 1.293) ..cubicTo(2.195, 1.293, 2.362, 1.362, 2.5, 1.5) ..lineTo(7, 6) ..close() ..moveTo(7.281, 9.528) ..cubicTo(7.484, 9.014, 7.781, 8.562, 8.172, 8.172) ..cubicTo(8.562, 7.781, 9.014, 7.484, 9.528, 7.281) ..cubicTo(10.001, 7.094, 10.491, 7, 11, 7) ..cubicTo(11.509, 7, 11.999, 7.094, 12.472, 7.281) ..cubicTo(12.986, 7.484, 13.438, 7.781, 13.828, 8.172) ..cubicTo(14.219, 8.562, 14.516, 9.014, 14.719, 9.528) ..cubicTo(14.906, 10.001, 15, 10.491, 15, 11) ..cubicTo(15, 11.509, 14.906, 11.999, 14.719, 12.472) ..cubicTo(14.516, 12.986, 14.219, 13.438, 13.828, 13.828) ..cubicTo(13.438, 14.219, 12.986, 14.516, 12.472, 14.719) ..cubicTo(11.999, 14.906, 11.509, 15, 11, 15) ..cubicTo(10.491, 15, 10.001, 14.906, 9.528, 14.719) ..cubicTo(9.014, 14.516, 8.562, 14.219, 8.172, 13.828) ..cubicTo(7.781, 13.438, 7.484, 12.986, 7.281, 12.472) ..cubicTo(7.094, 11.999, 7, 11.509, 7, 11) ..cubicTo(7, 10.491, 7.094, 10.001, 7.281, 9.528) ..close() ..moveTo(10, 8.5) ..cubicTo(9.172, 8.5, 8.5, 9.172, 8.5, 10) ..cubicTo(8.5, 10.828, 9.172, 11.5, 10, 11.5) ..cubicTo(10.828, 11.5, 11.5, 10.828, 11.5, 10) ..cubicTo(11.5, 9.172, 10.828, 8.5, 10, 8.5) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_BilliardsIconPainter old) => old.color != color; } ```