# hotspot icon Hotspot. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/hotspot - Category: Connectivity - Use it for: mobile hotspot, tethering, personal hotspot, wifi hotspot - Tags: hotspot, tethering, wifi, access-point, share, internet, mobile - Family: hotspot-off - Component name: HotspotIcon - Added: 2026-10-16 ## Alternatives - `router`: a router or an access point (router) ## Also fits - router: a phone shared as a hotspot (mobile-hotspot) ## 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/hotspot.svg · PNG https://gentleface.com/png/line-round/16/hotspot.png · https://gentleface.com/png/line-round/32/hotspot.png · https://gentleface.com/png/line-round/48/hotspot.png - line-soft: https://gentleface.com/svg/line-soft/16/hotspot.svg · PNG https://gentleface.com/png/line-soft/16/hotspot.png · https://gentleface.com/png/line-soft/32/hotspot.png · https://gentleface.com/png/line-soft/48/hotspot.png - line-sharp: https://gentleface.com/svg/line-sharp/16/hotspot.svg · PNG https://gentleface.com/png/line-sharp/16/hotspot.png · https://gentleface.com/png/line-sharp/32/hotspot.png · https://gentleface.com/png/line-sharp/48/hotspot.png - solid-round: https://gentleface.com/svg/solid-round/16/hotspot.svg · PNG https://gentleface.com/png/solid-round/16/hotspot.png · https://gentleface.com/png/solid-round/32/hotspot.png · https://gentleface.com/png/solid-round/48/hotspot.png - solid-soft: https://gentleface.com/svg/solid-soft/16/hotspot.svg · PNG https://gentleface.com/png/solid-soft/16/hotspot.png · https://gentleface.com/png/solid-soft/32/hotspot.png · https://gentleface.com/png/solid-soft/48/hotspot.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/hotspot.svg · PNG https://gentleface.com/png/solid-sharp/16/hotspot.png · https://gentleface.com/png/solid-sharp/32/hotspot.png · https://gentleface.com/png/solid-sharp/48/hotspot.png The SVG of every style: https://gentleface.com/icons/hotspot.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 "hotspot" (line-round), MIT. https://gentleface.com/icons/hotspot import type { SVGProps } from 'react'; export function HotspotIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "hotspot" (line-round), MIT. https://gentleface.com/icons/hotspot. Takes the text color. */ .icon-hotspot { 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 9C1 8.034 1.192 7.107 1.576 6.22C1.929 5.403 2.421 4.68 3.05 4.05C3.68 3.421 4.403 2.929 5.22 2.576C6.107 2.192 7.034 2 8 2C8.966 2 9.893 2.192 10.78 2.576C11.597 2.929 12.32 3.421 12.95 4.05C13.579 4.68 14.071 5.403 14.424 6.22C14.808 7.107 15 8.034 15 9C15 9.967 14.808 10.893 14.424 11.78C14.071 12.597 13.579 13.32 12.95 13.95C12.85 14.049 12.732 14.099 12.596 14.099C12.46 14.099 12.342 14.049 12.243 13.95C12.143 13.85 12.093 13.732 12.093 13.596C12.093 13.46 12.143 13.342 12.243 13.243C12.782 12.703 13.203 12.083 13.506 11.383C13.835 10.623 14 9.828 14 9C14 8.172 13.835 7.377 13.506 6.617C13.203 5.917 12.782 5.297 12.243 4.757C11.703 4.218 11.083 3.797 10.383 3.494C9.623 3.165 8.828 3 8 3C7.172 3 6.377 3.165 5.617 3.494C4.917 3.797 4.297 4.218 3.757 4.757C3.218 5.297 2.797 5.917 2.494 6.617C2.165 7.377 2 8.172 2 9C2 9.828 2.165 10.623 2.494 11.383C2.797 12.083 3.218 12.703 3.757 13.243C3.857 13.342 3.907 13.46 3.907 13.596C3.907 13.732 3.857 13.85 3.757 13.95C3.66 14.047 3.542 14.096 3.404 14.096C3.266 14.096 3.148 14.047 3.05 13.95C2.421 13.32 1.929 12.597 1.576 11.78C1.192 10.893 1 9.966 1 9ZM4.329 10.589C4.11 10.082 4 9.552 4 9C4 8.448 4.11 7.918 4.329 7.411C4.531 6.944 4.812 6.531 5.172 6.172C5.531 5.812 5.944 5.531 6.411 5.329C6.918 5.11 7.448 5 8 5C8.552 5 9.082 5.11 9.589 5.329C10.056 5.531 10.469 5.812 10.828 6.172C11.188 6.531 11.469 6.944 11.671 7.411C11.89 7.918 12 8.448 12 9C12 9.552 11.89 10.082 11.671 10.589C11.469 11.056 11.188 11.469 10.828 11.828C10.729 11.928 10.611 11.978 10.475 11.978C10.339 11.978 10.221 11.928 10.121 11.828C10.022 11.729 9.972 11.611 9.972 11.475C9.972 11.339 10.022 11.221 10.121 11.121C10.391 10.852 10.602 10.542 10.753 10.192C10.918 9.811 11 9.414 11 9C11 8.586 10.918 8.189 10.753 7.808C10.602 7.458 10.391 7.148 10.121 6.879C9.852 6.609 9.542 6.398 9.192 6.247C8.811 6.082 8.414 6 8 6C7.586 6 7.189 6.082 6.808 6.247C6.458 6.398 6.148 6.609 5.879 6.879C5.609 7.148 5.398 7.458 5.247 7.808C5.082 8.189 5 8.586 5 9C5 9.414 5.082 9.811 5.247 10.192C5.398 10.542 5.609 10.852 5.879 11.121C5.978 11.221 6.028 11.339 6.028 11.475C6.028 11.611 5.978 11.729 5.879 11.828C5.781 11.926 5.663 11.975 5.525 11.975C5.387 11.975 5.269 11.926 5.172 11.828C4.812 11.469 4.531 11.056 4.329 10.589ZM7.293 8.293C7.488 8.098 7.724 8 8 8C8.276 8 8.512 8.098 8.707 8.293C8.902 8.488 9 8.724 9 9C9 9.276 8.902 9.512 8.707 9.707C8.512 9.902 8.276 10 8 10C7.724 10 7.488 9.902 7.293 9.707C7.098 9.512 7 9.276 7 9C7 8.724 7.098 8.488 7.293 8.293Z'/%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 9C1 8.034 1.192 7.107 1.576 6.22C1.929 5.403 2.421 4.68 3.05 4.05C3.68 3.421 4.403 2.929 5.22 2.576C6.107 2.192 7.034 2 8 2C8.966 2 9.893 2.192 10.78 2.576C11.597 2.929 12.32 3.421 12.95 4.05C13.579 4.68 14.071 5.403 14.424 6.22C14.808 7.107 15 8.034 15 9C15 9.967 14.808 10.893 14.424 11.78C14.071 12.597 13.579 13.32 12.95 13.95C12.85 14.049 12.732 14.099 12.596 14.099C12.46 14.099 12.342 14.049 12.243 13.95C12.143 13.85 12.093 13.732 12.093 13.596C12.093 13.46 12.143 13.342 12.243 13.243C12.782 12.703 13.203 12.083 13.506 11.383C13.835 10.623 14 9.828 14 9C14 8.172 13.835 7.377 13.506 6.617C13.203 5.917 12.782 5.297 12.243 4.757C11.703 4.218 11.083 3.797 10.383 3.494C9.623 3.165 8.828 3 8 3C7.172 3 6.377 3.165 5.617 3.494C4.917 3.797 4.297 4.218 3.757 4.757C3.218 5.297 2.797 5.917 2.494 6.617C2.165 7.377 2 8.172 2 9C2 9.828 2.165 10.623 2.494 11.383C2.797 12.083 3.218 12.703 3.757 13.243C3.857 13.342 3.907 13.46 3.907 13.596C3.907 13.732 3.857 13.85 3.757 13.95C3.66 14.047 3.542 14.096 3.404 14.096C3.266 14.096 3.148 14.047 3.05 13.95C2.421 13.32 1.929 12.597 1.576 11.78C1.192 10.893 1 9.966 1 9ZM4.329 10.589C4.11 10.082 4 9.552 4 9C4 8.448 4.11 7.918 4.329 7.411C4.531 6.944 4.812 6.531 5.172 6.172C5.531 5.812 5.944 5.531 6.411 5.329C6.918 5.11 7.448 5 8 5C8.552 5 9.082 5.11 9.589 5.329C10.056 5.531 10.469 5.812 10.828 6.172C11.188 6.531 11.469 6.944 11.671 7.411C11.89 7.918 12 8.448 12 9C12 9.552 11.89 10.082 11.671 10.589C11.469 11.056 11.188 11.469 10.828 11.828C10.729 11.928 10.611 11.978 10.475 11.978C10.339 11.978 10.221 11.928 10.121 11.828C10.022 11.729 9.972 11.611 9.972 11.475C9.972 11.339 10.022 11.221 10.121 11.121C10.391 10.852 10.602 10.542 10.753 10.192C10.918 9.811 11 9.414 11 9C11 8.586 10.918 8.189 10.753 7.808C10.602 7.458 10.391 7.148 10.121 6.879C9.852 6.609 9.542 6.398 9.192 6.247C8.811 6.082 8.414 6 8 6C7.586 6 7.189 6.082 6.808 6.247C6.458 6.398 6.148 6.609 5.879 6.879C5.609 7.148 5.398 7.458 5.247 7.808C5.082 8.189 5 8.586 5 9C5 9.414 5.082 9.811 5.247 10.192C5.398 10.542 5.609 10.852 5.879 11.121C5.978 11.221 6.028 11.339 6.028 11.475C6.028 11.611 5.978 11.729 5.879 11.828C5.781 11.926 5.663 11.975 5.525 11.975C5.387 11.975 5.269 11.926 5.172 11.828C4.812 11.469 4.531 11.056 4.329 10.589ZM7.293 8.293C7.488 8.098 7.724 8 8 8C8.276 8 8.512 8.098 8.707 8.293C8.902 8.488 9 8.724 9 9C9 9.276 8.902 9.512 8.707 9.707C8.512 9.902 8.276 10 8 10C7.724 10 7.488 9.902 7.293 9.707C7.098 9.512 7 9.276 7 9C7 8.724 7.098 8.488 7.293 8.293Z'/%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 9C1 8.034 1.192 7.107 1.576 6.22C1.929 5.403 2.421 4.68 3.05 4.05C3.68 3.421 4.403 2.929 5.22 2.576C6.107 2.192 7.034 2 8 2C8.966 2 9.893 2.192 10.78 2.576C11.597 2.929 12.32 3.421 12.95 4.05C13.579 4.68 14.071 5.403 14.424 6.22C14.808 7.107 15 8.034 15 9C15 9.967 14.808 10.893 14.424 11.78C14.071 12.597 13.579 13.32 12.95 13.95C12.85 14.049 12.732 14.099 12.596 14.099C12.46 14.099 12.342 14.049 12.243 13.95C12.143 13.85 12.093 13.732 12.093 13.596C12.093 13.46 12.143 13.342 12.243 13.243C12.782 12.703 13.203 12.083 13.506 11.383C13.835 10.623 14 9.828 14 9C14 8.172 13.835 7.377 13.506 6.617C13.203 5.917 12.782 5.297 12.243 4.757C11.703 4.218 11.083 3.797 10.383 3.494C9.623 3.165 8.828 3 8 3C7.172 3 6.377 3.165 5.617 3.494C4.917 3.797 4.297 4.218 3.757 4.757C3.218 5.297 2.797 5.917 2.494 6.617C2.165 7.377 2 8.172 2 9C2 9.828 2.165 10.623 2.494 11.383C2.797 12.083 3.218 12.703 3.757 13.243C3.857 13.342 3.907 13.46 3.907 13.596C3.907 13.732 3.857 13.85 3.757 13.95C3.66 14.047 3.542 14.096 3.404 14.096C3.266 14.096 3.148 14.047 3.05 13.95C2.421 13.32 1.929 12.597 1.576 11.78C1.192 10.893 1 9.966 1 9ZM4.329 10.589C4.11 10.082 4 9.552 4 9C4 8.448 4.11 7.918 4.329 7.411C4.531 6.944 4.812 6.531 5.172 6.172C5.531 5.812 5.944 5.531 6.411 5.329C6.918 5.11 7.448 5 8 5C8.552 5 9.082 5.11 9.589 5.329C10.056 5.531 10.469 5.812 10.828 6.172C11.188 6.531 11.469 6.944 11.671 7.411C11.89 7.918 12 8.448 12 9C12 9.552 11.89 10.082 11.671 10.589C11.469 11.056 11.188 11.469 10.828 11.828C10.729 11.928 10.611 11.978 10.475 11.978C10.339 11.978 10.221 11.928 10.121 11.828C10.022 11.729 9.972 11.611 9.972 11.475C9.972 11.339 10.022 11.221 10.121 11.121C10.391 10.852 10.602 10.542 10.753 10.192C10.918 9.811 11 9.414 11 9C11 8.586 10.918 8.189 10.753 7.808C10.602 7.458 10.391 7.148 10.121 6.879C9.852 6.609 9.542 6.398 9.192 6.247C8.811 6.082 8.414 6 8 6C7.586 6 7.189 6.082 6.808 6.247C6.458 6.398 6.148 6.609 5.879 6.879C5.609 7.148 5.398 7.458 5.247 7.808C5.082 8.189 5 8.586 5 9C5 9.414 5.082 9.811 5.247 10.192C5.398 10.542 5.609 10.852 5.879 11.121C5.978 11.221 6.028 11.339 6.028 11.475C6.028 11.611 5.978 11.729 5.879 11.828C5.781 11.926 5.663 11.975 5.525 11.975C5.387 11.975 5.269 11.926 5.172 11.828C4.812 11.469 4.531 11.056 4.329 10.589ZM7.293 8.293C7.488 8.098 7.724 8 8 8C8.276 8 8.512 8.098 8.707 8.293C8.902 8.488 9 8.724 9 9C9 9.276 8.902 9.512 8.707 9.707C8.512 9.902 8.276 10 8 10C7.724 10 7.488 9.902 7.293 9.707C7.098 9.512 7 9.276 7 9C7 8.724 7.098 8.488 7.293 8.293Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "hotspot" (line-round), MIT. https://gentleface.com/icons/hotspot import SwiftUI struct HotspotIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 1, y: 9)) p.addCurve(to: CGPoint(x: 1.576, y: 6.22), control1: CGPoint(x: 1, y: 8.034), control2: CGPoint(x: 1.192, y: 7.107)) p.addCurve(to: CGPoint(x: 3.05, y: 4.05), control1: CGPoint(x: 1.929, y: 5.403), control2: CGPoint(x: 2.421, y: 4.68)) p.addCurve(to: CGPoint(x: 5.22, y: 2.576), control1: CGPoint(x: 3.68, y: 3.421), control2: CGPoint(x: 4.403, y: 2.929)) p.addCurve(to: CGPoint(x: 8, y: 2), control1: CGPoint(x: 6.107, y: 2.192), control2: CGPoint(x: 7.034, y: 2)) p.addCurve(to: CGPoint(x: 10.78, y: 2.576), control1: CGPoint(x: 8.966, y: 2), control2: CGPoint(x: 9.893, y: 2.192)) p.addCurve(to: CGPoint(x: 12.95, y: 4.05), control1: CGPoint(x: 11.597, y: 2.929), control2: CGPoint(x: 12.32, y: 3.421)) p.addCurve(to: CGPoint(x: 14.424, y: 6.22), control1: CGPoint(x: 13.579, y: 4.68), control2: CGPoint(x: 14.071, y: 5.403)) p.addCurve(to: CGPoint(x: 15, y: 9), control1: CGPoint(x: 14.808, y: 7.107), control2: CGPoint(x: 15, y: 8.034)) p.addCurve(to: CGPoint(x: 14.424, y: 11.78), control1: CGPoint(x: 15, y: 9.967), control2: CGPoint(x: 14.808, y: 10.893)) p.addCurve(to: CGPoint(x: 12.95, y: 13.95), control1: CGPoint(x: 14.071, y: 12.597), control2: CGPoint(x: 13.579, y: 13.32)) p.addCurve(to: CGPoint(x: 12.596, y: 14.099), control1: CGPoint(x: 12.85, y: 14.049), control2: CGPoint(x: 12.732, y: 14.099)) p.addCurve(to: CGPoint(x: 12.243, y: 13.95), control1: CGPoint(x: 12.46, y: 14.099), control2: CGPoint(x: 12.342, y: 14.049)) p.addCurve(to: CGPoint(x: 12.093, y: 13.596), control1: CGPoint(x: 12.143, y: 13.85), control2: CGPoint(x: 12.093, y: 13.732)) p.addCurve(to: CGPoint(x: 12.243, y: 13.243), control1: CGPoint(x: 12.093, y: 13.46), control2: CGPoint(x: 12.143, y: 13.342)) p.addCurve(to: CGPoint(x: 13.506, y: 11.383), control1: CGPoint(x: 12.782, y: 12.703), control2: CGPoint(x: 13.203, y: 12.083)) p.addCurve(to: CGPoint(x: 14, y: 9), control1: CGPoint(x: 13.835, y: 10.623), control2: CGPoint(x: 14, y: 9.828)) p.addCurve(to: CGPoint(x: 13.506, y: 6.617), control1: CGPoint(x: 14, y: 8.172), control2: CGPoint(x: 13.835, y: 7.377)) p.addCurve(to: CGPoint(x: 12.243, y: 4.757), control1: CGPoint(x: 13.203, y: 5.917), control2: CGPoint(x: 12.782, y: 5.297)) p.addCurve(to: CGPoint(x: 10.383, y: 3.494), control1: CGPoint(x: 11.703, y: 4.218), control2: CGPoint(x: 11.083, y: 3.797)) p.addCurve(to: CGPoint(x: 8, y: 3), control1: CGPoint(x: 9.623, y: 3.165), control2: CGPoint(x: 8.828, y: 3)) p.addCurve(to: CGPoint(x: 5.617, y: 3.494), control1: CGPoint(x: 7.172, y: 3), control2: CGPoint(x: 6.377, y: 3.165)) p.addCurve(to: CGPoint(x: 3.757, y: 4.757), control1: CGPoint(x: 4.917, y: 3.797), control2: CGPoint(x: 4.297, y: 4.218)) p.addCurve(to: CGPoint(x: 2.494, y: 6.617), control1: CGPoint(x: 3.218, y: 5.297), control2: CGPoint(x: 2.797, y: 5.917)) p.addCurve(to: CGPoint(x: 2, y: 9), control1: CGPoint(x: 2.165, y: 7.377), control2: CGPoint(x: 2, y: 8.172)) p.addCurve(to: CGPoint(x: 2.494, y: 11.383), control1: CGPoint(x: 2, y: 9.828), control2: CGPoint(x: 2.165, y: 10.623)) p.addCurve(to: CGPoint(x: 3.757, y: 13.243), control1: CGPoint(x: 2.797, y: 12.083), control2: CGPoint(x: 3.218, y: 12.703)) p.addCurve(to: CGPoint(x: 3.907, y: 13.596), control1: CGPoint(x: 3.857, y: 13.342), control2: CGPoint(x: 3.907, y: 13.46)) p.addCurve(to: CGPoint(x: 3.757, y: 13.95), control1: CGPoint(x: 3.907, y: 13.732), control2: CGPoint(x: 3.857, y: 13.85)) p.addCurve(to: CGPoint(x: 3.404, y: 14.096), control1: CGPoint(x: 3.66, y: 14.047), control2: CGPoint(x: 3.542, y: 14.096)) p.addCurve(to: CGPoint(x: 3.05, y: 13.95), control1: CGPoint(x: 3.266, y: 14.096), control2: CGPoint(x: 3.148, y: 14.047)) p.addCurve(to: CGPoint(x: 1.576, y: 11.78), control1: CGPoint(x: 2.421, y: 13.32), control2: CGPoint(x: 1.929, y: 12.597)) p.addCurve(to: CGPoint(x: 1, y: 9), control1: CGPoint(x: 1.192, y: 10.893), control2: CGPoint(x: 1, y: 9.966)) p.closeSubpath() p.move(to: CGPoint(x: 4.329, y: 10.589)) p.addCurve(to: CGPoint(x: 4, y: 9), control1: CGPoint(x: 4.11, y: 10.082), control2: CGPoint(x: 4, y: 9.552)) p.addCurve(to: CGPoint(x: 4.329, y: 7.411), control1: CGPoint(x: 4, y: 8.448), control2: CGPoint(x: 4.11, y: 7.918)) p.addCurve(to: CGPoint(x: 5.172, y: 6.172), control1: CGPoint(x: 4.531, y: 6.944), control2: CGPoint(x: 4.812, y: 6.531)) p.addCurve(to: CGPoint(x: 6.411, y: 5.329), control1: CGPoint(x: 5.531, y: 5.812), control2: CGPoint(x: 5.944, y: 5.531)) p.addCurve(to: CGPoint(x: 8, y: 5), control1: CGPoint(x: 6.918, y: 5.11), control2: CGPoint(x: 7.448, y: 5)) p.addCurve(to: CGPoint(x: 9.589, y: 5.329), control1: CGPoint(x: 8.552, y: 5), control2: CGPoint(x: 9.082, y: 5.11)) p.addCurve(to: CGPoint(x: 10.828, y: 6.172), control1: CGPoint(x: 10.056, y: 5.531), control2: CGPoint(x: 10.469, y: 5.812)) p.addCurve(to: CGPoint(x: 11.671, y: 7.411), control1: CGPoint(x: 11.188, y: 6.531), control2: CGPoint(x: 11.469, y: 6.944)) p.addCurve(to: CGPoint(x: 12, y: 9), control1: CGPoint(x: 11.89, y: 7.918), control2: CGPoint(x: 12, y: 8.448)) p.addCurve(to: CGPoint(x: 11.671, y: 10.589), control1: CGPoint(x: 12, y: 9.552), control2: CGPoint(x: 11.89, y: 10.082)) p.addCurve(to: CGPoint(x: 10.828, y: 11.828), control1: CGPoint(x: 11.469, y: 11.056), control2: CGPoint(x: 11.188, y: 11.469)) p.addCurve(to: CGPoint(x: 10.475, y: 11.978), control1: CGPoint(x: 10.729, y: 11.928), control2: CGPoint(x: 10.611, y: 11.978)) p.addCurve(to: CGPoint(x: 10.121, y: 11.828), control1: CGPoint(x: 10.339, y: 11.978), control2: CGPoint(x: 10.221, y: 11.928)) p.addCurve(to: CGPoint(x: 9.972, y: 11.475), control1: CGPoint(x: 10.022, y: 11.729), control2: CGPoint(x: 9.972, y: 11.611)) p.addCurve(to: CGPoint(x: 10.121, y: 11.121), control1: CGPoint(x: 9.972, y: 11.339), control2: CGPoint(x: 10.022, y: 11.221)) p.addCurve(to: CGPoint(x: 10.753, y: 10.192), control1: CGPoint(x: 10.391, y: 10.852), control2: CGPoint(x: 10.602, y: 10.542)) p.addCurve(to: CGPoint(x: 11, y: 9), control1: CGPoint(x: 10.918, y: 9.811), control2: CGPoint(x: 11, y: 9.414)) p.addCurve(to: CGPoint(x: 10.753, y: 7.808), control1: CGPoint(x: 11, y: 8.586), control2: CGPoint(x: 10.918, y: 8.189)) p.addCurve(to: CGPoint(x: 10.121, y: 6.879), control1: CGPoint(x: 10.602, y: 7.458), control2: CGPoint(x: 10.391, y: 7.148)) p.addCurve(to: CGPoint(x: 9.192, y: 6.247), control1: CGPoint(x: 9.852, y: 6.609), control2: CGPoint(x: 9.542, y: 6.398)) p.addCurve(to: CGPoint(x: 8, y: 6), control1: CGPoint(x: 8.811, y: 6.082), control2: CGPoint(x: 8.414, y: 6)) p.addCurve(to: CGPoint(x: 6.808, y: 6.247), control1: CGPoint(x: 7.586, y: 6), control2: CGPoint(x: 7.189, y: 6.082)) p.addCurve(to: CGPoint(x: 5.879, y: 6.879), control1: CGPoint(x: 6.458, y: 6.398), control2: CGPoint(x: 6.148, y: 6.609)) p.addCurve(to: CGPoint(x: 5.247, y: 7.808), control1: CGPoint(x: 5.609, y: 7.148), control2: CGPoint(x: 5.398, y: 7.458)) p.addCurve(to: CGPoint(x: 5, y: 9), control1: CGPoint(x: 5.082, y: 8.189), control2: CGPoint(x: 5, y: 8.586)) p.addCurve(to: CGPoint(x: 5.247, y: 10.192), control1: CGPoint(x: 5, y: 9.414), control2: CGPoint(x: 5.082, y: 9.811)) p.addCurve(to: CGPoint(x: 5.879, y: 11.121), control1: CGPoint(x: 5.398, y: 10.542), control2: CGPoint(x: 5.609, y: 10.852)) p.addCurve(to: CGPoint(x: 6.028, y: 11.475), control1: CGPoint(x: 5.978, y: 11.221), control2: CGPoint(x: 6.028, y: 11.339)) p.addCurve(to: CGPoint(x: 5.879, y: 11.828), control1: CGPoint(x: 6.028, y: 11.611), control2: CGPoint(x: 5.978, y: 11.729)) p.addCurve(to: CGPoint(x: 5.525, y: 11.975), control1: CGPoint(x: 5.781, y: 11.926), control2: CGPoint(x: 5.663, y: 11.975)) p.addCurve(to: CGPoint(x: 5.172, y: 11.828), control1: CGPoint(x: 5.387, y: 11.975), control2: CGPoint(x: 5.269, y: 11.926)) p.addCurve(to: CGPoint(x: 4.329, y: 10.589), control1: CGPoint(x: 4.812, y: 11.469), control2: CGPoint(x: 4.531, y: 11.056)) p.closeSubpath() p.move(to: CGPoint(x: 7.293, y: 8.293)) p.addCurve(to: CGPoint(x: 8, y: 8), control1: CGPoint(x: 7.488, y: 8.098), control2: CGPoint(x: 7.724, y: 8)) p.addCurve(to: CGPoint(x: 8.707, y: 8.293), control1: CGPoint(x: 8.276, y: 8), control2: CGPoint(x: 8.512, y: 8.098)) p.addCurve(to: CGPoint(x: 9, y: 9), control1: CGPoint(x: 8.902, y: 8.488), control2: CGPoint(x: 9, y: 8.724)) p.addCurve(to: CGPoint(x: 8.707, y: 9.707), control1: CGPoint(x: 9, y: 9.276), control2: CGPoint(x: 8.902, y: 9.512)) p.addCurve(to: CGPoint(x: 8, y: 10), control1: CGPoint(x: 8.512, y: 9.902), control2: CGPoint(x: 8.276, y: 10)) p.addCurve(to: CGPoint(x: 7.293, y: 9.707), control1: CGPoint(x: 7.724, y: 10), control2: CGPoint(x: 7.488, y: 9.902)) p.addCurve(to: CGPoint(x: 7, y: 9), control1: CGPoint(x: 7.098, y: 9.512), control2: CGPoint(x: 7, y: 9.276)) p.addCurve(to: CGPoint(x: 7.293, y: 8.293), control1: CGPoint(x: 7, y: 8.724), control2: CGPoint(x: 7.098, y: 8.488)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // HotspotIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "hotspot" (line-round), MIT. https://gentleface.com/icons/hotspot 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 HotspotIcon: ImageVector by lazy { ImageVector.Builder( name = "hotspot", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M1 9C1 8.034 1.192 7.107 1.576 6.22C1.929 5.403 2.421 4.68 3.05 4.05C3.68 3.421 4.403 2.929 5.22 2.576C6.107 2.192 7.034 2 8 2C8.966 2 9.893 2.192 10.78 2.576C11.597 2.929 12.32 3.421 12.95 4.05C13.579 4.68 14.071 5.403 14.424 6.22C14.808 7.107 15 8.034 15 9C15 9.967 14.808 10.893 14.424 11.78C14.071 12.597 13.579 13.32 12.95 13.95C12.85 14.049 12.732 14.099 12.596 14.099C12.46 14.099 12.342 14.049 12.243 13.95C12.143 13.85 12.093 13.732 12.093 13.596C12.093 13.46 12.143 13.342 12.243 13.243C12.782 12.703 13.203 12.083 13.506 11.383C13.835 10.623 14 9.828 14 9C14 8.172 13.835 7.377 13.506 6.617C13.203 5.917 12.782 5.297 12.243 4.757C11.703 4.218 11.083 3.797 10.383 3.494C9.623 3.165 8.828 3 8 3C7.172 3 6.377 3.165 5.617 3.494C4.917 3.797 4.297 4.218 3.757 4.757C3.218 5.297 2.797 5.917 2.494 6.617C2.165 7.377 2 8.172 2 9C2 9.828 2.165 10.623 2.494 11.383C2.797 12.083 3.218 12.703 3.757 13.243C3.857 13.342 3.907 13.46 3.907 13.596C3.907 13.732 3.857 13.85 3.757 13.95C3.66 14.047 3.542 14.096 3.404 14.096C3.266 14.096 3.148 14.047 3.05 13.95C2.421 13.32 1.929 12.597 1.576 11.78C1.192 10.893 1 9.966 1 9ZM4.329 10.589C4.11 10.082 4 9.552 4 9C4 8.448 4.11 7.918 4.329 7.411C4.531 6.944 4.812 6.531 5.172 6.172C5.531 5.812 5.944 5.531 6.411 5.329C6.918 5.11 7.448 5 8 5C8.552 5 9.082 5.11 9.589 5.329C10.056 5.531 10.469 5.812 10.828 6.172C11.188 6.531 11.469 6.944 11.671 7.411C11.89 7.918 12 8.448 12 9C12 9.552 11.89 10.082 11.671 10.589C11.469 11.056 11.188 11.469 10.828 11.828C10.729 11.928 10.611 11.978 10.475 11.978C10.339 11.978 10.221 11.928 10.121 11.828C10.022 11.729 9.972 11.611 9.972 11.475C9.972 11.339 10.022 11.221 10.121 11.121C10.391 10.852 10.602 10.542 10.753 10.192C10.918 9.811 11 9.414 11 9C11 8.586 10.918 8.189 10.753 7.808C10.602 7.458 10.391 7.148 10.121 6.879C9.852 6.609 9.542 6.398 9.192 6.247C8.811 6.082 8.414 6 8 6C7.586 6 7.189 6.082 6.808 6.247C6.458 6.398 6.148 6.609 5.879 6.879C5.609 7.148 5.398 7.458 5.247 7.808C5.082 8.189 5 8.586 5 9C5 9.414 5.082 9.811 5.247 10.192C5.398 10.542 5.609 10.852 5.879 11.121C5.978 11.221 6.028 11.339 6.028 11.475C6.028 11.611 5.978 11.729 5.879 11.828C5.781 11.926 5.663 11.975 5.525 11.975C5.387 11.975 5.269 11.926 5.172 11.828C4.812 11.469 4.531 11.056 4.329 10.589ZM7.293 8.293C7.488 8.098 7.724 8 8 8C8.276 8 8.512 8.098 8.707 8.293C8.902 8.488 9 8.724 9 9C9 9.276 8.902 9.512 8.707 9.707C8.512 9.902 8.276 10 8 10C7.724 10 7.488 9.902 7.293 9.707C7.098 9.512 7 9.276 7 9C7 8.724 7.098 8.488 7.293 8.293Z"), fill = SolidColor(Color.Black), ).build() } // Icon(HotspotIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "hotspot" (line-round), MIT. https://gentleface.com/icons/hotspot import 'package:flutter/widgets.dart'; class HotspotIcon extends StatelessWidget { const HotspotIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _HotspotIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _HotspotIconPainter extends CustomPainter { _HotspotIconPainter(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, 9) ..cubicTo(1, 8.034, 1.192, 7.107, 1.576, 6.22) ..cubicTo(1.929, 5.403, 2.421, 4.68, 3.05, 4.05) ..cubicTo(3.68, 3.421, 4.403, 2.929, 5.22, 2.576) ..cubicTo(6.107, 2.192, 7.034, 2, 8, 2) ..cubicTo(8.966, 2, 9.893, 2.192, 10.78, 2.576) ..cubicTo(11.597, 2.929, 12.32, 3.421, 12.95, 4.05) ..cubicTo(13.579, 4.68, 14.071, 5.403, 14.424, 6.22) ..cubicTo(14.808, 7.107, 15, 8.034, 15, 9) ..cubicTo(15, 9.967, 14.808, 10.893, 14.424, 11.78) ..cubicTo(14.071, 12.597, 13.579, 13.32, 12.95, 13.95) ..cubicTo(12.85, 14.049, 12.732, 14.099, 12.596, 14.099) ..cubicTo(12.46, 14.099, 12.342, 14.049, 12.243, 13.95) ..cubicTo(12.143, 13.85, 12.093, 13.732, 12.093, 13.596) ..cubicTo(12.093, 13.46, 12.143, 13.342, 12.243, 13.243) ..cubicTo(12.782, 12.703, 13.203, 12.083, 13.506, 11.383) ..cubicTo(13.835, 10.623, 14, 9.828, 14, 9) ..cubicTo(14, 8.172, 13.835, 7.377, 13.506, 6.617) ..cubicTo(13.203, 5.917, 12.782, 5.297, 12.243, 4.757) ..cubicTo(11.703, 4.218, 11.083, 3.797, 10.383, 3.494) ..cubicTo(9.623, 3.165, 8.828, 3, 8, 3) ..cubicTo(7.172, 3, 6.377, 3.165, 5.617, 3.494) ..cubicTo(4.917, 3.797, 4.297, 4.218, 3.757, 4.757) ..cubicTo(3.218, 5.297, 2.797, 5.917, 2.494, 6.617) ..cubicTo(2.165, 7.377, 2, 8.172, 2, 9) ..cubicTo(2, 9.828, 2.165, 10.623, 2.494, 11.383) ..cubicTo(2.797, 12.083, 3.218, 12.703, 3.757, 13.243) ..cubicTo(3.857, 13.342, 3.907, 13.46, 3.907, 13.596) ..cubicTo(3.907, 13.732, 3.857, 13.85, 3.757, 13.95) ..cubicTo(3.66, 14.047, 3.542, 14.096, 3.404, 14.096) ..cubicTo(3.266, 14.096, 3.148, 14.047, 3.05, 13.95) ..cubicTo(2.421, 13.32, 1.929, 12.597, 1.576, 11.78) ..cubicTo(1.192, 10.893, 1, 9.966, 1, 9) ..close() ..moveTo(4.329, 10.589) ..cubicTo(4.11, 10.082, 4, 9.552, 4, 9) ..cubicTo(4, 8.448, 4.11, 7.918, 4.329, 7.411) ..cubicTo(4.531, 6.944, 4.812, 6.531, 5.172, 6.172) ..cubicTo(5.531, 5.812, 5.944, 5.531, 6.411, 5.329) ..cubicTo(6.918, 5.11, 7.448, 5, 8, 5) ..cubicTo(8.552, 5, 9.082, 5.11, 9.589, 5.329) ..cubicTo(10.056, 5.531, 10.469, 5.812, 10.828, 6.172) ..cubicTo(11.188, 6.531, 11.469, 6.944, 11.671, 7.411) ..cubicTo(11.89, 7.918, 12, 8.448, 12, 9) ..cubicTo(12, 9.552, 11.89, 10.082, 11.671, 10.589) ..cubicTo(11.469, 11.056, 11.188, 11.469, 10.828, 11.828) ..cubicTo(10.729, 11.928, 10.611, 11.978, 10.475, 11.978) ..cubicTo(10.339, 11.978, 10.221, 11.928, 10.121, 11.828) ..cubicTo(10.022, 11.729, 9.972, 11.611, 9.972, 11.475) ..cubicTo(9.972, 11.339, 10.022, 11.221, 10.121, 11.121) ..cubicTo(10.391, 10.852, 10.602, 10.542, 10.753, 10.192) ..cubicTo(10.918, 9.811, 11, 9.414, 11, 9) ..cubicTo(11, 8.586, 10.918, 8.189, 10.753, 7.808) ..cubicTo(10.602, 7.458, 10.391, 7.148, 10.121, 6.879) ..cubicTo(9.852, 6.609, 9.542, 6.398, 9.192, 6.247) ..cubicTo(8.811, 6.082, 8.414, 6, 8, 6) ..cubicTo(7.586, 6, 7.189, 6.082, 6.808, 6.247) ..cubicTo(6.458, 6.398, 6.148, 6.609, 5.879, 6.879) ..cubicTo(5.609, 7.148, 5.398, 7.458, 5.247, 7.808) ..cubicTo(5.082, 8.189, 5, 8.586, 5, 9) ..cubicTo(5, 9.414, 5.082, 9.811, 5.247, 10.192) ..cubicTo(5.398, 10.542, 5.609, 10.852, 5.879, 11.121) ..cubicTo(5.978, 11.221, 6.028, 11.339, 6.028, 11.475) ..cubicTo(6.028, 11.611, 5.978, 11.729, 5.879, 11.828) ..cubicTo(5.781, 11.926, 5.663, 11.975, 5.525, 11.975) ..cubicTo(5.387, 11.975, 5.269, 11.926, 5.172, 11.828) ..cubicTo(4.812, 11.469, 4.531, 11.056, 4.329, 10.589) ..close() ..moveTo(7.293, 8.293) ..cubicTo(7.488, 8.098, 7.724, 8, 8, 8) ..cubicTo(8.276, 8, 8.512, 8.098, 8.707, 8.293) ..cubicTo(8.902, 8.488, 9, 8.724, 9, 9) ..cubicTo(9, 9.276, 8.902, 9.512, 8.707, 9.707) ..cubicTo(8.512, 9.902, 8.276, 10, 8, 10) ..cubicTo(7.724, 10, 7.488, 9.902, 7.293, 9.707) ..cubicTo(7.098, 9.512, 7, 9.276, 7, 9) ..cubicTo(7, 8.724, 7.098, 8.488, 7.293, 8.293) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_HotspotIconPainter old) => old.color != color; } ```