# flip-phone icon Flip phone. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/flip-phone - Category: Devices & hardware - Use it for: flip phone, clamshell phone, feature phone - Tags: phone, flip-phone, clamshell, feature-phone, mobile, cellphone, keypad, retro - Component name: FlipPhoneIcon - 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/flip-phone.svg · PNG https://gentleface.com/png/line-round/16/flip-phone.png · https://gentleface.com/png/line-round/32/flip-phone.png · https://gentleface.com/png/line-round/48/flip-phone.png - line-soft: https://gentleface.com/svg/line-soft/16/flip-phone.svg · PNG https://gentleface.com/png/line-soft/16/flip-phone.png · https://gentleface.com/png/line-soft/32/flip-phone.png · https://gentleface.com/png/line-soft/48/flip-phone.png - line-sharp: https://gentleface.com/svg/line-sharp/16/flip-phone.svg · PNG https://gentleface.com/png/line-sharp/16/flip-phone.png · https://gentleface.com/png/line-sharp/32/flip-phone.png · https://gentleface.com/png/line-sharp/48/flip-phone.png - solid-round: https://gentleface.com/svg/solid-round/16/flip-phone.svg · PNG https://gentleface.com/png/solid-round/16/flip-phone.png · https://gentleface.com/png/solid-round/32/flip-phone.png · https://gentleface.com/png/solid-round/48/flip-phone.png - solid-soft: https://gentleface.com/svg/solid-soft/16/flip-phone.svg · PNG https://gentleface.com/png/solid-soft/16/flip-phone.png · https://gentleface.com/png/solid-soft/32/flip-phone.png · https://gentleface.com/png/solid-soft/48/flip-phone.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/flip-phone.svg · PNG https://gentleface.com/png/solid-sharp/16/flip-phone.png · https://gentleface.com/png/solid-sharp/32/flip-phone.png · https://gentleface.com/png/solid-sharp/48/flip-phone.png The SVG of every style: https://gentleface.com/icons/flip-phone.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 "flip-phone" (line-round), MIT. https://gentleface.com/icons/flip-phone import type { SVGProps } from 'react'; export function FlipPhoneIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "flip-phone" (line-round), MIT. https://gentleface.com/icons/flip-phone. Takes the text color. */ .icon-flip-phone { 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='M4 1.5C4 1.359 4.048 1.241 4.144 1.144C4.241 1.048 4.359 1 4.5 1C4.641 1 4.759 1.048 4.856 1.144C4.952 1.241 5 1.359 5 1.5L5 3.05C5 3.132 4.977 3.213 4.935 3.284C4.956 3.277 4.978 3.271 5 3.268C5.084 3.219 5.172 3.177 5.264 3.14C5.5 3.047 5.746 3 6 3L10 3C10.254 3 10.5 3.047 10.736 3.14C10.993 3.242 11.219 3.391 11.414 3.586C11.609 3.781 11.758 4.007 11.86 4.264C11.953 4.5 12 4.746 12 5L12 11C12 11.509 11.906 11.999 11.719 12.472C11.516 12.986 11.219 13.438 10.828 13.828C10.438 14.219 9.986 14.516 9.472 14.719C8.999 14.906 8.509 15 8 15C7.491 15 7.001 14.906 6.528 14.719C6.014 14.516 5.562 14.219 5.172 13.828C4.781 13.438 4.484 12.986 4.281 12.472C4.094 11.999 4 11.509 4 11L4 5C4 4.746 4.047 4.5 4.14 4.264C4.242 4.007 4.391 3.781 4.586 3.586C4.615 3.556 4.646 3.528 4.677 3.5C4.681 3.492 4.685 3.485 4.69 3.478C4.645 3.493 4.597 3.5 4.55 3.5L4.45 3.5C4.201 3.5 4 3.299 4 3.05L4 1.5ZM5 11C5 11.381 5.07 11.75 5.211 12.104C5.363 12.489 5.586 12.828 5.879 13.121C6.172 13.414 6.511 13.637 6.896 13.789C7.25 13.93 7.619 14 8 14C8.381 14 8.75 13.93 9.104 13.789C9.489 13.637 9.828 13.414 10.121 13.121C10.414 12.828 10.637 12.489 10.789 12.104C10.93 11.75 11 11.381 11 11L11 5C11 4.724 10.902 4.488 10.707 4.293C10.512 4.098 10.276 4 10 4L6 4C5.724 4 5.488 4.098 5.293 4.293C5.098 4.488 5 4.724 5 5L5 11ZM6.144 5.144C6.241 5.048 6.359 5 6.5 5L9.5 5C9.641 5 9.759 5.048 9.856 5.144C9.952 5.241 10 5.359 10 5.5L10 7.5C10 7.641 9.952 7.759 9.856 7.856C9.759 7.952 9.641 8 9.5 8L6.5 8C6.359 8 6.241 7.952 6.144 7.856C6.048 7.759 6 7.641 6 7.5L6 5.5C6 5.359 6.048 5.241 6.144 5.144ZM9 7L9 6L7 6L7 7L9 7ZM8.5 11C8.641 11 8.759 11.048 8.856 11.144C8.952 11.241 9 11.359 9 11.5C9 11.641 8.952 11.759 8.856 11.856C8.759 11.952 8.641 12 8.5 12L7.5 12C7.359 12 7.241 11.952 7.144 11.856C7.048 11.759 7 11.641 7 11.5C7 11.359 7.048 11.241 7.144 11.144C7.241 11.048 7.359 11 7.5 11L8.5 11Z'/%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='M4 1.5C4 1.359 4.048 1.241 4.144 1.144C4.241 1.048 4.359 1 4.5 1C4.641 1 4.759 1.048 4.856 1.144C4.952 1.241 5 1.359 5 1.5L5 3.05C5 3.132 4.977 3.213 4.935 3.284C4.956 3.277 4.978 3.271 5 3.268C5.084 3.219 5.172 3.177 5.264 3.14C5.5 3.047 5.746 3 6 3L10 3C10.254 3 10.5 3.047 10.736 3.14C10.993 3.242 11.219 3.391 11.414 3.586C11.609 3.781 11.758 4.007 11.86 4.264C11.953 4.5 12 4.746 12 5L12 11C12 11.509 11.906 11.999 11.719 12.472C11.516 12.986 11.219 13.438 10.828 13.828C10.438 14.219 9.986 14.516 9.472 14.719C8.999 14.906 8.509 15 8 15C7.491 15 7.001 14.906 6.528 14.719C6.014 14.516 5.562 14.219 5.172 13.828C4.781 13.438 4.484 12.986 4.281 12.472C4.094 11.999 4 11.509 4 11L4 5C4 4.746 4.047 4.5 4.14 4.264C4.242 4.007 4.391 3.781 4.586 3.586C4.615 3.556 4.646 3.528 4.677 3.5C4.681 3.492 4.685 3.485 4.69 3.478C4.645 3.493 4.597 3.5 4.55 3.5L4.45 3.5C4.201 3.5 4 3.299 4 3.05L4 1.5ZM5 11C5 11.381 5.07 11.75 5.211 12.104C5.363 12.489 5.586 12.828 5.879 13.121C6.172 13.414 6.511 13.637 6.896 13.789C7.25 13.93 7.619 14 8 14C8.381 14 8.75 13.93 9.104 13.789C9.489 13.637 9.828 13.414 10.121 13.121C10.414 12.828 10.637 12.489 10.789 12.104C10.93 11.75 11 11.381 11 11L11 5C11 4.724 10.902 4.488 10.707 4.293C10.512 4.098 10.276 4 10 4L6 4C5.724 4 5.488 4.098 5.293 4.293C5.098 4.488 5 4.724 5 5L5 11ZM6.144 5.144C6.241 5.048 6.359 5 6.5 5L9.5 5C9.641 5 9.759 5.048 9.856 5.144C9.952 5.241 10 5.359 10 5.5L10 7.5C10 7.641 9.952 7.759 9.856 7.856C9.759 7.952 9.641 8 9.5 8L6.5 8C6.359 8 6.241 7.952 6.144 7.856C6.048 7.759 6 7.641 6 7.5L6 5.5C6 5.359 6.048 5.241 6.144 5.144ZM9 7L9 6L7 6L7 7L9 7ZM8.5 11C8.641 11 8.759 11.048 8.856 11.144C8.952 11.241 9 11.359 9 11.5C9 11.641 8.952 11.759 8.856 11.856C8.759 11.952 8.641 12 8.5 12L7.5 12C7.359 12 7.241 11.952 7.144 11.856C7.048 11.759 7 11.641 7 11.5C7 11.359 7.048 11.241 7.144 11.144C7.241 11.048 7.359 11 7.5 11L8.5 11Z'/%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='M4 1.5C4 1.359 4.048 1.241 4.144 1.144C4.241 1.048 4.359 1 4.5 1C4.641 1 4.759 1.048 4.856 1.144C4.952 1.241 5 1.359 5 1.5L5 3.05C5 3.132 4.977 3.213 4.935 3.284C4.956 3.277 4.978 3.271 5 3.268C5.084 3.219 5.172 3.177 5.264 3.14C5.5 3.047 5.746 3 6 3L10 3C10.254 3 10.5 3.047 10.736 3.14C10.993 3.242 11.219 3.391 11.414 3.586C11.609 3.781 11.758 4.007 11.86 4.264C11.953 4.5 12 4.746 12 5L12 11C12 11.509 11.906 11.999 11.719 12.472C11.516 12.986 11.219 13.438 10.828 13.828C10.438 14.219 9.986 14.516 9.472 14.719C8.999 14.906 8.509 15 8 15C7.491 15 7.001 14.906 6.528 14.719C6.014 14.516 5.562 14.219 5.172 13.828C4.781 13.438 4.484 12.986 4.281 12.472C4.094 11.999 4 11.509 4 11L4 5C4 4.746 4.047 4.5 4.14 4.264C4.242 4.007 4.391 3.781 4.586 3.586C4.615 3.556 4.646 3.528 4.677 3.5C4.681 3.492 4.685 3.485 4.69 3.478C4.645 3.493 4.597 3.5 4.55 3.5L4.45 3.5C4.201 3.5 4 3.299 4 3.05L4 1.5ZM5 11C5 11.381 5.07 11.75 5.211 12.104C5.363 12.489 5.586 12.828 5.879 13.121C6.172 13.414 6.511 13.637 6.896 13.789C7.25 13.93 7.619 14 8 14C8.381 14 8.75 13.93 9.104 13.789C9.489 13.637 9.828 13.414 10.121 13.121C10.414 12.828 10.637 12.489 10.789 12.104C10.93 11.75 11 11.381 11 11L11 5C11 4.724 10.902 4.488 10.707 4.293C10.512 4.098 10.276 4 10 4L6 4C5.724 4 5.488 4.098 5.293 4.293C5.098 4.488 5 4.724 5 5L5 11ZM6.144 5.144C6.241 5.048 6.359 5 6.5 5L9.5 5C9.641 5 9.759 5.048 9.856 5.144C9.952 5.241 10 5.359 10 5.5L10 7.5C10 7.641 9.952 7.759 9.856 7.856C9.759 7.952 9.641 8 9.5 8L6.5 8C6.359 8 6.241 7.952 6.144 7.856C6.048 7.759 6 7.641 6 7.5L6 5.5C6 5.359 6.048 5.241 6.144 5.144ZM9 7L9 6L7 6L7 7L9 7ZM8.5 11C8.641 11 8.759 11.048 8.856 11.144C8.952 11.241 9 11.359 9 11.5C9 11.641 8.952 11.759 8.856 11.856C8.759 11.952 8.641 12 8.5 12L7.5 12C7.359 12 7.241 11.952 7.144 11.856C7.048 11.759 7 11.641 7 11.5C7 11.359 7.048 11.241 7.144 11.144C7.241 11.048 7.359 11 7.5 11L8.5 11Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "flip-phone" (line-round), MIT. https://gentleface.com/icons/flip-phone import SwiftUI struct FlipPhoneIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 4, y: 1.5)) p.addCurve(to: CGPoint(x: 4.144, y: 1.144), control1: CGPoint(x: 4, y: 1.359), control2: CGPoint(x: 4.048, y: 1.241)) p.addCurve(to: CGPoint(x: 4.5, y: 1), control1: CGPoint(x: 4.241, y: 1.048), control2: CGPoint(x: 4.359, y: 1)) p.addCurve(to: CGPoint(x: 4.856, y: 1.144), control1: CGPoint(x: 4.641, y: 1), control2: CGPoint(x: 4.759, y: 1.048)) p.addCurve(to: CGPoint(x: 5, y: 1.5), control1: CGPoint(x: 4.952, y: 1.241), control2: CGPoint(x: 5, y: 1.359)) p.addLine(to: CGPoint(x: 5, y: 3.05)) p.addCurve(to: CGPoint(x: 4.935, y: 3.284), control1: CGPoint(x: 5, y: 3.132), control2: CGPoint(x: 4.977, y: 3.213)) p.addCurve(to: CGPoint(x: 5, y: 3.268), control1: CGPoint(x: 4.956, y: 3.277), control2: CGPoint(x: 4.978, y: 3.271)) p.addCurve(to: CGPoint(x: 5.264, y: 3.14), control1: CGPoint(x: 5.084, y: 3.219), control2: CGPoint(x: 5.172, y: 3.177)) p.addCurve(to: CGPoint(x: 6, y: 3), control1: CGPoint(x: 5.5, y: 3.047), control2: CGPoint(x: 5.746, y: 3)) p.addLine(to: CGPoint(x: 10, y: 3)) p.addCurve(to: CGPoint(x: 10.736, y: 3.14), control1: CGPoint(x: 10.254, y: 3), control2: CGPoint(x: 10.5, y: 3.047)) p.addCurve(to: CGPoint(x: 11.414, y: 3.586), control1: CGPoint(x: 10.993, y: 3.242), control2: CGPoint(x: 11.219, y: 3.391)) p.addCurve(to: CGPoint(x: 11.86, y: 4.264), control1: CGPoint(x: 11.609, y: 3.781), control2: CGPoint(x: 11.758, y: 4.007)) p.addCurve(to: CGPoint(x: 12, y: 5), control1: CGPoint(x: 11.953, y: 4.5), control2: CGPoint(x: 12, y: 4.746)) p.addLine(to: CGPoint(x: 12, y: 11)) p.addCurve(to: CGPoint(x: 11.719, y: 12.472), control1: CGPoint(x: 12, y: 11.509), control2: CGPoint(x: 11.906, y: 11.999)) p.addCurve(to: CGPoint(x: 10.828, y: 13.828), control1: CGPoint(x: 11.516, y: 12.986), control2: CGPoint(x: 11.219, y: 13.438)) p.addCurve(to: CGPoint(x: 9.472, y: 14.719), control1: CGPoint(x: 10.438, y: 14.219), control2: CGPoint(x: 9.986, y: 14.516)) p.addCurve(to: CGPoint(x: 8, y: 15), control1: CGPoint(x: 8.999, y: 14.906), control2: CGPoint(x: 8.509, y: 15)) p.addCurve(to: CGPoint(x: 6.528, y: 14.719), control1: CGPoint(x: 7.491, y: 15), control2: CGPoint(x: 7.001, y: 14.906)) p.addCurve(to: CGPoint(x: 5.172, y: 13.828), control1: CGPoint(x: 6.014, y: 14.516), control2: CGPoint(x: 5.562, y: 14.219)) p.addCurve(to: CGPoint(x: 4.281, y: 12.472), control1: CGPoint(x: 4.781, y: 13.438), control2: CGPoint(x: 4.484, y: 12.986)) p.addCurve(to: CGPoint(x: 4, y: 11), control1: CGPoint(x: 4.094, y: 11.999), control2: CGPoint(x: 4, y: 11.509)) p.addLine(to: CGPoint(x: 4, y: 5)) p.addCurve(to: CGPoint(x: 4.14, y: 4.264), control1: CGPoint(x: 4, y: 4.746), control2: CGPoint(x: 4.047, y: 4.5)) p.addCurve(to: CGPoint(x: 4.586, y: 3.586), control1: CGPoint(x: 4.242, y: 4.007), control2: CGPoint(x: 4.391, y: 3.781)) p.addCurve(to: CGPoint(x: 4.677, y: 3.5), control1: CGPoint(x: 4.615, y: 3.556), control2: CGPoint(x: 4.646, y: 3.528)) p.addCurve(to: CGPoint(x: 4.69, y: 3.478), control1: CGPoint(x: 4.681, y: 3.492), control2: CGPoint(x: 4.685, y: 3.485)) p.addCurve(to: CGPoint(x: 4.55, y: 3.5), control1: CGPoint(x: 4.645, y: 3.493), control2: CGPoint(x: 4.597, y: 3.5)) p.addLine(to: CGPoint(x: 4.45, y: 3.5)) p.addCurve(to: CGPoint(x: 4, y: 3.05), control1: CGPoint(x: 4.201, y: 3.5), control2: CGPoint(x: 4, y: 3.299)) p.addLine(to: CGPoint(x: 4, y: 1.5)) p.closeSubpath() p.move(to: CGPoint(x: 5, y: 11)) p.addCurve(to: CGPoint(x: 5.211, y: 12.104), control1: CGPoint(x: 5, y: 11.381), control2: CGPoint(x: 5.07, y: 11.75)) p.addCurve(to: CGPoint(x: 5.879, y: 13.121), control1: CGPoint(x: 5.363, y: 12.489), control2: CGPoint(x: 5.586, y: 12.828)) p.addCurve(to: CGPoint(x: 6.896, y: 13.789), control1: CGPoint(x: 6.172, y: 13.414), control2: CGPoint(x: 6.511, y: 13.637)) p.addCurve(to: CGPoint(x: 8, y: 14), control1: CGPoint(x: 7.25, y: 13.93), control2: CGPoint(x: 7.619, y: 14)) p.addCurve(to: CGPoint(x: 9.104, y: 13.789), control1: CGPoint(x: 8.381, y: 14), control2: CGPoint(x: 8.75, y: 13.93)) p.addCurve(to: CGPoint(x: 10.121, y: 13.121), control1: CGPoint(x: 9.489, y: 13.637), control2: CGPoint(x: 9.828, y: 13.414)) p.addCurve(to: CGPoint(x: 10.789, y: 12.104), control1: CGPoint(x: 10.414, y: 12.828), control2: CGPoint(x: 10.637, y: 12.489)) p.addCurve(to: CGPoint(x: 11, y: 11), control1: CGPoint(x: 10.93, y: 11.75), control2: CGPoint(x: 11, y: 11.381)) p.addLine(to: CGPoint(x: 11, y: 5)) p.addCurve(to: CGPoint(x: 10.707, y: 4.293), control1: CGPoint(x: 11, y: 4.724), control2: CGPoint(x: 10.902, y: 4.488)) p.addCurve(to: CGPoint(x: 10, y: 4), control1: CGPoint(x: 10.512, y: 4.098), control2: CGPoint(x: 10.276, y: 4)) p.addLine(to: CGPoint(x: 6, y: 4)) p.addCurve(to: CGPoint(x: 5.293, y: 4.293), control1: CGPoint(x: 5.724, y: 4), control2: CGPoint(x: 5.488, y: 4.098)) p.addCurve(to: CGPoint(x: 5, y: 5), control1: CGPoint(x: 5.098, y: 4.488), control2: CGPoint(x: 5, y: 4.724)) p.addLine(to: CGPoint(x: 5, y: 11)) p.closeSubpath() p.move(to: CGPoint(x: 6.144, y: 5.144)) p.addCurve(to: CGPoint(x: 6.5, y: 5), control1: CGPoint(x: 6.241, y: 5.048), control2: CGPoint(x: 6.359, y: 5)) p.addLine(to: CGPoint(x: 9.5, y: 5)) p.addCurve(to: CGPoint(x: 9.856, y: 5.144), control1: CGPoint(x: 9.641, y: 5), control2: CGPoint(x: 9.759, y: 5.048)) p.addCurve(to: CGPoint(x: 10, y: 5.5), control1: CGPoint(x: 9.952, y: 5.241), control2: CGPoint(x: 10, y: 5.359)) p.addLine(to: CGPoint(x: 10, y: 7.5)) p.addCurve(to: CGPoint(x: 9.856, y: 7.856), control1: CGPoint(x: 10, y: 7.641), control2: CGPoint(x: 9.952, y: 7.759)) p.addCurve(to: CGPoint(x: 9.5, y: 8), control1: CGPoint(x: 9.759, y: 7.952), control2: CGPoint(x: 9.641, y: 8)) p.addLine(to: CGPoint(x: 6.5, y: 8)) p.addCurve(to: CGPoint(x: 6.144, y: 7.856), control1: CGPoint(x: 6.359, y: 8), control2: CGPoint(x: 6.241, y: 7.952)) p.addCurve(to: CGPoint(x: 6, y: 7.5), control1: CGPoint(x: 6.048, y: 7.759), control2: CGPoint(x: 6, y: 7.641)) p.addLine(to: CGPoint(x: 6, y: 5.5)) p.addCurve(to: CGPoint(x: 6.144, y: 5.144), control1: CGPoint(x: 6, y: 5.359), control2: CGPoint(x: 6.048, y: 5.241)) p.closeSubpath() p.move(to: CGPoint(x: 9, y: 7)) p.addLine(to: CGPoint(x: 9, y: 6)) p.addLine(to: CGPoint(x: 7, y: 6)) p.addLine(to: CGPoint(x: 7, y: 7)) p.addLine(to: CGPoint(x: 9, y: 7)) p.closeSubpath() p.move(to: CGPoint(x: 8.5, y: 11)) p.addCurve(to: CGPoint(x: 8.856, y: 11.144), control1: CGPoint(x: 8.641, y: 11), control2: CGPoint(x: 8.759, y: 11.048)) p.addCurve(to: CGPoint(x: 9, y: 11.5), control1: CGPoint(x: 8.952, y: 11.241), control2: CGPoint(x: 9, y: 11.359)) p.addCurve(to: CGPoint(x: 8.856, y: 11.856), control1: CGPoint(x: 9, y: 11.641), control2: CGPoint(x: 8.952, y: 11.759)) p.addCurve(to: CGPoint(x: 8.5, y: 12), control1: CGPoint(x: 8.759, y: 11.952), control2: CGPoint(x: 8.641, y: 12)) p.addLine(to: CGPoint(x: 7.5, y: 12)) p.addCurve(to: CGPoint(x: 7.144, y: 11.856), control1: CGPoint(x: 7.359, y: 12), control2: CGPoint(x: 7.241, y: 11.952)) p.addCurve(to: CGPoint(x: 7, y: 11.5), control1: CGPoint(x: 7.048, y: 11.759), control2: CGPoint(x: 7, y: 11.641)) p.addCurve(to: CGPoint(x: 7.144, y: 11.144), control1: CGPoint(x: 7, y: 11.359), control2: CGPoint(x: 7.048, y: 11.241)) p.addCurve(to: CGPoint(x: 7.5, y: 11), control1: CGPoint(x: 7.241, y: 11.048), control2: CGPoint(x: 7.359, y: 11)) p.addLine(to: CGPoint(x: 8.5, y: 11)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // FlipPhoneIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "flip-phone" (line-round), MIT. https://gentleface.com/icons/flip-phone 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 FlipPhoneIcon: ImageVector by lazy { ImageVector.Builder( name = "flip-phone", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M4 1.5C4 1.359 4.048 1.241 4.144 1.144C4.241 1.048 4.359 1 4.5 1C4.641 1 4.759 1.048 4.856 1.144C4.952 1.241 5 1.359 5 1.5L5 3.05C5 3.132 4.977 3.213 4.935 3.284C4.956 3.277 4.978 3.271 5 3.268C5.084 3.219 5.172 3.177 5.264 3.14C5.5 3.047 5.746 3 6 3L10 3C10.254 3 10.5 3.047 10.736 3.14C10.993 3.242 11.219 3.391 11.414 3.586C11.609 3.781 11.758 4.007 11.86 4.264C11.953 4.5 12 4.746 12 5L12 11C12 11.509 11.906 11.999 11.719 12.472C11.516 12.986 11.219 13.438 10.828 13.828C10.438 14.219 9.986 14.516 9.472 14.719C8.999 14.906 8.509 15 8 15C7.491 15 7.001 14.906 6.528 14.719C6.014 14.516 5.562 14.219 5.172 13.828C4.781 13.438 4.484 12.986 4.281 12.472C4.094 11.999 4 11.509 4 11L4 5C4 4.746 4.047 4.5 4.14 4.264C4.242 4.007 4.391 3.781 4.586 3.586C4.615 3.556 4.646 3.528 4.677 3.5C4.681 3.492 4.685 3.485 4.69 3.478C4.645 3.493 4.597 3.5 4.55 3.5L4.45 3.5C4.201 3.5 4 3.299 4 3.05L4 1.5ZM5 11C5 11.381 5.07 11.75 5.211 12.104C5.363 12.489 5.586 12.828 5.879 13.121C6.172 13.414 6.511 13.637 6.896 13.789C7.25 13.93 7.619 14 8 14C8.381 14 8.75 13.93 9.104 13.789C9.489 13.637 9.828 13.414 10.121 13.121C10.414 12.828 10.637 12.489 10.789 12.104C10.93 11.75 11 11.381 11 11L11 5C11 4.724 10.902 4.488 10.707 4.293C10.512 4.098 10.276 4 10 4L6 4C5.724 4 5.488 4.098 5.293 4.293C5.098 4.488 5 4.724 5 5L5 11ZM6.144 5.144C6.241 5.048 6.359 5 6.5 5L9.5 5C9.641 5 9.759 5.048 9.856 5.144C9.952 5.241 10 5.359 10 5.5L10 7.5C10 7.641 9.952 7.759 9.856 7.856C9.759 7.952 9.641 8 9.5 8L6.5 8C6.359 8 6.241 7.952 6.144 7.856C6.048 7.759 6 7.641 6 7.5L6 5.5C6 5.359 6.048 5.241 6.144 5.144ZM9 7L9 6L7 6L7 7L9 7ZM8.5 11C8.641 11 8.759 11.048 8.856 11.144C8.952 11.241 9 11.359 9 11.5C9 11.641 8.952 11.759 8.856 11.856C8.759 11.952 8.641 12 8.5 12L7.5 12C7.359 12 7.241 11.952 7.144 11.856C7.048 11.759 7 11.641 7 11.5C7 11.359 7.048 11.241 7.144 11.144C7.241 11.048 7.359 11 7.5 11L8.5 11Z"), fill = SolidColor(Color.Black), ).build() } // Icon(FlipPhoneIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "flip-phone" (line-round), MIT. https://gentleface.com/icons/flip-phone import 'package:flutter/widgets.dart'; class FlipPhoneIcon extends StatelessWidget { const FlipPhoneIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _FlipPhoneIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _FlipPhoneIconPainter extends CustomPainter { _FlipPhoneIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(4, 1.5) ..cubicTo(4, 1.359, 4.048, 1.241, 4.144, 1.144) ..cubicTo(4.241, 1.048, 4.359, 1, 4.5, 1) ..cubicTo(4.641, 1, 4.759, 1.048, 4.856, 1.144) ..cubicTo(4.952, 1.241, 5, 1.359, 5, 1.5) ..lineTo(5, 3.05) ..cubicTo(5, 3.132, 4.977, 3.213, 4.935, 3.284) ..cubicTo(4.956, 3.277, 4.978, 3.271, 5, 3.268) ..cubicTo(5.084, 3.219, 5.172, 3.177, 5.264, 3.14) ..cubicTo(5.5, 3.047, 5.746, 3, 6, 3) ..lineTo(10, 3) ..cubicTo(10.254, 3, 10.5, 3.047, 10.736, 3.14) ..cubicTo(10.993, 3.242, 11.219, 3.391, 11.414, 3.586) ..cubicTo(11.609, 3.781, 11.758, 4.007, 11.86, 4.264) ..cubicTo(11.953, 4.5, 12, 4.746, 12, 5) ..lineTo(12, 11) ..cubicTo(12, 11.509, 11.906, 11.999, 11.719, 12.472) ..cubicTo(11.516, 12.986, 11.219, 13.438, 10.828, 13.828) ..cubicTo(10.438, 14.219, 9.986, 14.516, 9.472, 14.719) ..cubicTo(8.999, 14.906, 8.509, 15, 8, 15) ..cubicTo(7.491, 15, 7.001, 14.906, 6.528, 14.719) ..cubicTo(6.014, 14.516, 5.562, 14.219, 5.172, 13.828) ..cubicTo(4.781, 13.438, 4.484, 12.986, 4.281, 12.472) ..cubicTo(4.094, 11.999, 4, 11.509, 4, 11) ..lineTo(4, 5) ..cubicTo(4, 4.746, 4.047, 4.5, 4.14, 4.264) ..cubicTo(4.242, 4.007, 4.391, 3.781, 4.586, 3.586) ..cubicTo(4.615, 3.556, 4.646, 3.528, 4.677, 3.5) ..cubicTo(4.681, 3.492, 4.685, 3.485, 4.69, 3.478) ..cubicTo(4.645, 3.493, 4.597, 3.5, 4.55, 3.5) ..lineTo(4.45, 3.5) ..cubicTo(4.201, 3.5, 4, 3.299, 4, 3.05) ..lineTo(4, 1.5) ..close() ..moveTo(5, 11) ..cubicTo(5, 11.381, 5.07, 11.75, 5.211, 12.104) ..cubicTo(5.363, 12.489, 5.586, 12.828, 5.879, 13.121) ..cubicTo(6.172, 13.414, 6.511, 13.637, 6.896, 13.789) ..cubicTo(7.25, 13.93, 7.619, 14, 8, 14) ..cubicTo(8.381, 14, 8.75, 13.93, 9.104, 13.789) ..cubicTo(9.489, 13.637, 9.828, 13.414, 10.121, 13.121) ..cubicTo(10.414, 12.828, 10.637, 12.489, 10.789, 12.104) ..cubicTo(10.93, 11.75, 11, 11.381, 11, 11) ..lineTo(11, 5) ..cubicTo(11, 4.724, 10.902, 4.488, 10.707, 4.293) ..cubicTo(10.512, 4.098, 10.276, 4, 10, 4) ..lineTo(6, 4) ..cubicTo(5.724, 4, 5.488, 4.098, 5.293, 4.293) ..cubicTo(5.098, 4.488, 5, 4.724, 5, 5) ..lineTo(5, 11) ..close() ..moveTo(6.144, 5.144) ..cubicTo(6.241, 5.048, 6.359, 5, 6.5, 5) ..lineTo(9.5, 5) ..cubicTo(9.641, 5, 9.759, 5.048, 9.856, 5.144) ..cubicTo(9.952, 5.241, 10, 5.359, 10, 5.5) ..lineTo(10, 7.5) ..cubicTo(10, 7.641, 9.952, 7.759, 9.856, 7.856) ..cubicTo(9.759, 7.952, 9.641, 8, 9.5, 8) ..lineTo(6.5, 8) ..cubicTo(6.359, 8, 6.241, 7.952, 6.144, 7.856) ..cubicTo(6.048, 7.759, 6, 7.641, 6, 7.5) ..lineTo(6, 5.5) ..cubicTo(6, 5.359, 6.048, 5.241, 6.144, 5.144) ..close() ..moveTo(9, 7) ..lineTo(9, 6) ..lineTo(7, 6) ..lineTo(7, 7) ..lineTo(9, 7) ..close() ..moveTo(8.5, 11) ..cubicTo(8.641, 11, 8.759, 11.048, 8.856, 11.144) ..cubicTo(8.952, 11.241, 9, 11.359, 9, 11.5) ..cubicTo(9, 11.641, 8.952, 11.759, 8.856, 11.856) ..cubicTo(8.759, 11.952, 8.641, 12, 8.5, 12) ..lineTo(7.5, 12) ..cubicTo(7.359, 12, 7.241, 11.952, 7.144, 11.856) ..cubicTo(7.048, 11.759, 7, 11.641, 7, 11.5) ..cubicTo(7, 11.359, 7.048, 11.241, 7.144, 11.144) ..cubicTo(7.241, 11.048, 7.359, 11, 7.5, 11) ..lineTo(8.5, 11) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_FlipPhoneIconPainter old) => old.color != color; } ```