# american-football icon American football. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/american-football - Category: Games & sports - Use it for: american football, rugby, gridiron, rugby ball, rugby union, rugby league - Tags: american-football, football, rugby, ball, sports, game, nfl, gridiron, laces, team-sport - Component name: AmericanFootballIcon - Added: 2026-10-15 ## Alternatives - `soccer-ball`: football as most of the world means it (soccer) ## Also fits - soccer: American football (gridiron) ## 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/american-football.svg · PNG https://gentleface.com/png/line-round/16/american-football.png · https://gentleface.com/png/line-round/32/american-football.png · https://gentleface.com/png/line-round/48/american-football.png - line-soft: https://gentleface.com/svg/line-soft/16/american-football.svg · PNG https://gentleface.com/png/line-soft/16/american-football.png · https://gentleface.com/png/line-soft/32/american-football.png · https://gentleface.com/png/line-soft/48/american-football.png - line-sharp: https://gentleface.com/svg/line-sharp/16/american-football.svg · PNG https://gentleface.com/png/line-sharp/16/american-football.png · https://gentleface.com/png/line-sharp/32/american-football.png · https://gentleface.com/png/line-sharp/48/american-football.png - solid-round: https://gentleface.com/svg/solid-round/16/american-football.svg · PNG https://gentleface.com/png/solid-round/16/american-football.png · https://gentleface.com/png/solid-round/32/american-football.png · https://gentleface.com/png/solid-round/48/american-football.png - solid-soft: https://gentleface.com/svg/solid-soft/16/american-football.svg · PNG https://gentleface.com/png/solid-soft/16/american-football.png · https://gentleface.com/png/solid-soft/32/american-football.png · https://gentleface.com/png/solid-soft/48/american-football.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/american-football.svg · PNG https://gentleface.com/png/solid-sharp/16/american-football.png · https://gentleface.com/png/solid-sharp/32/american-football.png · https://gentleface.com/png/solid-sharp/48/american-football.png The SVG of every style: https://gentleface.com/icons/american-football.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 "american-football" (line-round), MIT. https://gentleface.com/icons/american-football import type { SVGProps } from 'react'; export function AmericanFootballIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "american-football" (line-round), MIT. https://gentleface.com/icons/american-football. Takes the text color. */ .icon-american-football { 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='M1.285 8.192C1.498 7.342 1.822 6.536 2.258 5.776C2.677 5.044 3.186 4.379 3.782 3.782C4.379 3.186 5.044 2.677 5.776 2.258C6.536 1.822 7.342 1.498 8.192 1.285C9.042 1.072 9.905 0.978 10.781 1.004C11.624 1.029 12.45 1.164 13.258 1.409C13.428 1.461 13.539 1.572 13.591 1.742C13.836 2.55 13.971 3.376 13.996 4.219C14.022 5.095 13.928 5.958 13.715 6.808C13.502 7.658 13.178 8.464 12.742 9.224C12.323 9.956 11.814 10.621 11.218 11.218C10.621 11.814 9.956 12.323 9.224 12.742C8.464 13.178 7.658 13.502 6.808 13.715C5.958 13.928 5.095 14.022 4.219 13.996C3.376 13.971 2.55 13.836 1.742 13.591C1.572 13.539 1.461 13.428 1.409 13.258C1.164 12.45 1.029 11.624 1.004 10.781C0.978 9.905 1.072 9.042 1.285 8.192ZM6.565 12.745C7.326 12.555 8.046 12.265 8.727 11.875C9.382 11.499 9.976 11.044 10.51 10.51C11.044 9.976 11.499 9.382 11.875 8.727C12.265 8.046 12.555 7.326 12.745 6.565C12.936 5.805 13.019 5.033 12.996 4.249C12.977 3.584 12.881 2.932 12.708 2.292C12.068 2.119 11.416 2.023 10.751 2.004C9.967 1.981 9.195 2.064 8.435 2.255C7.674 2.445 6.954 2.735 6.273 3.125C5.618 3.501 5.024 3.956 4.49 4.49C3.956 5.024 3.501 5.618 3.125 6.273C2.735 6.954 2.445 7.674 2.255 8.435C2.064 9.195 1.981 9.967 2.004 10.751C2.023 11.416 2.119 12.068 2.292 12.708C2.932 12.881 3.584 12.977 4.249 12.996C5.033 13.019 5.805 12.936 6.565 12.745ZM8.207 7.5L8.854 8.146C8.953 8.246 9.003 8.364 9.003 8.5C9.003 8.636 8.953 8.754 8.854 8.854C8.754 8.953 8.636 9.003 8.5 9.003C8.364 9.003 8.246 8.953 8.146 8.854L7.5 8.207L6.207 9.5L6.854 10.146C6.953 10.246 7.003 10.364 7.003 10.5C7.003 10.636 6.953 10.754 6.854 10.854C6.756 10.951 6.638 11 6.5 11C6.362 11 6.244 10.951 6.146 10.854L4.146 8.854C4.047 8.754 3.997 8.636 3.997 8.5C3.997 8.364 4.047 8.246 4.146 8.146C4.244 8.049 4.362 8 4.5 8C4.638 8 4.756 8.049 4.854 8.146L5.5 8.793L6.793 7.5L6.146 6.854C6.047 6.754 5.997 6.636 5.997 6.5C5.997 6.364 6.047 6.246 6.146 6.146C6.246 6.047 6.364 5.997 6.5 5.997C6.636 5.997 6.754 6.047 6.854 6.146L7.5 6.793L8.793 5.5L8.146 4.854C8.049 4.756 8 4.638 8 4.5C8 4.362 8.049 4.244 8.146 4.146C8.246 4.047 8.364 3.997 8.5 3.997C8.636 3.997 8.754 4.047 8.854 4.146L10.854 6.146C10.951 6.244 11 6.362 11 6.5C11 6.638 10.951 6.756 10.854 6.854C10.754 6.953 10.636 7.003 10.5 7.003C10.364 7.003 10.246 6.953 10.146 6.854L9.5 6.207L8.207 7.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='M1.285 8.192C1.498 7.342 1.822 6.536 2.258 5.776C2.677 5.044 3.186 4.379 3.782 3.782C4.379 3.186 5.044 2.677 5.776 2.258C6.536 1.822 7.342 1.498 8.192 1.285C9.042 1.072 9.905 0.978 10.781 1.004C11.624 1.029 12.45 1.164 13.258 1.409C13.428 1.461 13.539 1.572 13.591 1.742C13.836 2.55 13.971 3.376 13.996 4.219C14.022 5.095 13.928 5.958 13.715 6.808C13.502 7.658 13.178 8.464 12.742 9.224C12.323 9.956 11.814 10.621 11.218 11.218C10.621 11.814 9.956 12.323 9.224 12.742C8.464 13.178 7.658 13.502 6.808 13.715C5.958 13.928 5.095 14.022 4.219 13.996C3.376 13.971 2.55 13.836 1.742 13.591C1.572 13.539 1.461 13.428 1.409 13.258C1.164 12.45 1.029 11.624 1.004 10.781C0.978 9.905 1.072 9.042 1.285 8.192ZM6.565 12.745C7.326 12.555 8.046 12.265 8.727 11.875C9.382 11.499 9.976 11.044 10.51 10.51C11.044 9.976 11.499 9.382 11.875 8.727C12.265 8.046 12.555 7.326 12.745 6.565C12.936 5.805 13.019 5.033 12.996 4.249C12.977 3.584 12.881 2.932 12.708 2.292C12.068 2.119 11.416 2.023 10.751 2.004C9.967 1.981 9.195 2.064 8.435 2.255C7.674 2.445 6.954 2.735 6.273 3.125C5.618 3.501 5.024 3.956 4.49 4.49C3.956 5.024 3.501 5.618 3.125 6.273C2.735 6.954 2.445 7.674 2.255 8.435C2.064 9.195 1.981 9.967 2.004 10.751C2.023 11.416 2.119 12.068 2.292 12.708C2.932 12.881 3.584 12.977 4.249 12.996C5.033 13.019 5.805 12.936 6.565 12.745ZM8.207 7.5L8.854 8.146C8.953 8.246 9.003 8.364 9.003 8.5C9.003 8.636 8.953 8.754 8.854 8.854C8.754 8.953 8.636 9.003 8.5 9.003C8.364 9.003 8.246 8.953 8.146 8.854L7.5 8.207L6.207 9.5L6.854 10.146C6.953 10.246 7.003 10.364 7.003 10.5C7.003 10.636 6.953 10.754 6.854 10.854C6.756 10.951 6.638 11 6.5 11C6.362 11 6.244 10.951 6.146 10.854L4.146 8.854C4.047 8.754 3.997 8.636 3.997 8.5C3.997 8.364 4.047 8.246 4.146 8.146C4.244 8.049 4.362 8 4.5 8C4.638 8 4.756 8.049 4.854 8.146L5.5 8.793L6.793 7.5L6.146 6.854C6.047 6.754 5.997 6.636 5.997 6.5C5.997 6.364 6.047 6.246 6.146 6.146C6.246 6.047 6.364 5.997 6.5 5.997C6.636 5.997 6.754 6.047 6.854 6.146L7.5 6.793L8.793 5.5L8.146 4.854C8.049 4.756 8 4.638 8 4.5C8 4.362 8.049 4.244 8.146 4.146C8.246 4.047 8.364 3.997 8.5 3.997C8.636 3.997 8.754 4.047 8.854 4.146L10.854 6.146C10.951 6.244 11 6.362 11 6.5C11 6.638 10.951 6.756 10.854 6.854C10.754 6.953 10.636 7.003 10.5 7.003C10.364 7.003 10.246 6.953 10.146 6.854L9.5 6.207L8.207 7.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='M1.285 8.192C1.498 7.342 1.822 6.536 2.258 5.776C2.677 5.044 3.186 4.379 3.782 3.782C4.379 3.186 5.044 2.677 5.776 2.258C6.536 1.822 7.342 1.498 8.192 1.285C9.042 1.072 9.905 0.978 10.781 1.004C11.624 1.029 12.45 1.164 13.258 1.409C13.428 1.461 13.539 1.572 13.591 1.742C13.836 2.55 13.971 3.376 13.996 4.219C14.022 5.095 13.928 5.958 13.715 6.808C13.502 7.658 13.178 8.464 12.742 9.224C12.323 9.956 11.814 10.621 11.218 11.218C10.621 11.814 9.956 12.323 9.224 12.742C8.464 13.178 7.658 13.502 6.808 13.715C5.958 13.928 5.095 14.022 4.219 13.996C3.376 13.971 2.55 13.836 1.742 13.591C1.572 13.539 1.461 13.428 1.409 13.258C1.164 12.45 1.029 11.624 1.004 10.781C0.978 9.905 1.072 9.042 1.285 8.192ZM6.565 12.745C7.326 12.555 8.046 12.265 8.727 11.875C9.382 11.499 9.976 11.044 10.51 10.51C11.044 9.976 11.499 9.382 11.875 8.727C12.265 8.046 12.555 7.326 12.745 6.565C12.936 5.805 13.019 5.033 12.996 4.249C12.977 3.584 12.881 2.932 12.708 2.292C12.068 2.119 11.416 2.023 10.751 2.004C9.967 1.981 9.195 2.064 8.435 2.255C7.674 2.445 6.954 2.735 6.273 3.125C5.618 3.501 5.024 3.956 4.49 4.49C3.956 5.024 3.501 5.618 3.125 6.273C2.735 6.954 2.445 7.674 2.255 8.435C2.064 9.195 1.981 9.967 2.004 10.751C2.023 11.416 2.119 12.068 2.292 12.708C2.932 12.881 3.584 12.977 4.249 12.996C5.033 13.019 5.805 12.936 6.565 12.745ZM8.207 7.5L8.854 8.146C8.953 8.246 9.003 8.364 9.003 8.5C9.003 8.636 8.953 8.754 8.854 8.854C8.754 8.953 8.636 9.003 8.5 9.003C8.364 9.003 8.246 8.953 8.146 8.854L7.5 8.207L6.207 9.5L6.854 10.146C6.953 10.246 7.003 10.364 7.003 10.5C7.003 10.636 6.953 10.754 6.854 10.854C6.756 10.951 6.638 11 6.5 11C6.362 11 6.244 10.951 6.146 10.854L4.146 8.854C4.047 8.754 3.997 8.636 3.997 8.5C3.997 8.364 4.047 8.246 4.146 8.146C4.244 8.049 4.362 8 4.5 8C4.638 8 4.756 8.049 4.854 8.146L5.5 8.793L6.793 7.5L6.146 6.854C6.047 6.754 5.997 6.636 5.997 6.5C5.997 6.364 6.047 6.246 6.146 6.146C6.246 6.047 6.364 5.997 6.5 5.997C6.636 5.997 6.754 6.047 6.854 6.146L7.5 6.793L8.793 5.5L8.146 4.854C8.049 4.756 8 4.638 8 4.5C8 4.362 8.049 4.244 8.146 4.146C8.246 4.047 8.364 3.997 8.5 3.997C8.636 3.997 8.754 4.047 8.854 4.146L10.854 6.146C10.951 6.244 11 6.362 11 6.5C11 6.638 10.951 6.756 10.854 6.854C10.754 6.953 10.636 7.003 10.5 7.003C10.364 7.003 10.246 6.953 10.146 6.854L9.5 6.207L8.207 7.5Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "american-football" (line-round), MIT. https://gentleface.com/icons/american-football import SwiftUI struct AmericanFootballIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 1.285, y: 8.192)) p.addCurve(to: CGPoint(x: 2.258, y: 5.776), control1: CGPoint(x: 1.498, y: 7.342), control2: CGPoint(x: 1.822, y: 6.536)) p.addCurve(to: CGPoint(x: 3.782, y: 3.782), control1: CGPoint(x: 2.677, y: 5.044), control2: CGPoint(x: 3.186, y: 4.379)) p.addCurve(to: CGPoint(x: 5.776, y: 2.258), control1: CGPoint(x: 4.379, y: 3.186), control2: CGPoint(x: 5.044, y: 2.677)) p.addCurve(to: CGPoint(x: 8.192, y: 1.285), control1: CGPoint(x: 6.536, y: 1.822), control2: CGPoint(x: 7.342, y: 1.498)) p.addCurve(to: CGPoint(x: 10.781, y: 1.004), control1: CGPoint(x: 9.042, y: 1.072), control2: CGPoint(x: 9.905, y: 0.978)) p.addCurve(to: CGPoint(x: 13.258, y: 1.409), control1: CGPoint(x: 11.624, y: 1.029), control2: CGPoint(x: 12.45, y: 1.164)) p.addCurve(to: CGPoint(x: 13.591, y: 1.742), control1: CGPoint(x: 13.428, y: 1.461), control2: CGPoint(x: 13.539, y: 1.572)) p.addCurve(to: CGPoint(x: 13.996, y: 4.219), control1: CGPoint(x: 13.836, y: 2.55), control2: CGPoint(x: 13.971, y: 3.376)) p.addCurve(to: CGPoint(x: 13.715, y: 6.808), control1: CGPoint(x: 14.022, y: 5.095), control2: CGPoint(x: 13.928, y: 5.958)) p.addCurve(to: CGPoint(x: 12.742, y: 9.224), control1: CGPoint(x: 13.502, y: 7.658), control2: CGPoint(x: 13.178, y: 8.464)) p.addCurve(to: CGPoint(x: 11.218, y: 11.218), control1: CGPoint(x: 12.323, y: 9.956), control2: CGPoint(x: 11.814, y: 10.621)) p.addCurve(to: CGPoint(x: 9.224, y: 12.742), control1: CGPoint(x: 10.621, y: 11.814), control2: CGPoint(x: 9.956, y: 12.323)) p.addCurve(to: CGPoint(x: 6.808, y: 13.715), control1: CGPoint(x: 8.464, y: 13.178), control2: CGPoint(x: 7.658, y: 13.502)) p.addCurve(to: CGPoint(x: 4.219, y: 13.996), control1: CGPoint(x: 5.958, y: 13.928), control2: CGPoint(x: 5.095, y: 14.022)) p.addCurve(to: CGPoint(x: 1.742, y: 13.591), control1: CGPoint(x: 3.376, y: 13.971), control2: CGPoint(x: 2.55, y: 13.836)) p.addCurve(to: CGPoint(x: 1.409, y: 13.258), control1: CGPoint(x: 1.572, y: 13.539), control2: CGPoint(x: 1.461, y: 13.428)) p.addCurve(to: CGPoint(x: 1.004, y: 10.781), control1: CGPoint(x: 1.164, y: 12.45), control2: CGPoint(x: 1.029, y: 11.624)) p.addCurve(to: CGPoint(x: 1.285, y: 8.192), control1: CGPoint(x: 0.978, y: 9.905), control2: CGPoint(x: 1.072, y: 9.042)) p.closeSubpath() p.move(to: CGPoint(x: 6.565, y: 12.745)) p.addCurve(to: CGPoint(x: 8.727, y: 11.875), control1: CGPoint(x: 7.326, y: 12.555), control2: CGPoint(x: 8.046, y: 12.265)) p.addCurve(to: CGPoint(x: 10.51, y: 10.51), control1: CGPoint(x: 9.382, y: 11.499), control2: CGPoint(x: 9.976, y: 11.044)) p.addCurve(to: CGPoint(x: 11.875, y: 8.727), control1: CGPoint(x: 11.044, y: 9.976), control2: CGPoint(x: 11.499, y: 9.382)) p.addCurve(to: CGPoint(x: 12.745, y: 6.565), control1: CGPoint(x: 12.265, y: 8.046), control2: CGPoint(x: 12.555, y: 7.326)) p.addCurve(to: CGPoint(x: 12.996, y: 4.249), control1: CGPoint(x: 12.936, y: 5.805), control2: CGPoint(x: 13.019, y: 5.033)) p.addCurve(to: CGPoint(x: 12.708, y: 2.292), control1: CGPoint(x: 12.977, y: 3.584), control2: CGPoint(x: 12.881, y: 2.932)) p.addCurve(to: CGPoint(x: 10.751, y: 2.004), control1: CGPoint(x: 12.068, y: 2.119), control2: CGPoint(x: 11.416, y: 2.023)) p.addCurve(to: CGPoint(x: 8.435, y: 2.255), control1: CGPoint(x: 9.967, y: 1.981), control2: CGPoint(x: 9.195, y: 2.064)) p.addCurve(to: CGPoint(x: 6.273, y: 3.125), control1: CGPoint(x: 7.674, y: 2.445), control2: CGPoint(x: 6.954, y: 2.735)) p.addCurve(to: CGPoint(x: 4.49, y: 4.49), control1: CGPoint(x: 5.618, y: 3.501), control2: CGPoint(x: 5.024, y: 3.956)) p.addCurve(to: CGPoint(x: 3.125, y: 6.273), control1: CGPoint(x: 3.956, y: 5.024), control2: CGPoint(x: 3.501, y: 5.618)) p.addCurve(to: CGPoint(x: 2.255, y: 8.435), control1: CGPoint(x: 2.735, y: 6.954), control2: CGPoint(x: 2.445, y: 7.674)) p.addCurve(to: CGPoint(x: 2.004, y: 10.751), control1: CGPoint(x: 2.064, y: 9.195), control2: CGPoint(x: 1.981, y: 9.967)) p.addCurve(to: CGPoint(x: 2.292, y: 12.708), control1: CGPoint(x: 2.023, y: 11.416), control2: CGPoint(x: 2.119, y: 12.068)) p.addCurve(to: CGPoint(x: 4.249, y: 12.996), control1: CGPoint(x: 2.932, y: 12.881), control2: CGPoint(x: 3.584, y: 12.977)) p.addCurve(to: CGPoint(x: 6.565, y: 12.745), control1: CGPoint(x: 5.033, y: 13.019), control2: CGPoint(x: 5.805, y: 12.936)) p.closeSubpath() p.move(to: CGPoint(x: 8.207, y: 7.5)) p.addLine(to: CGPoint(x: 8.854, y: 8.146)) p.addCurve(to: CGPoint(x: 9.003, y: 8.5), control1: CGPoint(x: 8.953, y: 8.246), control2: CGPoint(x: 9.003, y: 8.364)) p.addCurve(to: CGPoint(x: 8.854, y: 8.854), control1: CGPoint(x: 9.003, y: 8.636), control2: CGPoint(x: 8.953, y: 8.754)) p.addCurve(to: CGPoint(x: 8.5, y: 9.003), control1: CGPoint(x: 8.754, y: 8.953), control2: CGPoint(x: 8.636, y: 9.003)) p.addCurve(to: CGPoint(x: 8.146, y: 8.854), control1: CGPoint(x: 8.364, y: 9.003), control2: CGPoint(x: 8.246, y: 8.953)) p.addLine(to: CGPoint(x: 7.5, y: 8.207)) p.addLine(to: CGPoint(x: 6.207, y: 9.5)) p.addLine(to: CGPoint(x: 6.854, y: 10.146)) p.addCurve(to: CGPoint(x: 7.003, y: 10.5), control1: CGPoint(x: 6.953, y: 10.246), control2: CGPoint(x: 7.003, y: 10.364)) p.addCurve(to: CGPoint(x: 6.854, y: 10.854), control1: CGPoint(x: 7.003, y: 10.636), control2: CGPoint(x: 6.953, y: 10.754)) p.addCurve(to: CGPoint(x: 6.5, y: 11), control1: CGPoint(x: 6.756, y: 10.951), control2: CGPoint(x: 6.638, y: 11)) p.addCurve(to: CGPoint(x: 6.146, y: 10.854), control1: CGPoint(x: 6.362, y: 11), control2: CGPoint(x: 6.244, y: 10.951)) p.addLine(to: CGPoint(x: 4.146, y: 8.854)) p.addCurve(to: CGPoint(x: 3.997, y: 8.5), control1: CGPoint(x: 4.047, y: 8.754), control2: CGPoint(x: 3.997, y: 8.636)) p.addCurve(to: CGPoint(x: 4.146, y: 8.146), control1: CGPoint(x: 3.997, y: 8.364), control2: CGPoint(x: 4.047, y: 8.246)) p.addCurve(to: CGPoint(x: 4.5, y: 8), control1: CGPoint(x: 4.244, y: 8.049), control2: CGPoint(x: 4.362, y: 8)) p.addCurve(to: CGPoint(x: 4.854, y: 8.146), control1: CGPoint(x: 4.638, y: 8), control2: CGPoint(x: 4.756, y: 8.049)) p.addLine(to: CGPoint(x: 5.5, y: 8.793)) p.addLine(to: CGPoint(x: 6.793, y: 7.5)) p.addLine(to: CGPoint(x: 6.146, y: 6.854)) p.addCurve(to: CGPoint(x: 5.997, y: 6.5), control1: CGPoint(x: 6.047, y: 6.754), control2: CGPoint(x: 5.997, y: 6.636)) p.addCurve(to: CGPoint(x: 6.146, y: 6.146), control1: CGPoint(x: 5.997, y: 6.364), control2: CGPoint(x: 6.047, y: 6.246)) p.addCurve(to: CGPoint(x: 6.5, y: 5.997), control1: CGPoint(x: 6.246, y: 6.047), control2: CGPoint(x: 6.364, y: 5.997)) p.addCurve(to: CGPoint(x: 6.854, y: 6.146), control1: CGPoint(x: 6.636, y: 5.997), control2: CGPoint(x: 6.754, y: 6.047)) p.addLine(to: CGPoint(x: 7.5, y: 6.793)) p.addLine(to: CGPoint(x: 8.793, y: 5.5)) p.addLine(to: CGPoint(x: 8.146, y: 4.854)) p.addCurve(to: CGPoint(x: 8, y: 4.5), control1: CGPoint(x: 8.049, y: 4.756), control2: CGPoint(x: 8, y: 4.638)) p.addCurve(to: CGPoint(x: 8.146, y: 4.146), control1: CGPoint(x: 8, y: 4.362), control2: CGPoint(x: 8.049, y: 4.244)) p.addCurve(to: CGPoint(x: 8.5, y: 3.997), control1: CGPoint(x: 8.246, y: 4.047), control2: CGPoint(x: 8.364, y: 3.997)) p.addCurve(to: CGPoint(x: 8.854, y: 4.146), control1: CGPoint(x: 8.636, y: 3.997), control2: CGPoint(x: 8.754, y: 4.047)) p.addLine(to: CGPoint(x: 10.854, y: 6.146)) p.addCurve(to: CGPoint(x: 11, y: 6.5), control1: CGPoint(x: 10.951, y: 6.244), control2: CGPoint(x: 11, y: 6.362)) p.addCurve(to: CGPoint(x: 10.854, y: 6.854), control1: CGPoint(x: 11, y: 6.638), control2: CGPoint(x: 10.951, y: 6.756)) p.addCurve(to: CGPoint(x: 10.5, y: 7.003), control1: CGPoint(x: 10.754, y: 6.953), control2: CGPoint(x: 10.636, y: 7.003)) p.addCurve(to: CGPoint(x: 10.146, y: 6.854), control1: CGPoint(x: 10.364, y: 7.003), control2: CGPoint(x: 10.246, y: 6.953)) p.addLine(to: CGPoint(x: 9.5, y: 6.207)) p.addLine(to: CGPoint(x: 8.207, y: 7.5)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // AmericanFootballIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "american-football" (line-round), MIT. https://gentleface.com/icons/american-football 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 AmericanFootballIcon: ImageVector by lazy { ImageVector.Builder( name = "american-football", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M1.285 8.192C1.498 7.342 1.822 6.536 2.258 5.776C2.677 5.044 3.186 4.379 3.782 3.782C4.379 3.186 5.044 2.677 5.776 2.258C6.536 1.822 7.342 1.498 8.192 1.285C9.042 1.072 9.905 0.978 10.781 1.004C11.624 1.029 12.45 1.164 13.258 1.409C13.428 1.461 13.539 1.572 13.591 1.742C13.836 2.55 13.971 3.376 13.996 4.219C14.022 5.095 13.928 5.958 13.715 6.808C13.502 7.658 13.178 8.464 12.742 9.224C12.323 9.956 11.814 10.621 11.218 11.218C10.621 11.814 9.956 12.323 9.224 12.742C8.464 13.178 7.658 13.502 6.808 13.715C5.958 13.928 5.095 14.022 4.219 13.996C3.376 13.971 2.55 13.836 1.742 13.591C1.572 13.539 1.461 13.428 1.409 13.258C1.164 12.45 1.029 11.624 1.004 10.781C0.978 9.905 1.072 9.042 1.285 8.192ZM6.565 12.745C7.326 12.555 8.046 12.265 8.727 11.875C9.382 11.499 9.976 11.044 10.51 10.51C11.044 9.976 11.499 9.382 11.875 8.727C12.265 8.046 12.555 7.326 12.745 6.565C12.936 5.805 13.019 5.033 12.996 4.249C12.977 3.584 12.881 2.932 12.708 2.292C12.068 2.119 11.416 2.023 10.751 2.004C9.967 1.981 9.195 2.064 8.435 2.255C7.674 2.445 6.954 2.735 6.273 3.125C5.618 3.501 5.024 3.956 4.49 4.49C3.956 5.024 3.501 5.618 3.125 6.273C2.735 6.954 2.445 7.674 2.255 8.435C2.064 9.195 1.981 9.967 2.004 10.751C2.023 11.416 2.119 12.068 2.292 12.708C2.932 12.881 3.584 12.977 4.249 12.996C5.033 13.019 5.805 12.936 6.565 12.745ZM8.207 7.5L8.854 8.146C8.953 8.246 9.003 8.364 9.003 8.5C9.003 8.636 8.953 8.754 8.854 8.854C8.754 8.953 8.636 9.003 8.5 9.003C8.364 9.003 8.246 8.953 8.146 8.854L7.5 8.207L6.207 9.5L6.854 10.146C6.953 10.246 7.003 10.364 7.003 10.5C7.003 10.636 6.953 10.754 6.854 10.854C6.756 10.951 6.638 11 6.5 11C6.362 11 6.244 10.951 6.146 10.854L4.146 8.854C4.047 8.754 3.997 8.636 3.997 8.5C3.997 8.364 4.047 8.246 4.146 8.146C4.244 8.049 4.362 8 4.5 8C4.638 8 4.756 8.049 4.854 8.146L5.5 8.793L6.793 7.5L6.146 6.854C6.047 6.754 5.997 6.636 5.997 6.5C5.997 6.364 6.047 6.246 6.146 6.146C6.246 6.047 6.364 5.997 6.5 5.997C6.636 5.997 6.754 6.047 6.854 6.146L7.5 6.793L8.793 5.5L8.146 4.854C8.049 4.756 8 4.638 8 4.5C8 4.362 8.049 4.244 8.146 4.146C8.246 4.047 8.364 3.997 8.5 3.997C8.636 3.997 8.754 4.047 8.854 4.146L10.854 6.146C10.951 6.244 11 6.362 11 6.5C11 6.638 10.951 6.756 10.854 6.854C10.754 6.953 10.636 7.003 10.5 7.003C10.364 7.003 10.246 6.953 10.146 6.854L9.5 6.207L8.207 7.5Z"), fill = SolidColor(Color.Black), ).build() } // Icon(AmericanFootballIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "american-football" (line-round), MIT. https://gentleface.com/icons/american-football import 'package:flutter/widgets.dart'; class AmericanFootballIcon extends StatelessWidget { const AmericanFootballIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _AmericanFootballIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _AmericanFootballIconPainter extends CustomPainter { _AmericanFootballIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(1.285, 8.192) ..cubicTo(1.498, 7.342, 1.822, 6.536, 2.258, 5.776) ..cubicTo(2.677, 5.044, 3.186, 4.379, 3.782, 3.782) ..cubicTo(4.379, 3.186, 5.044, 2.677, 5.776, 2.258) ..cubicTo(6.536, 1.822, 7.342, 1.498, 8.192, 1.285) ..cubicTo(9.042, 1.072, 9.905, 0.978, 10.781, 1.004) ..cubicTo(11.624, 1.029, 12.45, 1.164, 13.258, 1.409) ..cubicTo(13.428, 1.461, 13.539, 1.572, 13.591, 1.742) ..cubicTo(13.836, 2.55, 13.971, 3.376, 13.996, 4.219) ..cubicTo(14.022, 5.095, 13.928, 5.958, 13.715, 6.808) ..cubicTo(13.502, 7.658, 13.178, 8.464, 12.742, 9.224) ..cubicTo(12.323, 9.956, 11.814, 10.621, 11.218, 11.218) ..cubicTo(10.621, 11.814, 9.956, 12.323, 9.224, 12.742) ..cubicTo(8.464, 13.178, 7.658, 13.502, 6.808, 13.715) ..cubicTo(5.958, 13.928, 5.095, 14.022, 4.219, 13.996) ..cubicTo(3.376, 13.971, 2.55, 13.836, 1.742, 13.591) ..cubicTo(1.572, 13.539, 1.461, 13.428, 1.409, 13.258) ..cubicTo(1.164, 12.45, 1.029, 11.624, 1.004, 10.781) ..cubicTo(0.978, 9.905, 1.072, 9.042, 1.285, 8.192) ..close() ..moveTo(6.565, 12.745) ..cubicTo(7.326, 12.555, 8.046, 12.265, 8.727, 11.875) ..cubicTo(9.382, 11.499, 9.976, 11.044, 10.51, 10.51) ..cubicTo(11.044, 9.976, 11.499, 9.382, 11.875, 8.727) ..cubicTo(12.265, 8.046, 12.555, 7.326, 12.745, 6.565) ..cubicTo(12.936, 5.805, 13.019, 5.033, 12.996, 4.249) ..cubicTo(12.977, 3.584, 12.881, 2.932, 12.708, 2.292) ..cubicTo(12.068, 2.119, 11.416, 2.023, 10.751, 2.004) ..cubicTo(9.967, 1.981, 9.195, 2.064, 8.435, 2.255) ..cubicTo(7.674, 2.445, 6.954, 2.735, 6.273, 3.125) ..cubicTo(5.618, 3.501, 5.024, 3.956, 4.49, 4.49) ..cubicTo(3.956, 5.024, 3.501, 5.618, 3.125, 6.273) ..cubicTo(2.735, 6.954, 2.445, 7.674, 2.255, 8.435) ..cubicTo(2.064, 9.195, 1.981, 9.967, 2.004, 10.751) ..cubicTo(2.023, 11.416, 2.119, 12.068, 2.292, 12.708) ..cubicTo(2.932, 12.881, 3.584, 12.977, 4.249, 12.996) ..cubicTo(5.033, 13.019, 5.805, 12.936, 6.565, 12.745) ..close() ..moveTo(8.207, 7.5) ..lineTo(8.854, 8.146) ..cubicTo(8.953, 8.246, 9.003, 8.364, 9.003, 8.5) ..cubicTo(9.003, 8.636, 8.953, 8.754, 8.854, 8.854) ..cubicTo(8.754, 8.953, 8.636, 9.003, 8.5, 9.003) ..cubicTo(8.364, 9.003, 8.246, 8.953, 8.146, 8.854) ..lineTo(7.5, 8.207) ..lineTo(6.207, 9.5) ..lineTo(6.854, 10.146) ..cubicTo(6.953, 10.246, 7.003, 10.364, 7.003, 10.5) ..cubicTo(7.003, 10.636, 6.953, 10.754, 6.854, 10.854) ..cubicTo(6.756, 10.951, 6.638, 11, 6.5, 11) ..cubicTo(6.362, 11, 6.244, 10.951, 6.146, 10.854) ..lineTo(4.146, 8.854) ..cubicTo(4.047, 8.754, 3.997, 8.636, 3.997, 8.5) ..cubicTo(3.997, 8.364, 4.047, 8.246, 4.146, 8.146) ..cubicTo(4.244, 8.049, 4.362, 8, 4.5, 8) ..cubicTo(4.638, 8, 4.756, 8.049, 4.854, 8.146) ..lineTo(5.5, 8.793) ..lineTo(6.793, 7.5) ..lineTo(6.146, 6.854) ..cubicTo(6.047, 6.754, 5.997, 6.636, 5.997, 6.5) ..cubicTo(5.997, 6.364, 6.047, 6.246, 6.146, 6.146) ..cubicTo(6.246, 6.047, 6.364, 5.997, 6.5, 5.997) ..cubicTo(6.636, 5.997, 6.754, 6.047, 6.854, 6.146) ..lineTo(7.5, 6.793) ..lineTo(8.793, 5.5) ..lineTo(8.146, 4.854) ..cubicTo(8.049, 4.756, 8, 4.638, 8, 4.5) ..cubicTo(8, 4.362, 8.049, 4.244, 8.146, 4.146) ..cubicTo(8.246, 4.047, 8.364, 3.997, 8.5, 3.997) ..cubicTo(8.636, 3.997, 8.754, 4.047, 8.854, 4.146) ..lineTo(10.854, 6.146) ..cubicTo(10.951, 6.244, 11, 6.362, 11, 6.5) ..cubicTo(11, 6.638, 10.951, 6.756, 10.854, 6.854) ..cubicTo(10.754, 6.953, 10.636, 7.003, 10.5, 7.003) ..cubicTo(10.364, 7.003, 10.246, 6.953, 10.146, 6.854) ..lineTo(9.5, 6.207) ..lineTo(8.207, 7.5) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_AmericanFootballIconPainter old) => old.color != color; } ```