# bike-dock icon Bike dock. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/bike-dock - Category: Transportation - Use it for: bike station, bike share dock, bike parking - Tags: bike station, bike share, docking station, bike parking, bicycle, bike rack, dock, rental - Family: bike, bike-bolt, bike-off - Component name: BikeDockIcon - Added: 2026-11-12 ## Files Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. - line-round: https://gentleface.com/svg/line-round/16/bike-dock.svg · PNG https://gentleface.com/png/line-round/16/bike-dock.png · https://gentleface.com/png/line-round/32/bike-dock.png · https://gentleface.com/png/line-round/48/bike-dock.png - line-soft: https://gentleface.com/svg/line-soft/16/bike-dock.svg · PNG https://gentleface.com/png/line-soft/16/bike-dock.png · https://gentleface.com/png/line-soft/32/bike-dock.png · https://gentleface.com/png/line-soft/48/bike-dock.png - line-sharp: https://gentleface.com/svg/line-sharp/16/bike-dock.svg · PNG https://gentleface.com/png/line-sharp/16/bike-dock.png · https://gentleface.com/png/line-sharp/32/bike-dock.png · https://gentleface.com/png/line-sharp/48/bike-dock.png - solid-round: https://gentleface.com/svg/solid-round/16/bike-dock.svg · PNG https://gentleface.com/png/solid-round/16/bike-dock.png · https://gentleface.com/png/solid-round/32/bike-dock.png · https://gentleface.com/png/solid-round/48/bike-dock.png - solid-soft: https://gentleface.com/svg/solid-soft/16/bike-dock.svg · PNG https://gentleface.com/png/solid-soft/16/bike-dock.png · https://gentleface.com/png/solid-soft/32/bike-dock.png · https://gentleface.com/png/solid-soft/48/bike-dock.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/bike-dock.svg · PNG https://gentleface.com/png/solid-sharp/16/bike-dock.png · https://gentleface.com/png/solid-sharp/32/bike-dock.png · https://gentleface.com/png/solid-sharp/48/bike-dock.png The SVG of every style: https://gentleface.com/icons/bike-dock.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 "bike-dock" (line-round), MIT. https://gentleface.com/icons/bike-dock import type { SVGProps } from 'react'; export function BikeDockIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "bike-dock" (line-round), MIT. https://gentleface.com/icons/bike-dock. Takes the text color. */ .icon-bike-dock { 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.763 10.926C7.683 10.975 7.596 11 7.5 11L7 11C7 11.381 6.93 11.75 6.789 12.104C6.637 12.489 6.414 12.828 6.121 13.121C5.828 13.414 5.489 13.637 5.104 13.789C4.75 13.93 4.381 14 4 14C3.619 14 3.25 13.93 2.896 13.789C2.511 13.637 2.172 13.414 1.879 13.121C1.586 12.828 1.363 12.489 1.211 12.104C1.07 11.75 1 11.381 1 11C1 10.619 1.07 10.25 1.211 9.896C1.363 9.511 1.586 9.172 1.879 8.879C2.172 8.586 2.511 8.363 2.896 8.211C3.25 8.07 3.619 8 4 8C4.376 8 4.739 8.068 5.089 8.205L6 6.382L6 5L4.5 5C4.359 5 4.241 4.952 4.144 4.856C4.048 4.759 4 4.641 4 4.5C4 4.359 4.048 4.241 4.144 4.144C4.241 4.048 4.359 4 4.5 4L7.5 4C7.641 4 7.759 4.048 7.856 4.144C7.952 4.241 8 4.359 8 4.5C8 4.641 7.952 4.759 7.856 4.856C7.759 4.952 7.641 5 7.5 5L7 5L7 6L9 6L9 3.5C9 3.359 9.048 3.241 9.144 3.144C9.241 3.048 9.359 3 9.5 3L11.5 3C11.641 3 11.759 3.048 11.856 3.144C11.952 3.241 12 3.359 12 3.5C12 3.641 11.952 3.759 11.856 3.856C11.759 3.952 11.641 4 11.5 4L10 4L10 6.382L11.947 10.276C11.975 10.333 11.993 10.39 12 10.447L12 10.559C11.996 10.592 11.988 10.626 11.977 10.659C11.934 10.788 11.85 10.884 11.724 10.947C11.598 11.01 11.47 11.02 11.341 10.977C11.212 10.934 11.116 10.85 11.053 10.724L10.519 9.655C10.405 9.78 10.308 9.919 10.228 10.073C10.076 10.363 10 10.672 10 11C10 11.479 10.152 11.903 10.457 12.273C10.762 12.642 11.149 12.872 11.619 12.963C11.758 12.99 11.865 13.06 11.941 13.173C11.966 13.21 11.986 13.249 12 13.29L12 13.609C11.966 13.719 11.901 13.806 11.806 13.871C11.693 13.947 11.567 13.972 11.429 13.945C11.098 13.881 10.786 13.764 10.494 13.595C10.184 13.415 9.914 13.186 9.686 12.909C9.457 12.632 9.284 12.323 9.166 11.984C9.055 11.665 9 11.337 9 11C9 10.508 9.114 10.045 9.342 9.609C9.523 9.264 9.759 8.967 10.051 8.719L9.5 7.618L7.947 10.724C7.904 10.809 7.843 10.876 7.763 10.926ZM8.691 7L6.809 7L5.949 8.719C6.008 8.77 6.066 8.823 6.121 8.879C6.414 9.172 6.637 9.511 6.789 9.896C6.803 9.93 6.816 9.965 6.828 10L7.191 10L8.691 7ZM14 15C13.724 15 13.488 14.902 13.293 14.707C13.098 14.512 13 14.276 13 14L13 8C13 7.724 13.098 7.488 13.293 7.293C13.488 7.098 13.724 7 14 7C14.276 7 14.512 7.098 14.707 7.293C14.902 7.488 15 7.724 15 8L15 14C15 14.276 14.902 14.512 14.707 14.707C14.512 14.902 14.276 15 14 15ZM4.276 10.947C4.153 10.885 4.069 10.789 4.026 10.658C3.982 10.527 3.991 10.4 4.053 10.276L4.639 9.105C4.432 9.035 4.22 9 4 9C3.746 9 3.5 9.047 3.264 9.14C3.007 9.242 2.781 9.391 2.586 9.586C2.391 9.781 2.242 10.007 2.14 10.264C2.047 10.5 2 10.746 2 11C2 11.254 2.047 11.5 2.14 11.736C2.242 11.993 2.391 12.219 2.586 12.414C2.781 12.609 3.007 12.758 3.264 12.86C3.5 12.953 3.746 13 4 13C4.254 13 4.5 12.953 4.736 12.86C4.993 12.758 5.219 12.609 5.414 12.414C5.609 12.219 5.758 11.993 5.86 11.736C5.953 11.5 6 11.254 6 11L4.5 11C4.421 11 4.347 10.982 4.276 10.947Z'/%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.763 10.926C7.683 10.975 7.596 11 7.5 11L7 11C7 11.381 6.93 11.75 6.789 12.104C6.637 12.489 6.414 12.828 6.121 13.121C5.828 13.414 5.489 13.637 5.104 13.789C4.75 13.93 4.381 14 4 14C3.619 14 3.25 13.93 2.896 13.789C2.511 13.637 2.172 13.414 1.879 13.121C1.586 12.828 1.363 12.489 1.211 12.104C1.07 11.75 1 11.381 1 11C1 10.619 1.07 10.25 1.211 9.896C1.363 9.511 1.586 9.172 1.879 8.879C2.172 8.586 2.511 8.363 2.896 8.211C3.25 8.07 3.619 8 4 8C4.376 8 4.739 8.068 5.089 8.205L6 6.382L6 5L4.5 5C4.359 5 4.241 4.952 4.144 4.856C4.048 4.759 4 4.641 4 4.5C4 4.359 4.048 4.241 4.144 4.144C4.241 4.048 4.359 4 4.5 4L7.5 4C7.641 4 7.759 4.048 7.856 4.144C7.952 4.241 8 4.359 8 4.5C8 4.641 7.952 4.759 7.856 4.856C7.759 4.952 7.641 5 7.5 5L7 5L7 6L9 6L9 3.5C9 3.359 9.048 3.241 9.144 3.144C9.241 3.048 9.359 3 9.5 3L11.5 3C11.641 3 11.759 3.048 11.856 3.144C11.952 3.241 12 3.359 12 3.5C12 3.641 11.952 3.759 11.856 3.856C11.759 3.952 11.641 4 11.5 4L10 4L10 6.382L11.947 10.276C11.975 10.333 11.993 10.39 12 10.447L12 10.559C11.996 10.592 11.988 10.626 11.977 10.659C11.934 10.788 11.85 10.884 11.724 10.947C11.598 11.01 11.47 11.02 11.341 10.977C11.212 10.934 11.116 10.85 11.053 10.724L10.519 9.655C10.405 9.78 10.308 9.919 10.228 10.073C10.076 10.363 10 10.672 10 11C10 11.479 10.152 11.903 10.457 12.273C10.762 12.642 11.149 12.872 11.619 12.963C11.758 12.99 11.865 13.06 11.941 13.173C11.966 13.21 11.986 13.249 12 13.29L12 13.609C11.966 13.719 11.901 13.806 11.806 13.871C11.693 13.947 11.567 13.972 11.429 13.945C11.098 13.881 10.786 13.764 10.494 13.595C10.184 13.415 9.914 13.186 9.686 12.909C9.457 12.632 9.284 12.323 9.166 11.984C9.055 11.665 9 11.337 9 11C9 10.508 9.114 10.045 9.342 9.609C9.523 9.264 9.759 8.967 10.051 8.719L9.5 7.618L7.947 10.724C7.904 10.809 7.843 10.876 7.763 10.926ZM8.691 7L6.809 7L5.949 8.719C6.008 8.77 6.066 8.823 6.121 8.879C6.414 9.172 6.637 9.511 6.789 9.896C6.803 9.93 6.816 9.965 6.828 10L7.191 10L8.691 7ZM14 15C13.724 15 13.488 14.902 13.293 14.707C13.098 14.512 13 14.276 13 14L13 8C13 7.724 13.098 7.488 13.293 7.293C13.488 7.098 13.724 7 14 7C14.276 7 14.512 7.098 14.707 7.293C14.902 7.488 15 7.724 15 8L15 14C15 14.276 14.902 14.512 14.707 14.707C14.512 14.902 14.276 15 14 15ZM4.276 10.947C4.153 10.885 4.069 10.789 4.026 10.658C3.982 10.527 3.991 10.4 4.053 10.276L4.639 9.105C4.432 9.035 4.22 9 4 9C3.746 9 3.5 9.047 3.264 9.14C3.007 9.242 2.781 9.391 2.586 9.586C2.391 9.781 2.242 10.007 2.14 10.264C2.047 10.5 2 10.746 2 11C2 11.254 2.047 11.5 2.14 11.736C2.242 11.993 2.391 12.219 2.586 12.414C2.781 12.609 3.007 12.758 3.264 12.86C3.5 12.953 3.746 13 4 13C4.254 13 4.5 12.953 4.736 12.86C4.993 12.758 5.219 12.609 5.414 12.414C5.609 12.219 5.758 11.993 5.86 11.736C5.953 11.5 6 11.254 6 11L4.5 11C4.421 11 4.347 10.982 4.276 10.947Z'/%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.763 10.926C7.683 10.975 7.596 11 7.5 11L7 11C7 11.381 6.93 11.75 6.789 12.104C6.637 12.489 6.414 12.828 6.121 13.121C5.828 13.414 5.489 13.637 5.104 13.789C4.75 13.93 4.381 14 4 14C3.619 14 3.25 13.93 2.896 13.789C2.511 13.637 2.172 13.414 1.879 13.121C1.586 12.828 1.363 12.489 1.211 12.104C1.07 11.75 1 11.381 1 11C1 10.619 1.07 10.25 1.211 9.896C1.363 9.511 1.586 9.172 1.879 8.879C2.172 8.586 2.511 8.363 2.896 8.211C3.25 8.07 3.619 8 4 8C4.376 8 4.739 8.068 5.089 8.205L6 6.382L6 5L4.5 5C4.359 5 4.241 4.952 4.144 4.856C4.048 4.759 4 4.641 4 4.5C4 4.359 4.048 4.241 4.144 4.144C4.241 4.048 4.359 4 4.5 4L7.5 4C7.641 4 7.759 4.048 7.856 4.144C7.952 4.241 8 4.359 8 4.5C8 4.641 7.952 4.759 7.856 4.856C7.759 4.952 7.641 5 7.5 5L7 5L7 6L9 6L9 3.5C9 3.359 9.048 3.241 9.144 3.144C9.241 3.048 9.359 3 9.5 3L11.5 3C11.641 3 11.759 3.048 11.856 3.144C11.952 3.241 12 3.359 12 3.5C12 3.641 11.952 3.759 11.856 3.856C11.759 3.952 11.641 4 11.5 4L10 4L10 6.382L11.947 10.276C11.975 10.333 11.993 10.39 12 10.447L12 10.559C11.996 10.592 11.988 10.626 11.977 10.659C11.934 10.788 11.85 10.884 11.724 10.947C11.598 11.01 11.47 11.02 11.341 10.977C11.212 10.934 11.116 10.85 11.053 10.724L10.519 9.655C10.405 9.78 10.308 9.919 10.228 10.073C10.076 10.363 10 10.672 10 11C10 11.479 10.152 11.903 10.457 12.273C10.762 12.642 11.149 12.872 11.619 12.963C11.758 12.99 11.865 13.06 11.941 13.173C11.966 13.21 11.986 13.249 12 13.29L12 13.609C11.966 13.719 11.901 13.806 11.806 13.871C11.693 13.947 11.567 13.972 11.429 13.945C11.098 13.881 10.786 13.764 10.494 13.595C10.184 13.415 9.914 13.186 9.686 12.909C9.457 12.632 9.284 12.323 9.166 11.984C9.055 11.665 9 11.337 9 11C9 10.508 9.114 10.045 9.342 9.609C9.523 9.264 9.759 8.967 10.051 8.719L9.5 7.618L7.947 10.724C7.904 10.809 7.843 10.876 7.763 10.926ZM8.691 7L6.809 7L5.949 8.719C6.008 8.77 6.066 8.823 6.121 8.879C6.414 9.172 6.637 9.511 6.789 9.896C6.803 9.93 6.816 9.965 6.828 10L7.191 10L8.691 7ZM14 15C13.724 15 13.488 14.902 13.293 14.707C13.098 14.512 13 14.276 13 14L13 8C13 7.724 13.098 7.488 13.293 7.293C13.488 7.098 13.724 7 14 7C14.276 7 14.512 7.098 14.707 7.293C14.902 7.488 15 7.724 15 8L15 14C15 14.276 14.902 14.512 14.707 14.707C14.512 14.902 14.276 15 14 15ZM4.276 10.947C4.153 10.885 4.069 10.789 4.026 10.658C3.982 10.527 3.991 10.4 4.053 10.276L4.639 9.105C4.432 9.035 4.22 9 4 9C3.746 9 3.5 9.047 3.264 9.14C3.007 9.242 2.781 9.391 2.586 9.586C2.391 9.781 2.242 10.007 2.14 10.264C2.047 10.5 2 10.746 2 11C2 11.254 2.047 11.5 2.14 11.736C2.242 11.993 2.391 12.219 2.586 12.414C2.781 12.609 3.007 12.758 3.264 12.86C3.5 12.953 3.746 13 4 13C4.254 13 4.5 12.953 4.736 12.86C4.993 12.758 5.219 12.609 5.414 12.414C5.609 12.219 5.758 11.993 5.86 11.736C5.953 11.5 6 11.254 6 11L4.5 11C4.421 11 4.347 10.982 4.276 10.947Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "bike-dock" (line-round), MIT. https://gentleface.com/icons/bike-dock import SwiftUI struct BikeDockIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 7.763, y: 10.926)) p.addCurve(to: CGPoint(x: 7.5, y: 11), control1: CGPoint(x: 7.683, y: 10.975), control2: CGPoint(x: 7.596, y: 11)) p.addLine(to: CGPoint(x: 7, y: 11)) p.addCurve(to: CGPoint(x: 6.789, y: 12.104), control1: CGPoint(x: 7, y: 11.381), control2: CGPoint(x: 6.93, y: 11.75)) p.addCurve(to: CGPoint(x: 6.121, y: 13.121), control1: CGPoint(x: 6.637, y: 12.489), control2: CGPoint(x: 6.414, y: 12.828)) p.addCurve(to: CGPoint(x: 5.104, y: 13.789), control1: CGPoint(x: 5.828, y: 13.414), control2: CGPoint(x: 5.489, y: 13.637)) p.addCurve(to: CGPoint(x: 4, y: 14), control1: CGPoint(x: 4.75, y: 13.93), control2: CGPoint(x: 4.381, y: 14)) p.addCurve(to: CGPoint(x: 2.896, y: 13.789), control1: CGPoint(x: 3.619, y: 14), control2: CGPoint(x: 3.25, y: 13.93)) p.addCurve(to: CGPoint(x: 1.879, y: 13.121), control1: CGPoint(x: 2.511, y: 13.637), control2: CGPoint(x: 2.172, y: 13.414)) p.addCurve(to: CGPoint(x: 1.211, y: 12.104), control1: CGPoint(x: 1.586, y: 12.828), control2: CGPoint(x: 1.363, y: 12.489)) p.addCurve(to: CGPoint(x: 1, y: 11), control1: CGPoint(x: 1.07, y: 11.75), control2: CGPoint(x: 1, y: 11.381)) p.addCurve(to: CGPoint(x: 1.211, y: 9.896), control1: CGPoint(x: 1, y: 10.619), control2: CGPoint(x: 1.07, y: 10.25)) p.addCurve(to: CGPoint(x: 1.879, y: 8.879), control1: CGPoint(x: 1.363, y: 9.511), control2: CGPoint(x: 1.586, y: 9.172)) p.addCurve(to: CGPoint(x: 2.896, y: 8.211), control1: CGPoint(x: 2.172, y: 8.586), control2: CGPoint(x: 2.511, y: 8.363)) p.addCurve(to: CGPoint(x: 4, y: 8), control1: CGPoint(x: 3.25, y: 8.07), control2: CGPoint(x: 3.619, y: 8)) p.addCurve(to: CGPoint(x: 5.089, y: 8.205), control1: CGPoint(x: 4.376, y: 8), control2: CGPoint(x: 4.739, y: 8.068)) p.addLine(to: CGPoint(x: 6, y: 6.382)) p.addLine(to: CGPoint(x: 6, y: 5)) p.addLine(to: CGPoint(x: 4.5, y: 5)) p.addCurve(to: CGPoint(x: 4.144, y: 4.856), control1: CGPoint(x: 4.359, y: 5), control2: CGPoint(x: 4.241, y: 4.952)) p.addCurve(to: CGPoint(x: 4, y: 4.5), control1: CGPoint(x: 4.048, y: 4.759), control2: CGPoint(x: 4, y: 4.641)) p.addCurve(to: CGPoint(x: 4.144, y: 4.144), control1: CGPoint(x: 4, y: 4.359), control2: CGPoint(x: 4.048, y: 4.241)) p.addCurve(to: CGPoint(x: 4.5, y: 4), control1: CGPoint(x: 4.241, y: 4.048), control2: CGPoint(x: 4.359, y: 4)) p.addLine(to: CGPoint(x: 7.5, y: 4)) p.addCurve(to: CGPoint(x: 7.856, y: 4.144), control1: CGPoint(x: 7.641, y: 4), control2: CGPoint(x: 7.759, y: 4.048)) p.addCurve(to: CGPoint(x: 8, y: 4.5), control1: CGPoint(x: 7.952, y: 4.241), control2: CGPoint(x: 8, y: 4.359)) p.addCurve(to: CGPoint(x: 7.856, y: 4.856), control1: CGPoint(x: 8, y: 4.641), control2: CGPoint(x: 7.952, y: 4.759)) p.addCurve(to: CGPoint(x: 7.5, y: 5), control1: CGPoint(x: 7.759, y: 4.952), control2: CGPoint(x: 7.641, y: 5)) p.addLine(to: CGPoint(x: 7, y: 5)) p.addLine(to: CGPoint(x: 7, y: 6)) p.addLine(to: CGPoint(x: 9, y: 6)) p.addLine(to: CGPoint(x: 9, y: 3.5)) p.addCurve(to: CGPoint(x: 9.144, y: 3.144), control1: CGPoint(x: 9, y: 3.359), control2: CGPoint(x: 9.048, y: 3.241)) p.addCurve(to: CGPoint(x: 9.5, y: 3), control1: CGPoint(x: 9.241, y: 3.048), control2: CGPoint(x: 9.359, y: 3)) p.addLine(to: CGPoint(x: 11.5, y: 3)) p.addCurve(to: CGPoint(x: 11.856, y: 3.144), control1: CGPoint(x: 11.641, y: 3), control2: CGPoint(x: 11.759, y: 3.048)) p.addCurve(to: CGPoint(x: 12, y: 3.5), control1: CGPoint(x: 11.952, y: 3.241), control2: CGPoint(x: 12, y: 3.359)) p.addCurve(to: CGPoint(x: 11.856, y: 3.856), control1: CGPoint(x: 12, y: 3.641), control2: CGPoint(x: 11.952, y: 3.759)) p.addCurve(to: CGPoint(x: 11.5, y: 4), control1: CGPoint(x: 11.759, y: 3.952), control2: CGPoint(x: 11.641, y: 4)) p.addLine(to: CGPoint(x: 10, y: 4)) p.addLine(to: CGPoint(x: 10, y: 6.382)) p.addLine(to: CGPoint(x: 11.947, y: 10.276)) p.addCurve(to: CGPoint(x: 12, y: 10.447), control1: CGPoint(x: 11.975, y: 10.333), control2: CGPoint(x: 11.993, y: 10.39)) p.addLine(to: CGPoint(x: 12, y: 10.559)) p.addCurve(to: CGPoint(x: 11.977, y: 10.659), control1: CGPoint(x: 11.996, y: 10.592), control2: CGPoint(x: 11.988, y: 10.626)) p.addCurve(to: CGPoint(x: 11.724, y: 10.947), control1: CGPoint(x: 11.934, y: 10.788), control2: CGPoint(x: 11.85, y: 10.884)) p.addCurve(to: CGPoint(x: 11.341, y: 10.977), control1: CGPoint(x: 11.598, y: 11.01), control2: CGPoint(x: 11.47, y: 11.02)) p.addCurve(to: CGPoint(x: 11.053, y: 10.724), control1: CGPoint(x: 11.212, y: 10.934), control2: CGPoint(x: 11.116, y: 10.85)) p.addLine(to: CGPoint(x: 10.519, y: 9.655)) p.addCurve(to: CGPoint(x: 10.228, y: 10.073), control1: CGPoint(x: 10.405, y: 9.78), control2: CGPoint(x: 10.308, y: 9.919)) p.addCurve(to: CGPoint(x: 10, y: 11), control1: CGPoint(x: 10.076, y: 10.363), control2: CGPoint(x: 10, y: 10.672)) p.addCurve(to: CGPoint(x: 10.457, y: 12.273), control1: CGPoint(x: 10, y: 11.479), control2: CGPoint(x: 10.152, y: 11.903)) p.addCurve(to: CGPoint(x: 11.619, y: 12.963), control1: CGPoint(x: 10.762, y: 12.642), control2: CGPoint(x: 11.149, y: 12.872)) p.addCurve(to: CGPoint(x: 11.941, y: 13.173), control1: CGPoint(x: 11.758, y: 12.99), control2: CGPoint(x: 11.865, y: 13.06)) p.addCurve(to: CGPoint(x: 12, y: 13.29), control1: CGPoint(x: 11.966, y: 13.21), control2: CGPoint(x: 11.986, y: 13.249)) p.addLine(to: CGPoint(x: 12, y: 13.609)) p.addCurve(to: CGPoint(x: 11.806, y: 13.871), control1: CGPoint(x: 11.966, y: 13.719), control2: CGPoint(x: 11.901, y: 13.806)) p.addCurve(to: CGPoint(x: 11.429, y: 13.945), control1: CGPoint(x: 11.693, y: 13.947), control2: CGPoint(x: 11.567, y: 13.972)) p.addCurve(to: CGPoint(x: 10.494, y: 13.595), control1: CGPoint(x: 11.098, y: 13.881), control2: CGPoint(x: 10.786, y: 13.764)) p.addCurve(to: CGPoint(x: 9.686, y: 12.909), control1: CGPoint(x: 10.184, y: 13.415), control2: CGPoint(x: 9.914, y: 13.186)) p.addCurve(to: CGPoint(x: 9.166, y: 11.984), control1: CGPoint(x: 9.457, y: 12.632), control2: CGPoint(x: 9.284, y: 12.323)) p.addCurve(to: CGPoint(x: 9, y: 11), control1: CGPoint(x: 9.055, y: 11.665), control2: CGPoint(x: 9, y: 11.337)) p.addCurve(to: CGPoint(x: 9.342, y: 9.609), control1: CGPoint(x: 9, y: 10.508), control2: CGPoint(x: 9.114, y: 10.045)) p.addCurve(to: CGPoint(x: 10.051, y: 8.719), control1: CGPoint(x: 9.523, y: 9.264), control2: CGPoint(x: 9.759, y: 8.967)) p.addLine(to: CGPoint(x: 9.5, y: 7.618)) p.addLine(to: CGPoint(x: 7.947, y: 10.724)) p.addCurve(to: CGPoint(x: 7.763, y: 10.926), control1: CGPoint(x: 7.904, y: 10.809), control2: CGPoint(x: 7.843, y: 10.876)) p.closeSubpath() p.move(to: CGPoint(x: 8.691, y: 7)) p.addLine(to: CGPoint(x: 6.809, y: 7)) p.addLine(to: CGPoint(x: 5.949, y: 8.719)) p.addCurve(to: CGPoint(x: 6.121, y: 8.879), control1: CGPoint(x: 6.008, y: 8.77), control2: CGPoint(x: 6.066, y: 8.823)) p.addCurve(to: CGPoint(x: 6.789, y: 9.896), control1: CGPoint(x: 6.414, y: 9.172), control2: CGPoint(x: 6.637, y: 9.511)) p.addCurve(to: CGPoint(x: 6.828, y: 10), control1: CGPoint(x: 6.803, y: 9.93), control2: CGPoint(x: 6.816, y: 9.965)) p.addLine(to: CGPoint(x: 7.191, y: 10)) p.addLine(to: CGPoint(x: 8.691, y: 7)) p.closeSubpath() p.move(to: CGPoint(x: 14, y: 15)) p.addCurve(to: CGPoint(x: 13.293, y: 14.707), control1: CGPoint(x: 13.724, y: 15), control2: CGPoint(x: 13.488, y: 14.902)) p.addCurve(to: CGPoint(x: 13, y: 14), control1: CGPoint(x: 13.098, y: 14.512), control2: CGPoint(x: 13, y: 14.276)) p.addLine(to: CGPoint(x: 13, y: 8)) p.addCurve(to: CGPoint(x: 13.293, y: 7.293), control1: CGPoint(x: 13, y: 7.724), control2: CGPoint(x: 13.098, y: 7.488)) p.addCurve(to: CGPoint(x: 14, y: 7), control1: CGPoint(x: 13.488, y: 7.098), control2: CGPoint(x: 13.724, y: 7)) p.addCurve(to: CGPoint(x: 14.707, y: 7.293), control1: CGPoint(x: 14.276, y: 7), control2: CGPoint(x: 14.512, y: 7.098)) p.addCurve(to: CGPoint(x: 15, y: 8), control1: CGPoint(x: 14.902, y: 7.488), control2: CGPoint(x: 15, y: 7.724)) p.addLine(to: CGPoint(x: 15, y: 14)) p.addCurve(to: CGPoint(x: 14.707, y: 14.707), control1: CGPoint(x: 15, y: 14.276), control2: CGPoint(x: 14.902, y: 14.512)) p.addCurve(to: CGPoint(x: 14, y: 15), control1: CGPoint(x: 14.512, y: 14.902), control2: CGPoint(x: 14.276, y: 15)) p.closeSubpath() p.move(to: CGPoint(x: 4.276, y: 10.947)) p.addCurve(to: CGPoint(x: 4.026, y: 10.658), control1: CGPoint(x: 4.153, y: 10.885), control2: CGPoint(x: 4.069, y: 10.789)) p.addCurve(to: CGPoint(x: 4.053, y: 10.276), control1: CGPoint(x: 3.982, y: 10.527), control2: CGPoint(x: 3.991, y: 10.4)) p.addLine(to: CGPoint(x: 4.639, y: 9.105)) p.addCurve(to: CGPoint(x: 4, y: 9), control1: CGPoint(x: 4.432, y: 9.035), control2: CGPoint(x: 4.22, y: 9)) p.addCurve(to: CGPoint(x: 3.264, y: 9.14), control1: CGPoint(x: 3.746, y: 9), control2: CGPoint(x: 3.5, y: 9.047)) p.addCurve(to: CGPoint(x: 2.586, y: 9.586), control1: CGPoint(x: 3.007, y: 9.242), control2: CGPoint(x: 2.781, y: 9.391)) p.addCurve(to: CGPoint(x: 2.14, y: 10.264), control1: CGPoint(x: 2.391, y: 9.781), control2: CGPoint(x: 2.242, y: 10.007)) p.addCurve(to: CGPoint(x: 2, y: 11), control1: CGPoint(x: 2.047, y: 10.5), control2: CGPoint(x: 2, y: 10.746)) p.addCurve(to: CGPoint(x: 2.14, y: 11.736), control1: CGPoint(x: 2, y: 11.254), control2: CGPoint(x: 2.047, y: 11.5)) p.addCurve(to: CGPoint(x: 2.586, y: 12.414), control1: CGPoint(x: 2.242, y: 11.993), control2: CGPoint(x: 2.391, y: 12.219)) p.addCurve(to: CGPoint(x: 3.264, y: 12.86), control1: CGPoint(x: 2.781, y: 12.609), control2: CGPoint(x: 3.007, y: 12.758)) p.addCurve(to: CGPoint(x: 4, y: 13), control1: CGPoint(x: 3.5, y: 12.953), control2: CGPoint(x: 3.746, y: 13)) p.addCurve(to: CGPoint(x: 4.736, y: 12.86), control1: CGPoint(x: 4.254, y: 13), control2: CGPoint(x: 4.5, y: 12.953)) p.addCurve(to: CGPoint(x: 5.414, y: 12.414), control1: CGPoint(x: 4.993, y: 12.758), control2: CGPoint(x: 5.219, y: 12.609)) p.addCurve(to: CGPoint(x: 5.86, y: 11.736), control1: CGPoint(x: 5.609, y: 12.219), control2: CGPoint(x: 5.758, y: 11.993)) p.addCurve(to: CGPoint(x: 6, y: 11), control1: CGPoint(x: 5.953, y: 11.5), control2: CGPoint(x: 6, y: 11.254)) p.addLine(to: CGPoint(x: 4.5, y: 11)) p.addCurve(to: CGPoint(x: 4.276, y: 10.947), control1: CGPoint(x: 4.421, y: 11), control2: CGPoint(x: 4.347, y: 10.982)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // BikeDockIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "bike-dock" (line-round), MIT. https://gentleface.com/icons/bike-dock 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 BikeDockIcon: ImageVector by lazy { ImageVector.Builder( name = "bike-dock", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M7.763 10.926C7.683 10.975 7.596 11 7.5 11L7 11C7 11.381 6.93 11.75 6.789 12.104C6.637 12.489 6.414 12.828 6.121 13.121C5.828 13.414 5.489 13.637 5.104 13.789C4.75 13.93 4.381 14 4 14C3.619 14 3.25 13.93 2.896 13.789C2.511 13.637 2.172 13.414 1.879 13.121C1.586 12.828 1.363 12.489 1.211 12.104C1.07 11.75 1 11.381 1 11C1 10.619 1.07 10.25 1.211 9.896C1.363 9.511 1.586 9.172 1.879 8.879C2.172 8.586 2.511 8.363 2.896 8.211C3.25 8.07 3.619 8 4 8C4.376 8 4.739 8.068 5.089 8.205L6 6.382L6 5L4.5 5C4.359 5 4.241 4.952 4.144 4.856C4.048 4.759 4 4.641 4 4.5C4 4.359 4.048 4.241 4.144 4.144C4.241 4.048 4.359 4 4.5 4L7.5 4C7.641 4 7.759 4.048 7.856 4.144C7.952 4.241 8 4.359 8 4.5C8 4.641 7.952 4.759 7.856 4.856C7.759 4.952 7.641 5 7.5 5L7 5L7 6L9 6L9 3.5C9 3.359 9.048 3.241 9.144 3.144C9.241 3.048 9.359 3 9.5 3L11.5 3C11.641 3 11.759 3.048 11.856 3.144C11.952 3.241 12 3.359 12 3.5C12 3.641 11.952 3.759 11.856 3.856C11.759 3.952 11.641 4 11.5 4L10 4L10 6.382L11.947 10.276C11.975 10.333 11.993 10.39 12 10.447L12 10.559C11.996 10.592 11.988 10.626 11.977 10.659C11.934 10.788 11.85 10.884 11.724 10.947C11.598 11.01 11.47 11.02 11.341 10.977C11.212 10.934 11.116 10.85 11.053 10.724L10.519 9.655C10.405 9.78 10.308 9.919 10.228 10.073C10.076 10.363 10 10.672 10 11C10 11.479 10.152 11.903 10.457 12.273C10.762 12.642 11.149 12.872 11.619 12.963C11.758 12.99 11.865 13.06 11.941 13.173C11.966 13.21 11.986 13.249 12 13.29L12 13.609C11.966 13.719 11.901 13.806 11.806 13.871C11.693 13.947 11.567 13.972 11.429 13.945C11.098 13.881 10.786 13.764 10.494 13.595C10.184 13.415 9.914 13.186 9.686 12.909C9.457 12.632 9.284 12.323 9.166 11.984C9.055 11.665 9 11.337 9 11C9 10.508 9.114 10.045 9.342 9.609C9.523 9.264 9.759 8.967 10.051 8.719L9.5 7.618L7.947 10.724C7.904 10.809 7.843 10.876 7.763 10.926ZM8.691 7L6.809 7L5.949 8.719C6.008 8.77 6.066 8.823 6.121 8.879C6.414 9.172 6.637 9.511 6.789 9.896C6.803 9.93 6.816 9.965 6.828 10L7.191 10L8.691 7ZM14 15C13.724 15 13.488 14.902 13.293 14.707C13.098 14.512 13 14.276 13 14L13 8C13 7.724 13.098 7.488 13.293 7.293C13.488 7.098 13.724 7 14 7C14.276 7 14.512 7.098 14.707 7.293C14.902 7.488 15 7.724 15 8L15 14C15 14.276 14.902 14.512 14.707 14.707C14.512 14.902 14.276 15 14 15ZM4.276 10.947C4.153 10.885 4.069 10.789 4.026 10.658C3.982 10.527 3.991 10.4 4.053 10.276L4.639 9.105C4.432 9.035 4.22 9 4 9C3.746 9 3.5 9.047 3.264 9.14C3.007 9.242 2.781 9.391 2.586 9.586C2.391 9.781 2.242 10.007 2.14 10.264C2.047 10.5 2 10.746 2 11C2 11.254 2.047 11.5 2.14 11.736C2.242 11.993 2.391 12.219 2.586 12.414C2.781 12.609 3.007 12.758 3.264 12.86C3.5 12.953 3.746 13 4 13C4.254 13 4.5 12.953 4.736 12.86C4.993 12.758 5.219 12.609 5.414 12.414C5.609 12.219 5.758 11.993 5.86 11.736C5.953 11.5 6 11.254 6 11L4.5 11C4.421 11 4.347 10.982 4.276 10.947Z"), fill = SolidColor(Color.Black), ).build() } // Icon(BikeDockIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "bike-dock" (line-round), MIT. https://gentleface.com/icons/bike-dock import 'package:flutter/widgets.dart'; class BikeDockIcon extends StatelessWidget { const BikeDockIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _BikeDockIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _BikeDockIconPainter extends CustomPainter { _BikeDockIconPainter(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.763, 10.926) ..cubicTo(7.683, 10.975, 7.596, 11, 7.5, 11) ..lineTo(7, 11) ..cubicTo(7, 11.381, 6.93, 11.75, 6.789, 12.104) ..cubicTo(6.637, 12.489, 6.414, 12.828, 6.121, 13.121) ..cubicTo(5.828, 13.414, 5.489, 13.637, 5.104, 13.789) ..cubicTo(4.75, 13.93, 4.381, 14, 4, 14) ..cubicTo(3.619, 14, 3.25, 13.93, 2.896, 13.789) ..cubicTo(2.511, 13.637, 2.172, 13.414, 1.879, 13.121) ..cubicTo(1.586, 12.828, 1.363, 12.489, 1.211, 12.104) ..cubicTo(1.07, 11.75, 1, 11.381, 1, 11) ..cubicTo(1, 10.619, 1.07, 10.25, 1.211, 9.896) ..cubicTo(1.363, 9.511, 1.586, 9.172, 1.879, 8.879) ..cubicTo(2.172, 8.586, 2.511, 8.363, 2.896, 8.211) ..cubicTo(3.25, 8.07, 3.619, 8, 4, 8) ..cubicTo(4.376, 8, 4.739, 8.068, 5.089, 8.205) ..lineTo(6, 6.382) ..lineTo(6, 5) ..lineTo(4.5, 5) ..cubicTo(4.359, 5, 4.241, 4.952, 4.144, 4.856) ..cubicTo(4.048, 4.759, 4, 4.641, 4, 4.5) ..cubicTo(4, 4.359, 4.048, 4.241, 4.144, 4.144) ..cubicTo(4.241, 4.048, 4.359, 4, 4.5, 4) ..lineTo(7.5, 4) ..cubicTo(7.641, 4, 7.759, 4.048, 7.856, 4.144) ..cubicTo(7.952, 4.241, 8, 4.359, 8, 4.5) ..cubicTo(8, 4.641, 7.952, 4.759, 7.856, 4.856) ..cubicTo(7.759, 4.952, 7.641, 5, 7.5, 5) ..lineTo(7, 5) ..lineTo(7, 6) ..lineTo(9, 6) ..lineTo(9, 3.5) ..cubicTo(9, 3.359, 9.048, 3.241, 9.144, 3.144) ..cubicTo(9.241, 3.048, 9.359, 3, 9.5, 3) ..lineTo(11.5, 3) ..cubicTo(11.641, 3, 11.759, 3.048, 11.856, 3.144) ..cubicTo(11.952, 3.241, 12, 3.359, 12, 3.5) ..cubicTo(12, 3.641, 11.952, 3.759, 11.856, 3.856) ..cubicTo(11.759, 3.952, 11.641, 4, 11.5, 4) ..lineTo(10, 4) ..lineTo(10, 6.382) ..lineTo(11.947, 10.276) ..cubicTo(11.975, 10.333, 11.993, 10.39, 12, 10.447) ..lineTo(12, 10.559) ..cubicTo(11.996, 10.592, 11.988, 10.626, 11.977, 10.659) ..cubicTo(11.934, 10.788, 11.85, 10.884, 11.724, 10.947) ..cubicTo(11.598, 11.01, 11.47, 11.02, 11.341, 10.977) ..cubicTo(11.212, 10.934, 11.116, 10.85, 11.053, 10.724) ..lineTo(10.519, 9.655) ..cubicTo(10.405, 9.78, 10.308, 9.919, 10.228, 10.073) ..cubicTo(10.076, 10.363, 10, 10.672, 10, 11) ..cubicTo(10, 11.479, 10.152, 11.903, 10.457, 12.273) ..cubicTo(10.762, 12.642, 11.149, 12.872, 11.619, 12.963) ..cubicTo(11.758, 12.99, 11.865, 13.06, 11.941, 13.173) ..cubicTo(11.966, 13.21, 11.986, 13.249, 12, 13.29) ..lineTo(12, 13.609) ..cubicTo(11.966, 13.719, 11.901, 13.806, 11.806, 13.871) ..cubicTo(11.693, 13.947, 11.567, 13.972, 11.429, 13.945) ..cubicTo(11.098, 13.881, 10.786, 13.764, 10.494, 13.595) ..cubicTo(10.184, 13.415, 9.914, 13.186, 9.686, 12.909) ..cubicTo(9.457, 12.632, 9.284, 12.323, 9.166, 11.984) ..cubicTo(9.055, 11.665, 9, 11.337, 9, 11) ..cubicTo(9, 10.508, 9.114, 10.045, 9.342, 9.609) ..cubicTo(9.523, 9.264, 9.759, 8.967, 10.051, 8.719) ..lineTo(9.5, 7.618) ..lineTo(7.947, 10.724) ..cubicTo(7.904, 10.809, 7.843, 10.876, 7.763, 10.926) ..close() ..moveTo(8.691, 7) ..lineTo(6.809, 7) ..lineTo(5.949, 8.719) ..cubicTo(6.008, 8.77, 6.066, 8.823, 6.121, 8.879) ..cubicTo(6.414, 9.172, 6.637, 9.511, 6.789, 9.896) ..cubicTo(6.803, 9.93, 6.816, 9.965, 6.828, 10) ..lineTo(7.191, 10) ..lineTo(8.691, 7) ..close() ..moveTo(14, 15) ..cubicTo(13.724, 15, 13.488, 14.902, 13.293, 14.707) ..cubicTo(13.098, 14.512, 13, 14.276, 13, 14) ..lineTo(13, 8) ..cubicTo(13, 7.724, 13.098, 7.488, 13.293, 7.293) ..cubicTo(13.488, 7.098, 13.724, 7, 14, 7) ..cubicTo(14.276, 7, 14.512, 7.098, 14.707, 7.293) ..cubicTo(14.902, 7.488, 15, 7.724, 15, 8) ..lineTo(15, 14) ..cubicTo(15, 14.276, 14.902, 14.512, 14.707, 14.707) ..cubicTo(14.512, 14.902, 14.276, 15, 14, 15) ..close() ..moveTo(4.276, 10.947) ..cubicTo(4.153, 10.885, 4.069, 10.789, 4.026, 10.658) ..cubicTo(3.982, 10.527, 3.991, 10.4, 4.053, 10.276) ..lineTo(4.639, 9.105) ..cubicTo(4.432, 9.035, 4.22, 9, 4, 9) ..cubicTo(3.746, 9, 3.5, 9.047, 3.264, 9.14) ..cubicTo(3.007, 9.242, 2.781, 9.391, 2.586, 9.586) ..cubicTo(2.391, 9.781, 2.242, 10.007, 2.14, 10.264) ..cubicTo(2.047, 10.5, 2, 10.746, 2, 11) ..cubicTo(2, 11.254, 2.047, 11.5, 2.14, 11.736) ..cubicTo(2.242, 11.993, 2.391, 12.219, 2.586, 12.414) ..cubicTo(2.781, 12.609, 3.007, 12.758, 3.264, 12.86) ..cubicTo(3.5, 12.953, 3.746, 13, 4, 13) ..cubicTo(4.254, 13, 4.5, 12.953, 4.736, 12.86) ..cubicTo(4.993, 12.758, 5.219, 12.609, 5.414, 12.414) ..cubicTo(5.609, 12.219, 5.758, 11.993, 5.86, 11.736) ..cubicTo(5.953, 11.5, 6, 11.254, 6, 11) ..lineTo(4.5, 11) ..cubicTo(4.421, 11, 4.347, 10.982, 4.276, 10.947) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_BikeDockIconPainter old) => old.color != color; } ```