# ping-pong icon Ping pong. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/ping-pong - Category: Games & sports - Use it for: table tennis, ping pong - Tags: ping-pong, table-tennis, paddle, bat, racket, ball, table, rally, serve, sport, olympics - Component name: PingPongIcon - Added: 2026-10-29 - Since: version 0.2.0 - npm: `import { PingPongIcon } 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/ping-pong.svg · PNG https://gentleface.com/png/line-round/16/ping-pong.png · https://gentleface.com/png/line-round/32/ping-pong.png · https://gentleface.com/png/line-round/48/ping-pong.png - line-soft: https://gentleface.com/svg/line-soft/16/ping-pong.svg · PNG https://gentleface.com/png/line-soft/16/ping-pong.png · https://gentleface.com/png/line-soft/32/ping-pong.png · https://gentleface.com/png/line-soft/48/ping-pong.png - line-sharp: https://gentleface.com/svg/line-sharp/16/ping-pong.svg · PNG https://gentleface.com/png/line-sharp/16/ping-pong.png · https://gentleface.com/png/line-sharp/32/ping-pong.png · https://gentleface.com/png/line-sharp/48/ping-pong.png - solid-round: https://gentleface.com/svg/solid-round/16/ping-pong.svg · PNG https://gentleface.com/png/solid-round/16/ping-pong.png · https://gentleface.com/png/solid-round/32/ping-pong.png · https://gentleface.com/png/solid-round/48/ping-pong.png - solid-soft: https://gentleface.com/svg/solid-soft/16/ping-pong.svg · PNG https://gentleface.com/png/solid-soft/16/ping-pong.png · https://gentleface.com/png/solid-soft/32/ping-pong.png · https://gentleface.com/png/solid-soft/48/ping-pong.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/ping-pong.svg · PNG https://gentleface.com/png/solid-sharp/16/ping-pong.png · https://gentleface.com/png/solid-sharp/32/ping-pong.png · https://gentleface.com/png/solid-sharp/48/ping-pong.png The SVG of every style: https://gentleface.com/icons/ping-pong.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 "ping-pong" (line-round), MIT. https://gentleface.com/icons/ping-pong import type { SVGProps } from 'react'; export function PingPongIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "ping-pong" (line-round), MIT. https://gentleface.com/icons/ping-pong. Takes the text color. */ .icon-ping-pong { 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.854 11.854C5.681 12.026 5.484 12.16 5.26 12.257C5.018 12.362 4.764 12.414 4.5 12.414C4.236 12.414 3.982 12.362 3.74 12.257C3.516 12.16 3.319 12.026 3.146 11.854C2.974 11.681 2.84 11.484 2.743 11.26C2.638 11.018 2.586 10.764 2.586 10.5C2.586 10.236 2.638 9.982 2.743 9.74C2.84 9.516 2.974 9.319 3.146 9.146L5.266 7.027C5.082 6.518 4.993 5.99 5 5.441C5.01 4.692 5.196 3.989 5.557 3.332C5.918 2.675 6.412 2.142 7.04 1.732C7.598 1.368 8.206 1.139 8.866 1.045C9.526 0.951 10.174 1.001 10.812 1.195C11.529 1.414 12.152 1.788 12.682 2.318C13.212 2.848 13.586 3.471 13.805 4.188C13.999 4.826 14.049 5.474 13.955 6.134C13.861 6.794 13.632 7.402 13.268 7.96C12.858 8.588 12.325 9.082 11.668 9.443C11.011 9.804 10.308 9.99 9.559 10C9.01 10.007 8.482 9.918 7.973 9.734L5.854 11.854ZM11.186 8.567C11.697 8.286 12.112 7.902 12.431 7.414C12.714 6.98 12.892 6.506 12.965 5.993C13.038 5.48 12.999 4.976 12.848 4.48C12.678 3.922 12.387 3.437 11.975 3.025C11.563 2.613 11.078 2.322 10.52 2.152C10.024 2.001 9.52 1.962 9.007 2.035C8.494 2.108 8.02 2.286 7.586 2.569C7.098 2.888 6.714 3.303 6.433 3.814C6.319 4.021 6.228 4.233 6.159 4.452L10.548 8.841C10.767 8.772 10.979 8.681 11.186 8.567ZM7.764 8.653C7.866 8.634 7.964 8.647 8.06 8.69C8.453 8.867 8.862 8.969 9.287 8.994L6.006 5.713C6.031 6.138 6.133 6.547 6.31 6.94C6.353 7.036 6.366 7.134 6.347 7.236C6.329 7.337 6.282 7.425 6.208 7.499L3.854 9.854C3.675 10.032 3.586 10.248 3.586 10.5C3.586 10.752 3.675 10.968 3.854 11.146C4.032 11.325 4.248 11.414 4.5 11.414C4.752 11.414 4.968 11.325 5.146 11.146L7.501 8.792C7.575 8.718 7.663 8.671 7.764 8.653ZM12.736 11.14C12.993 11.242 13.219 11.391 13.414 11.586C13.609 11.781 13.758 12.007 13.86 12.264C13.953 12.5 14 12.746 14 13C14 13.254 13.953 13.5 13.86 13.736C13.758 13.993 13.609 14.219 13.414 14.414C13.219 14.609 12.993 14.758 12.736 14.86C12.5 14.953 12.254 15 12 15C11.746 15 11.5 14.953 11.264 14.86C11.007 14.758 10.781 14.609 10.586 14.414C10.391 14.219 10.242 13.993 10.14 13.736C10.047 13.5 10 13.254 10 13C10 12.746 10.047 12.5 10.14 12.264C10.242 12.007 10.391 11.781 10.586 11.586C10.781 11.391 11.007 11.242 11.264 11.14C11.5 11.047 11.746 11 12 11C12.254 11 12.5 11.047 12.736 11.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='M5.854 11.854C5.681 12.026 5.484 12.16 5.26 12.257C5.018 12.362 4.764 12.414 4.5 12.414C4.236 12.414 3.982 12.362 3.74 12.257C3.516 12.16 3.319 12.026 3.146 11.854C2.974 11.681 2.84 11.484 2.743 11.26C2.638 11.018 2.586 10.764 2.586 10.5C2.586 10.236 2.638 9.982 2.743 9.74C2.84 9.516 2.974 9.319 3.146 9.146L5.266 7.027C5.082 6.518 4.993 5.99 5 5.441C5.01 4.692 5.196 3.989 5.557 3.332C5.918 2.675 6.412 2.142 7.04 1.732C7.598 1.368 8.206 1.139 8.866 1.045C9.526 0.951 10.174 1.001 10.812 1.195C11.529 1.414 12.152 1.788 12.682 2.318C13.212 2.848 13.586 3.471 13.805 4.188C13.999 4.826 14.049 5.474 13.955 6.134C13.861 6.794 13.632 7.402 13.268 7.96C12.858 8.588 12.325 9.082 11.668 9.443C11.011 9.804 10.308 9.99 9.559 10C9.01 10.007 8.482 9.918 7.973 9.734L5.854 11.854ZM11.186 8.567C11.697 8.286 12.112 7.902 12.431 7.414C12.714 6.98 12.892 6.506 12.965 5.993C13.038 5.48 12.999 4.976 12.848 4.48C12.678 3.922 12.387 3.437 11.975 3.025C11.563 2.613 11.078 2.322 10.52 2.152C10.024 2.001 9.52 1.962 9.007 2.035C8.494 2.108 8.02 2.286 7.586 2.569C7.098 2.888 6.714 3.303 6.433 3.814C6.319 4.021 6.228 4.233 6.159 4.452L10.548 8.841C10.767 8.772 10.979 8.681 11.186 8.567ZM7.764 8.653C7.866 8.634 7.964 8.647 8.06 8.69C8.453 8.867 8.862 8.969 9.287 8.994L6.006 5.713C6.031 6.138 6.133 6.547 6.31 6.94C6.353 7.036 6.366 7.134 6.347 7.236C6.329 7.337 6.282 7.425 6.208 7.499L3.854 9.854C3.675 10.032 3.586 10.248 3.586 10.5C3.586 10.752 3.675 10.968 3.854 11.146C4.032 11.325 4.248 11.414 4.5 11.414C4.752 11.414 4.968 11.325 5.146 11.146L7.501 8.792C7.575 8.718 7.663 8.671 7.764 8.653ZM12.736 11.14C12.993 11.242 13.219 11.391 13.414 11.586C13.609 11.781 13.758 12.007 13.86 12.264C13.953 12.5 14 12.746 14 13C14 13.254 13.953 13.5 13.86 13.736C13.758 13.993 13.609 14.219 13.414 14.414C13.219 14.609 12.993 14.758 12.736 14.86C12.5 14.953 12.254 15 12 15C11.746 15 11.5 14.953 11.264 14.86C11.007 14.758 10.781 14.609 10.586 14.414C10.391 14.219 10.242 13.993 10.14 13.736C10.047 13.5 10 13.254 10 13C10 12.746 10.047 12.5 10.14 12.264C10.242 12.007 10.391 11.781 10.586 11.586C10.781 11.391 11.007 11.242 11.264 11.14C11.5 11.047 11.746 11 12 11C12.254 11 12.5 11.047 12.736 11.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='M5.854 11.854C5.681 12.026 5.484 12.16 5.26 12.257C5.018 12.362 4.764 12.414 4.5 12.414C4.236 12.414 3.982 12.362 3.74 12.257C3.516 12.16 3.319 12.026 3.146 11.854C2.974 11.681 2.84 11.484 2.743 11.26C2.638 11.018 2.586 10.764 2.586 10.5C2.586 10.236 2.638 9.982 2.743 9.74C2.84 9.516 2.974 9.319 3.146 9.146L5.266 7.027C5.082 6.518 4.993 5.99 5 5.441C5.01 4.692 5.196 3.989 5.557 3.332C5.918 2.675 6.412 2.142 7.04 1.732C7.598 1.368 8.206 1.139 8.866 1.045C9.526 0.951 10.174 1.001 10.812 1.195C11.529 1.414 12.152 1.788 12.682 2.318C13.212 2.848 13.586 3.471 13.805 4.188C13.999 4.826 14.049 5.474 13.955 6.134C13.861 6.794 13.632 7.402 13.268 7.96C12.858 8.588 12.325 9.082 11.668 9.443C11.011 9.804 10.308 9.99 9.559 10C9.01 10.007 8.482 9.918 7.973 9.734L5.854 11.854ZM11.186 8.567C11.697 8.286 12.112 7.902 12.431 7.414C12.714 6.98 12.892 6.506 12.965 5.993C13.038 5.48 12.999 4.976 12.848 4.48C12.678 3.922 12.387 3.437 11.975 3.025C11.563 2.613 11.078 2.322 10.52 2.152C10.024 2.001 9.52 1.962 9.007 2.035C8.494 2.108 8.02 2.286 7.586 2.569C7.098 2.888 6.714 3.303 6.433 3.814C6.319 4.021 6.228 4.233 6.159 4.452L10.548 8.841C10.767 8.772 10.979 8.681 11.186 8.567ZM7.764 8.653C7.866 8.634 7.964 8.647 8.06 8.69C8.453 8.867 8.862 8.969 9.287 8.994L6.006 5.713C6.031 6.138 6.133 6.547 6.31 6.94C6.353 7.036 6.366 7.134 6.347 7.236C6.329 7.337 6.282 7.425 6.208 7.499L3.854 9.854C3.675 10.032 3.586 10.248 3.586 10.5C3.586 10.752 3.675 10.968 3.854 11.146C4.032 11.325 4.248 11.414 4.5 11.414C4.752 11.414 4.968 11.325 5.146 11.146L7.501 8.792C7.575 8.718 7.663 8.671 7.764 8.653ZM12.736 11.14C12.993 11.242 13.219 11.391 13.414 11.586C13.609 11.781 13.758 12.007 13.86 12.264C13.953 12.5 14 12.746 14 13C14 13.254 13.953 13.5 13.86 13.736C13.758 13.993 13.609 14.219 13.414 14.414C13.219 14.609 12.993 14.758 12.736 14.86C12.5 14.953 12.254 15 12 15C11.746 15 11.5 14.953 11.264 14.86C11.007 14.758 10.781 14.609 10.586 14.414C10.391 14.219 10.242 13.993 10.14 13.736C10.047 13.5 10 13.254 10 13C10 12.746 10.047 12.5 10.14 12.264C10.242 12.007 10.391 11.781 10.586 11.586C10.781 11.391 11.007 11.242 11.264 11.14C11.5 11.047 11.746 11 12 11C12.254 11 12.5 11.047 12.736 11.14Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "ping-pong" (line-round), MIT. https://gentleface.com/icons/ping-pong import SwiftUI struct PingPongIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 5.854, y: 11.854)) p.addCurve(to: CGPoint(x: 5.26, y: 12.257), control1: CGPoint(x: 5.681, y: 12.026), control2: CGPoint(x: 5.484, y: 12.16)) p.addCurve(to: CGPoint(x: 4.5, y: 12.414), control1: CGPoint(x: 5.018, y: 12.362), control2: CGPoint(x: 4.764, y: 12.414)) p.addCurve(to: CGPoint(x: 3.74, y: 12.257), control1: CGPoint(x: 4.236, y: 12.414), control2: CGPoint(x: 3.982, y: 12.362)) p.addCurve(to: CGPoint(x: 3.146, y: 11.854), control1: CGPoint(x: 3.516, y: 12.16), control2: CGPoint(x: 3.319, y: 12.026)) p.addCurve(to: CGPoint(x: 2.743, y: 11.26), control1: CGPoint(x: 2.974, y: 11.681), control2: CGPoint(x: 2.84, y: 11.484)) p.addCurve(to: CGPoint(x: 2.586, y: 10.5), control1: CGPoint(x: 2.638, y: 11.018), control2: CGPoint(x: 2.586, y: 10.764)) p.addCurve(to: CGPoint(x: 2.743, y: 9.74), control1: CGPoint(x: 2.586, y: 10.236), control2: CGPoint(x: 2.638, y: 9.982)) p.addCurve(to: CGPoint(x: 3.146, y: 9.146), control1: CGPoint(x: 2.84, y: 9.516), control2: CGPoint(x: 2.974, y: 9.319)) p.addLine(to: CGPoint(x: 5.266, y: 7.027)) p.addCurve(to: CGPoint(x: 5, y: 5.441), control1: CGPoint(x: 5.082, y: 6.518), control2: CGPoint(x: 4.993, y: 5.99)) p.addCurve(to: CGPoint(x: 5.557, y: 3.332), control1: CGPoint(x: 5.01, y: 4.692), control2: CGPoint(x: 5.196, y: 3.989)) p.addCurve(to: CGPoint(x: 7.04, y: 1.732), control1: CGPoint(x: 5.918, y: 2.675), control2: CGPoint(x: 6.412, y: 2.142)) p.addCurve(to: CGPoint(x: 8.866, y: 1.045), control1: CGPoint(x: 7.598, y: 1.368), control2: CGPoint(x: 8.206, y: 1.139)) p.addCurve(to: CGPoint(x: 10.812, y: 1.195), control1: CGPoint(x: 9.526, y: 0.951), control2: CGPoint(x: 10.174, y: 1.001)) p.addCurve(to: CGPoint(x: 12.682, y: 2.318), control1: CGPoint(x: 11.529, y: 1.414), control2: CGPoint(x: 12.152, y: 1.788)) p.addCurve(to: CGPoint(x: 13.805, y: 4.188), control1: CGPoint(x: 13.212, y: 2.848), control2: CGPoint(x: 13.586, y: 3.471)) p.addCurve(to: CGPoint(x: 13.955, y: 6.134), control1: CGPoint(x: 13.999, y: 4.826), control2: CGPoint(x: 14.049, y: 5.474)) p.addCurve(to: CGPoint(x: 13.268, y: 7.96), control1: CGPoint(x: 13.861, y: 6.794), control2: CGPoint(x: 13.632, y: 7.402)) p.addCurve(to: CGPoint(x: 11.668, y: 9.443), control1: CGPoint(x: 12.858, y: 8.588), control2: CGPoint(x: 12.325, y: 9.082)) p.addCurve(to: CGPoint(x: 9.559, y: 10), control1: CGPoint(x: 11.011, y: 9.804), control2: CGPoint(x: 10.308, y: 9.99)) p.addCurve(to: CGPoint(x: 7.973, y: 9.734), control1: CGPoint(x: 9.01, y: 10.007), control2: CGPoint(x: 8.482, y: 9.918)) p.addLine(to: CGPoint(x: 5.854, y: 11.854)) p.closeSubpath() p.move(to: CGPoint(x: 11.186, y: 8.567)) p.addCurve(to: CGPoint(x: 12.431, y: 7.414), control1: CGPoint(x: 11.697, y: 8.286), control2: CGPoint(x: 12.112, y: 7.902)) p.addCurve(to: CGPoint(x: 12.965, y: 5.993), control1: CGPoint(x: 12.714, y: 6.98), control2: CGPoint(x: 12.892, y: 6.506)) p.addCurve(to: CGPoint(x: 12.848, y: 4.48), control1: CGPoint(x: 13.038, y: 5.48), control2: CGPoint(x: 12.999, y: 4.976)) p.addCurve(to: CGPoint(x: 11.975, y: 3.025), control1: CGPoint(x: 12.678, y: 3.922), control2: CGPoint(x: 12.387, y: 3.437)) p.addCurve(to: CGPoint(x: 10.52, y: 2.152), control1: CGPoint(x: 11.563, y: 2.613), control2: CGPoint(x: 11.078, y: 2.322)) p.addCurve(to: CGPoint(x: 9.007, y: 2.035), control1: CGPoint(x: 10.024, y: 2.001), control2: CGPoint(x: 9.52, y: 1.962)) p.addCurve(to: CGPoint(x: 7.586, y: 2.569), control1: CGPoint(x: 8.494, y: 2.108), control2: CGPoint(x: 8.02, y: 2.286)) p.addCurve(to: CGPoint(x: 6.433, y: 3.814), control1: CGPoint(x: 7.098, y: 2.888), control2: CGPoint(x: 6.714, y: 3.303)) p.addCurve(to: CGPoint(x: 6.159, y: 4.452), control1: CGPoint(x: 6.319, y: 4.021), control2: CGPoint(x: 6.228, y: 4.233)) p.addLine(to: CGPoint(x: 10.548, y: 8.841)) p.addCurve(to: CGPoint(x: 11.186, y: 8.567), control1: CGPoint(x: 10.767, y: 8.772), control2: CGPoint(x: 10.979, y: 8.681)) p.closeSubpath() p.move(to: CGPoint(x: 7.764, y: 8.653)) p.addCurve(to: CGPoint(x: 8.06, y: 8.69), control1: CGPoint(x: 7.866, y: 8.634), control2: CGPoint(x: 7.964, y: 8.647)) p.addCurve(to: CGPoint(x: 9.287, y: 8.994), control1: CGPoint(x: 8.453, y: 8.867), control2: CGPoint(x: 8.862, y: 8.969)) p.addLine(to: CGPoint(x: 6.006, y: 5.713)) p.addCurve(to: CGPoint(x: 6.31, y: 6.94), control1: CGPoint(x: 6.031, y: 6.138), control2: CGPoint(x: 6.133, y: 6.547)) p.addCurve(to: CGPoint(x: 6.347, y: 7.236), control1: CGPoint(x: 6.353, y: 7.036), control2: CGPoint(x: 6.366, y: 7.134)) p.addCurve(to: CGPoint(x: 6.208, y: 7.499), control1: CGPoint(x: 6.329, y: 7.337), control2: CGPoint(x: 6.282, y: 7.425)) p.addLine(to: CGPoint(x: 3.854, y: 9.854)) p.addCurve(to: CGPoint(x: 3.586, y: 10.5), control1: CGPoint(x: 3.675, y: 10.032), control2: CGPoint(x: 3.586, y: 10.248)) p.addCurve(to: CGPoint(x: 3.854, y: 11.146), control1: CGPoint(x: 3.586, y: 10.752), control2: CGPoint(x: 3.675, y: 10.968)) p.addCurve(to: CGPoint(x: 4.5, y: 11.414), control1: CGPoint(x: 4.032, y: 11.325), control2: CGPoint(x: 4.248, y: 11.414)) p.addCurve(to: CGPoint(x: 5.146, y: 11.146), control1: CGPoint(x: 4.752, y: 11.414), control2: CGPoint(x: 4.968, y: 11.325)) p.addLine(to: CGPoint(x: 7.501, y: 8.792)) p.addCurve(to: CGPoint(x: 7.764, y: 8.653), control1: CGPoint(x: 7.575, y: 8.718), control2: CGPoint(x: 7.663, y: 8.671)) p.closeSubpath() p.move(to: CGPoint(x: 12.736, y: 11.14)) p.addCurve(to: CGPoint(x: 13.414, y: 11.586), control1: CGPoint(x: 12.993, y: 11.242), control2: CGPoint(x: 13.219, y: 11.391)) p.addCurve(to: CGPoint(x: 13.86, y: 12.264), control1: CGPoint(x: 13.609, y: 11.781), control2: CGPoint(x: 13.758, y: 12.007)) p.addCurve(to: CGPoint(x: 14, y: 13), control1: CGPoint(x: 13.953, y: 12.5), control2: CGPoint(x: 14, y: 12.746)) p.addCurve(to: CGPoint(x: 13.86, y: 13.736), control1: CGPoint(x: 14, y: 13.254), control2: CGPoint(x: 13.953, y: 13.5)) p.addCurve(to: CGPoint(x: 13.414, y: 14.414), control1: CGPoint(x: 13.758, y: 13.993), control2: CGPoint(x: 13.609, y: 14.219)) p.addCurve(to: CGPoint(x: 12.736, y: 14.86), control1: CGPoint(x: 13.219, y: 14.609), control2: CGPoint(x: 12.993, y: 14.758)) p.addCurve(to: CGPoint(x: 12, y: 15), control1: CGPoint(x: 12.5, y: 14.953), control2: CGPoint(x: 12.254, y: 15)) p.addCurve(to: CGPoint(x: 11.264, y: 14.86), control1: CGPoint(x: 11.746, y: 15), control2: CGPoint(x: 11.5, y: 14.953)) p.addCurve(to: CGPoint(x: 10.586, y: 14.414), control1: CGPoint(x: 11.007, y: 14.758), control2: CGPoint(x: 10.781, y: 14.609)) p.addCurve(to: CGPoint(x: 10.14, y: 13.736), control1: CGPoint(x: 10.391, y: 14.219), control2: CGPoint(x: 10.242, y: 13.993)) p.addCurve(to: CGPoint(x: 10, y: 13), control1: CGPoint(x: 10.047, y: 13.5), control2: CGPoint(x: 10, y: 13.254)) p.addCurve(to: CGPoint(x: 10.14, y: 12.264), control1: CGPoint(x: 10, y: 12.746), control2: CGPoint(x: 10.047, y: 12.5)) p.addCurve(to: CGPoint(x: 10.586, y: 11.586), control1: CGPoint(x: 10.242, y: 12.007), control2: CGPoint(x: 10.391, y: 11.781)) p.addCurve(to: CGPoint(x: 11.264, y: 11.14), control1: CGPoint(x: 10.781, y: 11.391), control2: CGPoint(x: 11.007, y: 11.242)) p.addCurve(to: CGPoint(x: 12, y: 11), control1: CGPoint(x: 11.5, y: 11.047), control2: CGPoint(x: 11.746, y: 11)) p.addCurve(to: CGPoint(x: 12.736, y: 11.14), control1: CGPoint(x: 12.254, y: 11), control2: CGPoint(x: 12.5, y: 11.047)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // PingPongIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "ping-pong" (line-round), MIT. https://gentleface.com/icons/ping-pong 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 PingPongIcon: ImageVector by lazy { ImageVector.Builder( name = "ping-pong", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M5.854 11.854C5.681 12.026 5.484 12.16 5.26 12.257C5.018 12.362 4.764 12.414 4.5 12.414C4.236 12.414 3.982 12.362 3.74 12.257C3.516 12.16 3.319 12.026 3.146 11.854C2.974 11.681 2.84 11.484 2.743 11.26C2.638 11.018 2.586 10.764 2.586 10.5C2.586 10.236 2.638 9.982 2.743 9.74C2.84 9.516 2.974 9.319 3.146 9.146L5.266 7.027C5.082 6.518 4.993 5.99 5 5.441C5.01 4.692 5.196 3.989 5.557 3.332C5.918 2.675 6.412 2.142 7.04 1.732C7.598 1.368 8.206 1.139 8.866 1.045C9.526 0.951 10.174 1.001 10.812 1.195C11.529 1.414 12.152 1.788 12.682 2.318C13.212 2.848 13.586 3.471 13.805 4.188C13.999 4.826 14.049 5.474 13.955 6.134C13.861 6.794 13.632 7.402 13.268 7.96C12.858 8.588 12.325 9.082 11.668 9.443C11.011 9.804 10.308 9.99 9.559 10C9.01 10.007 8.482 9.918 7.973 9.734L5.854 11.854ZM11.186 8.567C11.697 8.286 12.112 7.902 12.431 7.414C12.714 6.98 12.892 6.506 12.965 5.993C13.038 5.48 12.999 4.976 12.848 4.48C12.678 3.922 12.387 3.437 11.975 3.025C11.563 2.613 11.078 2.322 10.52 2.152C10.024 2.001 9.52 1.962 9.007 2.035C8.494 2.108 8.02 2.286 7.586 2.569C7.098 2.888 6.714 3.303 6.433 3.814C6.319 4.021 6.228 4.233 6.159 4.452L10.548 8.841C10.767 8.772 10.979 8.681 11.186 8.567ZM7.764 8.653C7.866 8.634 7.964 8.647 8.06 8.69C8.453 8.867 8.862 8.969 9.287 8.994L6.006 5.713C6.031 6.138 6.133 6.547 6.31 6.94C6.353 7.036 6.366 7.134 6.347 7.236C6.329 7.337 6.282 7.425 6.208 7.499L3.854 9.854C3.675 10.032 3.586 10.248 3.586 10.5C3.586 10.752 3.675 10.968 3.854 11.146C4.032 11.325 4.248 11.414 4.5 11.414C4.752 11.414 4.968 11.325 5.146 11.146L7.501 8.792C7.575 8.718 7.663 8.671 7.764 8.653ZM12.736 11.14C12.993 11.242 13.219 11.391 13.414 11.586C13.609 11.781 13.758 12.007 13.86 12.264C13.953 12.5 14 12.746 14 13C14 13.254 13.953 13.5 13.86 13.736C13.758 13.993 13.609 14.219 13.414 14.414C13.219 14.609 12.993 14.758 12.736 14.86C12.5 14.953 12.254 15 12 15C11.746 15 11.5 14.953 11.264 14.86C11.007 14.758 10.781 14.609 10.586 14.414C10.391 14.219 10.242 13.993 10.14 13.736C10.047 13.5 10 13.254 10 13C10 12.746 10.047 12.5 10.14 12.264C10.242 12.007 10.391 11.781 10.586 11.586C10.781 11.391 11.007 11.242 11.264 11.14C11.5 11.047 11.746 11 12 11C12.254 11 12.5 11.047 12.736 11.14Z"), fill = SolidColor(Color.Black), ).build() } // Icon(PingPongIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "ping-pong" (line-round), MIT. https://gentleface.com/icons/ping-pong import 'package:flutter/widgets.dart'; class PingPongIcon extends StatelessWidget { const PingPongIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _PingPongIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _PingPongIconPainter extends CustomPainter { _PingPongIconPainter(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.854, 11.854) ..cubicTo(5.681, 12.026, 5.484, 12.16, 5.26, 12.257) ..cubicTo(5.018, 12.362, 4.764, 12.414, 4.5, 12.414) ..cubicTo(4.236, 12.414, 3.982, 12.362, 3.74, 12.257) ..cubicTo(3.516, 12.16, 3.319, 12.026, 3.146, 11.854) ..cubicTo(2.974, 11.681, 2.84, 11.484, 2.743, 11.26) ..cubicTo(2.638, 11.018, 2.586, 10.764, 2.586, 10.5) ..cubicTo(2.586, 10.236, 2.638, 9.982, 2.743, 9.74) ..cubicTo(2.84, 9.516, 2.974, 9.319, 3.146, 9.146) ..lineTo(5.266, 7.027) ..cubicTo(5.082, 6.518, 4.993, 5.99, 5, 5.441) ..cubicTo(5.01, 4.692, 5.196, 3.989, 5.557, 3.332) ..cubicTo(5.918, 2.675, 6.412, 2.142, 7.04, 1.732) ..cubicTo(7.598, 1.368, 8.206, 1.139, 8.866, 1.045) ..cubicTo(9.526, 0.951, 10.174, 1.001, 10.812, 1.195) ..cubicTo(11.529, 1.414, 12.152, 1.788, 12.682, 2.318) ..cubicTo(13.212, 2.848, 13.586, 3.471, 13.805, 4.188) ..cubicTo(13.999, 4.826, 14.049, 5.474, 13.955, 6.134) ..cubicTo(13.861, 6.794, 13.632, 7.402, 13.268, 7.96) ..cubicTo(12.858, 8.588, 12.325, 9.082, 11.668, 9.443) ..cubicTo(11.011, 9.804, 10.308, 9.99, 9.559, 10) ..cubicTo(9.01, 10.007, 8.482, 9.918, 7.973, 9.734) ..lineTo(5.854, 11.854) ..close() ..moveTo(11.186, 8.567) ..cubicTo(11.697, 8.286, 12.112, 7.902, 12.431, 7.414) ..cubicTo(12.714, 6.98, 12.892, 6.506, 12.965, 5.993) ..cubicTo(13.038, 5.48, 12.999, 4.976, 12.848, 4.48) ..cubicTo(12.678, 3.922, 12.387, 3.437, 11.975, 3.025) ..cubicTo(11.563, 2.613, 11.078, 2.322, 10.52, 2.152) ..cubicTo(10.024, 2.001, 9.52, 1.962, 9.007, 2.035) ..cubicTo(8.494, 2.108, 8.02, 2.286, 7.586, 2.569) ..cubicTo(7.098, 2.888, 6.714, 3.303, 6.433, 3.814) ..cubicTo(6.319, 4.021, 6.228, 4.233, 6.159, 4.452) ..lineTo(10.548, 8.841) ..cubicTo(10.767, 8.772, 10.979, 8.681, 11.186, 8.567) ..close() ..moveTo(7.764, 8.653) ..cubicTo(7.866, 8.634, 7.964, 8.647, 8.06, 8.69) ..cubicTo(8.453, 8.867, 8.862, 8.969, 9.287, 8.994) ..lineTo(6.006, 5.713) ..cubicTo(6.031, 6.138, 6.133, 6.547, 6.31, 6.94) ..cubicTo(6.353, 7.036, 6.366, 7.134, 6.347, 7.236) ..cubicTo(6.329, 7.337, 6.282, 7.425, 6.208, 7.499) ..lineTo(3.854, 9.854) ..cubicTo(3.675, 10.032, 3.586, 10.248, 3.586, 10.5) ..cubicTo(3.586, 10.752, 3.675, 10.968, 3.854, 11.146) ..cubicTo(4.032, 11.325, 4.248, 11.414, 4.5, 11.414) ..cubicTo(4.752, 11.414, 4.968, 11.325, 5.146, 11.146) ..lineTo(7.501, 8.792) ..cubicTo(7.575, 8.718, 7.663, 8.671, 7.764, 8.653) ..close() ..moveTo(12.736, 11.14) ..cubicTo(12.993, 11.242, 13.219, 11.391, 13.414, 11.586) ..cubicTo(13.609, 11.781, 13.758, 12.007, 13.86, 12.264) ..cubicTo(13.953, 12.5, 14, 12.746, 14, 13) ..cubicTo(14, 13.254, 13.953, 13.5, 13.86, 13.736) ..cubicTo(13.758, 13.993, 13.609, 14.219, 13.414, 14.414) ..cubicTo(13.219, 14.609, 12.993, 14.758, 12.736, 14.86) ..cubicTo(12.5, 14.953, 12.254, 15, 12, 15) ..cubicTo(11.746, 15, 11.5, 14.953, 11.264, 14.86) ..cubicTo(11.007, 14.758, 10.781, 14.609, 10.586, 14.414) ..cubicTo(10.391, 14.219, 10.242, 13.993, 10.14, 13.736) ..cubicTo(10.047, 13.5, 10, 13.254, 10, 13) ..cubicTo(10, 12.746, 10.047, 12.5, 10.14, 12.264) ..cubicTo(10.242, 12.007, 10.391, 11.781, 10.586, 11.586) ..cubicTo(10.781, 11.391, 11.007, 11.242, 11.264, 11.14) ..cubicTo(11.5, 11.047, 11.746, 11, 12, 11) ..cubicTo(12.254, 11, 12.5, 11.047, 12.736, 11.14) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_PingPongIconPainter old) => old.color != color; } ```