# link-outgoing icon Link outgoing. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/link-outgoing - Category: Actions - Use it for: outgoing links, forward links, links to - Tags: link, chain, outgoing, forward-links, links-to, wiki, notes, arrow - Family: link, link-alert, link-check, link-clock, link-gear, link-incoming, link-lock, link-off, link-pencil, link-plus, link-sparkle, link-tag, link-user, unlink - Component name: LinkOutgoingIcon - 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/link-outgoing.svg · PNG https://gentleface.com/png/line-round/16/link-outgoing.png · https://gentleface.com/png/line-round/32/link-outgoing.png · https://gentleface.com/png/line-round/48/link-outgoing.png - line-soft: https://gentleface.com/svg/line-soft/16/link-outgoing.svg · PNG https://gentleface.com/png/line-soft/16/link-outgoing.png · https://gentleface.com/png/line-soft/32/link-outgoing.png · https://gentleface.com/png/line-soft/48/link-outgoing.png - line-sharp: https://gentleface.com/svg/line-sharp/16/link-outgoing.svg · PNG https://gentleface.com/png/line-sharp/16/link-outgoing.png · https://gentleface.com/png/line-sharp/32/link-outgoing.png · https://gentleface.com/png/line-sharp/48/link-outgoing.png - solid-round: https://gentleface.com/svg/solid-round/16/link-outgoing.svg · PNG https://gentleface.com/png/solid-round/16/link-outgoing.png · https://gentleface.com/png/solid-round/32/link-outgoing.png · https://gentleface.com/png/solid-round/48/link-outgoing.png - solid-soft: https://gentleface.com/svg/solid-soft/16/link-outgoing.svg · PNG https://gentleface.com/png/solid-soft/16/link-outgoing.png · https://gentleface.com/png/solid-soft/32/link-outgoing.png · https://gentleface.com/png/solid-soft/48/link-outgoing.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/link-outgoing.svg · PNG https://gentleface.com/png/solid-sharp/16/link-outgoing.png · https://gentleface.com/png/solid-sharp/32/link-outgoing.png · https://gentleface.com/png/solid-sharp/48/link-outgoing.png The SVG of every style: https://gentleface.com/icons/link-outgoing.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 "link-outgoing" (line-round), MIT. https://gentleface.com/icons/link-outgoing import type { SVGProps } from 'react'; export function LinkOutgoingIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "link-outgoing" (line-round), MIT. https://gentleface.com/icons/link-outgoing. Takes the text color. */ .icon-link-outgoing { 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='M14.856 1.144C14.952 1.241 15 1.359 15 1.5L15 4.5C15 4.641 14.952 4.759 14.856 4.856C14.759 4.952 14.641 5 14.5 5C14.359 5 14.241 4.952 14.144 4.856C14.048 4.759 14 4.641 14 4.5L14 2.707L10.854 5.854C10.754 5.953 10.636 6.003 10.5 6.003C10.364 6.003 10.246 5.953 10.146 5.854C10.049 5.756 10 5.638 10 5.5C10 5.362 10.049 5.244 10.146 5.146L13.293 2L11.5 2C11.359 2 11.241 1.952 11.144 1.856C11.048 1.759 11 1.641 11 1.5C11 1.359 11.048 1.241 11.144 1.144C11.241 1.048 11.359 1 11.5 1L14.5 1C14.641 1 14.759 1.048 14.856 1.144ZM3.58 9.176C3.259 9.303 2.976 9.488 2.732 9.732C2.488 9.976 2.303 10.259 2.176 10.58C2.059 10.875 2 11.182 2 11.5C2 11.818 2.059 12.125 2.176 12.42C2.303 12.741 2.488 13.024 2.732 13.268C2.976 13.512 3.259 13.697 3.58 13.824C3.875 13.941 4.182 14 4.5 14L5.5 14C5.641 14 5.759 14.048 5.856 14.144C5.952 14.241 6 14.359 6 14.5C6 14.641 5.952 14.759 5.856 14.856C5.759 14.952 5.641 15 5.5 15L4.5 15C4.055 15 3.625 14.918 3.212 14.754C2.762 14.576 2.367 14.317 2.025 13.975C1.683 13.633 1.424 13.238 1.246 12.788C1.082 12.375 1 11.945 1 11.5C1 11.055 1.082 10.625 1.246 10.212C1.424 9.762 1.683 9.367 2.025 9.025C2.367 8.683 2.762 8.424 3.212 8.246C3.625 8.082 4.055 8 4.5 8L5.5 8C5.641 8 5.759 8.048 5.856 8.144C5.952 8.241 6 8.359 6 8.5C6 8.641 5.952 8.759 5.856 8.856C5.759 8.952 5.641 9 5.5 9L4.5 9C4.182 9 3.875 9.059 3.58 9.176ZM10 8.5C10 8.359 10.048 8.241 10.144 8.144C10.241 8.048 10.359 8 10.5 8L11.5 8C11.945 8 12.375 8.082 12.788 8.246C13.238 8.424 13.633 8.683 13.975 9.025C14.317 9.367 14.576 9.762 14.754 10.212C14.918 10.625 15 11.055 15 11.5C15 11.945 14.918 12.375 14.754 12.788C14.576 13.238 14.317 13.633 13.975 13.975C13.633 14.317 13.238 14.576 12.788 14.754C12.375 14.918 11.945 15 11.5 15L10.5 15C10.359 15 10.241 14.952 10.144 14.856C10.048 14.759 10 14.641 10 14.5C10 14.359 10.048 14.241 10.144 14.144C10.241 14.048 10.359 14 10.5 14L11.5 14C11.818 14 12.125 13.941 12.42 13.824C12.741 13.697 13.024 13.512 13.268 13.268C13.512 13.024 13.697 12.741 13.824 12.42C13.941 12.125 14 11.818 14 11.5C14 11.182 13.941 10.875 13.824 10.58C13.697 10.259 13.512 9.976 13.268 9.732C13.024 9.488 12.741 9.303 12.42 9.176C12.125 9.059 11.818 9 11.5 9L10.5 9C10.359 9 10.241 8.952 10.144 8.856C10.048 8.759 10 8.641 10 8.5ZM10.856 11.144C10.952 11.241 11 11.359 11 11.5C11 11.641 10.952 11.759 10.856 11.856C10.759 11.952 10.641 12 10.5 12L5.5 12C5.359 12 5.241 11.952 5.144 11.856C5.048 11.759 5 11.641 5 11.5C5 11.359 5.048 11.241 5.144 11.144C5.241 11.048 5.359 11 5.5 11L10.5 11C10.641 11 10.759 11.048 10.856 11.144Z'/%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='M14.856 1.144C14.952 1.241 15 1.359 15 1.5L15 4.5C15 4.641 14.952 4.759 14.856 4.856C14.759 4.952 14.641 5 14.5 5C14.359 5 14.241 4.952 14.144 4.856C14.048 4.759 14 4.641 14 4.5L14 2.707L10.854 5.854C10.754 5.953 10.636 6.003 10.5 6.003C10.364 6.003 10.246 5.953 10.146 5.854C10.049 5.756 10 5.638 10 5.5C10 5.362 10.049 5.244 10.146 5.146L13.293 2L11.5 2C11.359 2 11.241 1.952 11.144 1.856C11.048 1.759 11 1.641 11 1.5C11 1.359 11.048 1.241 11.144 1.144C11.241 1.048 11.359 1 11.5 1L14.5 1C14.641 1 14.759 1.048 14.856 1.144ZM3.58 9.176C3.259 9.303 2.976 9.488 2.732 9.732C2.488 9.976 2.303 10.259 2.176 10.58C2.059 10.875 2 11.182 2 11.5C2 11.818 2.059 12.125 2.176 12.42C2.303 12.741 2.488 13.024 2.732 13.268C2.976 13.512 3.259 13.697 3.58 13.824C3.875 13.941 4.182 14 4.5 14L5.5 14C5.641 14 5.759 14.048 5.856 14.144C5.952 14.241 6 14.359 6 14.5C6 14.641 5.952 14.759 5.856 14.856C5.759 14.952 5.641 15 5.5 15L4.5 15C4.055 15 3.625 14.918 3.212 14.754C2.762 14.576 2.367 14.317 2.025 13.975C1.683 13.633 1.424 13.238 1.246 12.788C1.082 12.375 1 11.945 1 11.5C1 11.055 1.082 10.625 1.246 10.212C1.424 9.762 1.683 9.367 2.025 9.025C2.367 8.683 2.762 8.424 3.212 8.246C3.625 8.082 4.055 8 4.5 8L5.5 8C5.641 8 5.759 8.048 5.856 8.144C5.952 8.241 6 8.359 6 8.5C6 8.641 5.952 8.759 5.856 8.856C5.759 8.952 5.641 9 5.5 9L4.5 9C4.182 9 3.875 9.059 3.58 9.176ZM10 8.5C10 8.359 10.048 8.241 10.144 8.144C10.241 8.048 10.359 8 10.5 8L11.5 8C11.945 8 12.375 8.082 12.788 8.246C13.238 8.424 13.633 8.683 13.975 9.025C14.317 9.367 14.576 9.762 14.754 10.212C14.918 10.625 15 11.055 15 11.5C15 11.945 14.918 12.375 14.754 12.788C14.576 13.238 14.317 13.633 13.975 13.975C13.633 14.317 13.238 14.576 12.788 14.754C12.375 14.918 11.945 15 11.5 15L10.5 15C10.359 15 10.241 14.952 10.144 14.856C10.048 14.759 10 14.641 10 14.5C10 14.359 10.048 14.241 10.144 14.144C10.241 14.048 10.359 14 10.5 14L11.5 14C11.818 14 12.125 13.941 12.42 13.824C12.741 13.697 13.024 13.512 13.268 13.268C13.512 13.024 13.697 12.741 13.824 12.42C13.941 12.125 14 11.818 14 11.5C14 11.182 13.941 10.875 13.824 10.58C13.697 10.259 13.512 9.976 13.268 9.732C13.024 9.488 12.741 9.303 12.42 9.176C12.125 9.059 11.818 9 11.5 9L10.5 9C10.359 9 10.241 8.952 10.144 8.856C10.048 8.759 10 8.641 10 8.5ZM10.856 11.144C10.952 11.241 11 11.359 11 11.5C11 11.641 10.952 11.759 10.856 11.856C10.759 11.952 10.641 12 10.5 12L5.5 12C5.359 12 5.241 11.952 5.144 11.856C5.048 11.759 5 11.641 5 11.5C5 11.359 5.048 11.241 5.144 11.144C5.241 11.048 5.359 11 5.5 11L10.5 11C10.641 11 10.759 11.048 10.856 11.144Z'/%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='M14.856 1.144C14.952 1.241 15 1.359 15 1.5L15 4.5C15 4.641 14.952 4.759 14.856 4.856C14.759 4.952 14.641 5 14.5 5C14.359 5 14.241 4.952 14.144 4.856C14.048 4.759 14 4.641 14 4.5L14 2.707L10.854 5.854C10.754 5.953 10.636 6.003 10.5 6.003C10.364 6.003 10.246 5.953 10.146 5.854C10.049 5.756 10 5.638 10 5.5C10 5.362 10.049 5.244 10.146 5.146L13.293 2L11.5 2C11.359 2 11.241 1.952 11.144 1.856C11.048 1.759 11 1.641 11 1.5C11 1.359 11.048 1.241 11.144 1.144C11.241 1.048 11.359 1 11.5 1L14.5 1C14.641 1 14.759 1.048 14.856 1.144ZM3.58 9.176C3.259 9.303 2.976 9.488 2.732 9.732C2.488 9.976 2.303 10.259 2.176 10.58C2.059 10.875 2 11.182 2 11.5C2 11.818 2.059 12.125 2.176 12.42C2.303 12.741 2.488 13.024 2.732 13.268C2.976 13.512 3.259 13.697 3.58 13.824C3.875 13.941 4.182 14 4.5 14L5.5 14C5.641 14 5.759 14.048 5.856 14.144C5.952 14.241 6 14.359 6 14.5C6 14.641 5.952 14.759 5.856 14.856C5.759 14.952 5.641 15 5.5 15L4.5 15C4.055 15 3.625 14.918 3.212 14.754C2.762 14.576 2.367 14.317 2.025 13.975C1.683 13.633 1.424 13.238 1.246 12.788C1.082 12.375 1 11.945 1 11.5C1 11.055 1.082 10.625 1.246 10.212C1.424 9.762 1.683 9.367 2.025 9.025C2.367 8.683 2.762 8.424 3.212 8.246C3.625 8.082 4.055 8 4.5 8L5.5 8C5.641 8 5.759 8.048 5.856 8.144C5.952 8.241 6 8.359 6 8.5C6 8.641 5.952 8.759 5.856 8.856C5.759 8.952 5.641 9 5.5 9L4.5 9C4.182 9 3.875 9.059 3.58 9.176ZM10 8.5C10 8.359 10.048 8.241 10.144 8.144C10.241 8.048 10.359 8 10.5 8L11.5 8C11.945 8 12.375 8.082 12.788 8.246C13.238 8.424 13.633 8.683 13.975 9.025C14.317 9.367 14.576 9.762 14.754 10.212C14.918 10.625 15 11.055 15 11.5C15 11.945 14.918 12.375 14.754 12.788C14.576 13.238 14.317 13.633 13.975 13.975C13.633 14.317 13.238 14.576 12.788 14.754C12.375 14.918 11.945 15 11.5 15L10.5 15C10.359 15 10.241 14.952 10.144 14.856C10.048 14.759 10 14.641 10 14.5C10 14.359 10.048 14.241 10.144 14.144C10.241 14.048 10.359 14 10.5 14L11.5 14C11.818 14 12.125 13.941 12.42 13.824C12.741 13.697 13.024 13.512 13.268 13.268C13.512 13.024 13.697 12.741 13.824 12.42C13.941 12.125 14 11.818 14 11.5C14 11.182 13.941 10.875 13.824 10.58C13.697 10.259 13.512 9.976 13.268 9.732C13.024 9.488 12.741 9.303 12.42 9.176C12.125 9.059 11.818 9 11.5 9L10.5 9C10.359 9 10.241 8.952 10.144 8.856C10.048 8.759 10 8.641 10 8.5ZM10.856 11.144C10.952 11.241 11 11.359 11 11.5C11 11.641 10.952 11.759 10.856 11.856C10.759 11.952 10.641 12 10.5 12L5.5 12C5.359 12 5.241 11.952 5.144 11.856C5.048 11.759 5 11.641 5 11.5C5 11.359 5.048 11.241 5.144 11.144C5.241 11.048 5.359 11 5.5 11L10.5 11C10.641 11 10.759 11.048 10.856 11.144Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "link-outgoing" (line-round), MIT. https://gentleface.com/icons/link-outgoing import SwiftUI struct LinkOutgoingIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 14.856, y: 1.144)) p.addCurve(to: CGPoint(x: 15, y: 1.5), control1: CGPoint(x: 14.952, y: 1.241), control2: CGPoint(x: 15, y: 1.359)) p.addLine(to: CGPoint(x: 15, y: 4.5)) p.addCurve(to: CGPoint(x: 14.856, y: 4.856), control1: CGPoint(x: 15, y: 4.641), control2: CGPoint(x: 14.952, y: 4.759)) p.addCurve(to: CGPoint(x: 14.5, y: 5), control1: CGPoint(x: 14.759, y: 4.952), control2: CGPoint(x: 14.641, y: 5)) p.addCurve(to: CGPoint(x: 14.144, y: 4.856), control1: CGPoint(x: 14.359, y: 5), control2: CGPoint(x: 14.241, y: 4.952)) p.addCurve(to: CGPoint(x: 14, y: 4.5), control1: CGPoint(x: 14.048, y: 4.759), control2: CGPoint(x: 14, y: 4.641)) p.addLine(to: CGPoint(x: 14, y: 2.707)) p.addLine(to: CGPoint(x: 10.854, y: 5.854)) p.addCurve(to: CGPoint(x: 10.5, y: 6.003), control1: CGPoint(x: 10.754, y: 5.953), control2: CGPoint(x: 10.636, y: 6.003)) p.addCurve(to: CGPoint(x: 10.146, y: 5.854), control1: CGPoint(x: 10.364, y: 6.003), control2: CGPoint(x: 10.246, y: 5.953)) p.addCurve(to: CGPoint(x: 10, y: 5.5), control1: CGPoint(x: 10.049, y: 5.756), control2: CGPoint(x: 10, y: 5.638)) p.addCurve(to: CGPoint(x: 10.146, y: 5.146), control1: CGPoint(x: 10, y: 5.362), control2: CGPoint(x: 10.049, y: 5.244)) p.addLine(to: CGPoint(x: 13.293, y: 2)) p.addLine(to: CGPoint(x: 11.5, y: 2)) p.addCurve(to: CGPoint(x: 11.144, y: 1.856), control1: CGPoint(x: 11.359, y: 2), control2: CGPoint(x: 11.241, y: 1.952)) p.addCurve(to: CGPoint(x: 11, y: 1.5), control1: CGPoint(x: 11.048, y: 1.759), control2: CGPoint(x: 11, y: 1.641)) p.addCurve(to: CGPoint(x: 11.144, y: 1.144), control1: CGPoint(x: 11, y: 1.359), control2: CGPoint(x: 11.048, y: 1.241)) p.addCurve(to: CGPoint(x: 11.5, y: 1), control1: CGPoint(x: 11.241, y: 1.048), control2: CGPoint(x: 11.359, y: 1)) p.addLine(to: CGPoint(x: 14.5, y: 1)) p.addCurve(to: CGPoint(x: 14.856, y: 1.144), control1: CGPoint(x: 14.641, y: 1), control2: CGPoint(x: 14.759, y: 1.048)) p.closeSubpath() p.move(to: CGPoint(x: 3.58, y: 9.176)) p.addCurve(to: CGPoint(x: 2.732, y: 9.732), control1: CGPoint(x: 3.259, y: 9.303), control2: CGPoint(x: 2.976, y: 9.488)) p.addCurve(to: CGPoint(x: 2.176, y: 10.58), control1: CGPoint(x: 2.488, y: 9.976), control2: CGPoint(x: 2.303, y: 10.259)) p.addCurve(to: CGPoint(x: 2, y: 11.5), control1: CGPoint(x: 2.059, y: 10.875), control2: CGPoint(x: 2, y: 11.182)) p.addCurve(to: CGPoint(x: 2.176, y: 12.42), control1: CGPoint(x: 2, y: 11.818), control2: CGPoint(x: 2.059, y: 12.125)) p.addCurve(to: CGPoint(x: 2.732, y: 13.268), control1: CGPoint(x: 2.303, y: 12.741), control2: CGPoint(x: 2.488, y: 13.024)) p.addCurve(to: CGPoint(x: 3.58, y: 13.824), control1: CGPoint(x: 2.976, y: 13.512), control2: CGPoint(x: 3.259, y: 13.697)) p.addCurve(to: CGPoint(x: 4.5, y: 14), control1: CGPoint(x: 3.875, y: 13.941), control2: CGPoint(x: 4.182, y: 14)) p.addLine(to: CGPoint(x: 5.5, y: 14)) p.addCurve(to: CGPoint(x: 5.856, y: 14.144), control1: CGPoint(x: 5.641, y: 14), control2: CGPoint(x: 5.759, y: 14.048)) p.addCurve(to: CGPoint(x: 6, y: 14.5), control1: CGPoint(x: 5.952, y: 14.241), control2: CGPoint(x: 6, y: 14.359)) p.addCurve(to: CGPoint(x: 5.856, y: 14.856), control1: CGPoint(x: 6, y: 14.641), control2: CGPoint(x: 5.952, y: 14.759)) p.addCurve(to: CGPoint(x: 5.5, y: 15), control1: CGPoint(x: 5.759, y: 14.952), control2: CGPoint(x: 5.641, y: 15)) p.addLine(to: CGPoint(x: 4.5, y: 15)) p.addCurve(to: CGPoint(x: 3.212, y: 14.754), control1: CGPoint(x: 4.055, y: 15), control2: CGPoint(x: 3.625, y: 14.918)) p.addCurve(to: CGPoint(x: 2.025, y: 13.975), control1: CGPoint(x: 2.762, y: 14.576), control2: CGPoint(x: 2.367, y: 14.317)) p.addCurve(to: CGPoint(x: 1.246, y: 12.788), control1: CGPoint(x: 1.683, y: 13.633), control2: CGPoint(x: 1.424, y: 13.238)) p.addCurve(to: CGPoint(x: 1, y: 11.5), control1: CGPoint(x: 1.082, y: 12.375), control2: CGPoint(x: 1, y: 11.945)) p.addCurve(to: CGPoint(x: 1.246, y: 10.212), control1: CGPoint(x: 1, y: 11.055), control2: CGPoint(x: 1.082, y: 10.625)) p.addCurve(to: CGPoint(x: 2.025, y: 9.025), control1: CGPoint(x: 1.424, y: 9.762), control2: CGPoint(x: 1.683, y: 9.367)) p.addCurve(to: CGPoint(x: 3.212, y: 8.246), control1: CGPoint(x: 2.367, y: 8.683), control2: CGPoint(x: 2.762, y: 8.424)) p.addCurve(to: CGPoint(x: 4.5, y: 8), control1: CGPoint(x: 3.625, y: 8.082), control2: CGPoint(x: 4.055, y: 8)) p.addLine(to: CGPoint(x: 5.5, y: 8)) p.addCurve(to: CGPoint(x: 5.856, y: 8.144), control1: CGPoint(x: 5.641, y: 8), control2: CGPoint(x: 5.759, y: 8.048)) p.addCurve(to: CGPoint(x: 6, y: 8.5), control1: CGPoint(x: 5.952, y: 8.241), control2: CGPoint(x: 6, y: 8.359)) p.addCurve(to: CGPoint(x: 5.856, y: 8.856), control1: CGPoint(x: 6, y: 8.641), control2: CGPoint(x: 5.952, y: 8.759)) p.addCurve(to: CGPoint(x: 5.5, y: 9), control1: CGPoint(x: 5.759, y: 8.952), control2: CGPoint(x: 5.641, y: 9)) p.addLine(to: CGPoint(x: 4.5, y: 9)) p.addCurve(to: CGPoint(x: 3.58, y: 9.176), control1: CGPoint(x: 4.182, y: 9), control2: CGPoint(x: 3.875, y: 9.059)) p.closeSubpath() p.move(to: CGPoint(x: 10, y: 8.5)) p.addCurve(to: CGPoint(x: 10.144, y: 8.144), control1: CGPoint(x: 10, y: 8.359), control2: CGPoint(x: 10.048, y: 8.241)) p.addCurve(to: CGPoint(x: 10.5, y: 8), control1: CGPoint(x: 10.241, y: 8.048), control2: CGPoint(x: 10.359, y: 8)) p.addLine(to: CGPoint(x: 11.5, y: 8)) p.addCurve(to: CGPoint(x: 12.788, y: 8.246), control1: CGPoint(x: 11.945, y: 8), control2: CGPoint(x: 12.375, y: 8.082)) p.addCurve(to: CGPoint(x: 13.975, y: 9.025), control1: CGPoint(x: 13.238, y: 8.424), control2: CGPoint(x: 13.633, y: 8.683)) p.addCurve(to: CGPoint(x: 14.754, y: 10.212), control1: CGPoint(x: 14.317, y: 9.367), control2: CGPoint(x: 14.576, y: 9.762)) p.addCurve(to: CGPoint(x: 15, y: 11.5), control1: CGPoint(x: 14.918, y: 10.625), control2: CGPoint(x: 15, y: 11.055)) p.addCurve(to: CGPoint(x: 14.754, y: 12.788), control1: CGPoint(x: 15, y: 11.945), control2: CGPoint(x: 14.918, y: 12.375)) p.addCurve(to: CGPoint(x: 13.975, y: 13.975), control1: CGPoint(x: 14.576, y: 13.238), control2: CGPoint(x: 14.317, y: 13.633)) p.addCurve(to: CGPoint(x: 12.788, y: 14.754), control1: CGPoint(x: 13.633, y: 14.317), control2: CGPoint(x: 13.238, y: 14.576)) p.addCurve(to: CGPoint(x: 11.5, y: 15), control1: CGPoint(x: 12.375, y: 14.918), control2: CGPoint(x: 11.945, y: 15)) p.addLine(to: CGPoint(x: 10.5, y: 15)) p.addCurve(to: CGPoint(x: 10.144, y: 14.856), control1: CGPoint(x: 10.359, y: 15), control2: CGPoint(x: 10.241, y: 14.952)) p.addCurve(to: CGPoint(x: 10, y: 14.5), control1: CGPoint(x: 10.048, y: 14.759), control2: CGPoint(x: 10, y: 14.641)) p.addCurve(to: CGPoint(x: 10.144, y: 14.144), control1: CGPoint(x: 10, y: 14.359), control2: CGPoint(x: 10.048, y: 14.241)) p.addCurve(to: CGPoint(x: 10.5, y: 14), control1: CGPoint(x: 10.241, y: 14.048), control2: CGPoint(x: 10.359, y: 14)) p.addLine(to: CGPoint(x: 11.5, y: 14)) p.addCurve(to: CGPoint(x: 12.42, y: 13.824), control1: CGPoint(x: 11.818, y: 14), control2: CGPoint(x: 12.125, y: 13.941)) p.addCurve(to: CGPoint(x: 13.268, y: 13.268), control1: CGPoint(x: 12.741, y: 13.697), control2: CGPoint(x: 13.024, y: 13.512)) p.addCurve(to: CGPoint(x: 13.824, y: 12.42), control1: CGPoint(x: 13.512, y: 13.024), control2: CGPoint(x: 13.697, y: 12.741)) p.addCurve(to: CGPoint(x: 14, y: 11.5), control1: CGPoint(x: 13.941, y: 12.125), control2: CGPoint(x: 14, y: 11.818)) p.addCurve(to: CGPoint(x: 13.824, y: 10.58), control1: CGPoint(x: 14, y: 11.182), control2: CGPoint(x: 13.941, y: 10.875)) p.addCurve(to: CGPoint(x: 13.268, y: 9.732), control1: CGPoint(x: 13.697, y: 10.259), control2: CGPoint(x: 13.512, y: 9.976)) p.addCurve(to: CGPoint(x: 12.42, y: 9.176), control1: CGPoint(x: 13.024, y: 9.488), control2: CGPoint(x: 12.741, y: 9.303)) p.addCurve(to: CGPoint(x: 11.5, y: 9), control1: CGPoint(x: 12.125, y: 9.059), control2: CGPoint(x: 11.818, y: 9)) p.addLine(to: CGPoint(x: 10.5, y: 9)) p.addCurve(to: CGPoint(x: 10.144, y: 8.856), control1: CGPoint(x: 10.359, y: 9), control2: CGPoint(x: 10.241, y: 8.952)) p.addCurve(to: CGPoint(x: 10, y: 8.5), control1: CGPoint(x: 10.048, y: 8.759), control2: CGPoint(x: 10, y: 8.641)) p.closeSubpath() p.move(to: CGPoint(x: 10.856, y: 11.144)) p.addCurve(to: CGPoint(x: 11, y: 11.5), control1: CGPoint(x: 10.952, y: 11.241), control2: CGPoint(x: 11, y: 11.359)) p.addCurve(to: CGPoint(x: 10.856, y: 11.856), control1: CGPoint(x: 11, y: 11.641), control2: CGPoint(x: 10.952, y: 11.759)) p.addCurve(to: CGPoint(x: 10.5, y: 12), control1: CGPoint(x: 10.759, y: 11.952), control2: CGPoint(x: 10.641, y: 12)) p.addLine(to: CGPoint(x: 5.5, y: 12)) p.addCurve(to: CGPoint(x: 5.144, y: 11.856), control1: CGPoint(x: 5.359, y: 12), control2: CGPoint(x: 5.241, y: 11.952)) p.addCurve(to: CGPoint(x: 5, y: 11.5), control1: CGPoint(x: 5.048, y: 11.759), control2: CGPoint(x: 5, y: 11.641)) p.addCurve(to: CGPoint(x: 5.144, y: 11.144), control1: CGPoint(x: 5, y: 11.359), control2: CGPoint(x: 5.048, y: 11.241)) p.addCurve(to: CGPoint(x: 5.5, y: 11), control1: CGPoint(x: 5.241, y: 11.048), control2: CGPoint(x: 5.359, y: 11)) p.addLine(to: CGPoint(x: 10.5, y: 11)) p.addCurve(to: CGPoint(x: 10.856, y: 11.144), control1: CGPoint(x: 10.641, y: 11), control2: CGPoint(x: 10.759, y: 11.048)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // LinkOutgoingIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "link-outgoing" (line-round), MIT. https://gentleface.com/icons/link-outgoing 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 LinkOutgoingIcon: ImageVector by lazy { ImageVector.Builder( name = "link-outgoing", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M14.856 1.144C14.952 1.241 15 1.359 15 1.5L15 4.5C15 4.641 14.952 4.759 14.856 4.856C14.759 4.952 14.641 5 14.5 5C14.359 5 14.241 4.952 14.144 4.856C14.048 4.759 14 4.641 14 4.5L14 2.707L10.854 5.854C10.754 5.953 10.636 6.003 10.5 6.003C10.364 6.003 10.246 5.953 10.146 5.854C10.049 5.756 10 5.638 10 5.5C10 5.362 10.049 5.244 10.146 5.146L13.293 2L11.5 2C11.359 2 11.241 1.952 11.144 1.856C11.048 1.759 11 1.641 11 1.5C11 1.359 11.048 1.241 11.144 1.144C11.241 1.048 11.359 1 11.5 1L14.5 1C14.641 1 14.759 1.048 14.856 1.144ZM3.58 9.176C3.259 9.303 2.976 9.488 2.732 9.732C2.488 9.976 2.303 10.259 2.176 10.58C2.059 10.875 2 11.182 2 11.5C2 11.818 2.059 12.125 2.176 12.42C2.303 12.741 2.488 13.024 2.732 13.268C2.976 13.512 3.259 13.697 3.58 13.824C3.875 13.941 4.182 14 4.5 14L5.5 14C5.641 14 5.759 14.048 5.856 14.144C5.952 14.241 6 14.359 6 14.5C6 14.641 5.952 14.759 5.856 14.856C5.759 14.952 5.641 15 5.5 15L4.5 15C4.055 15 3.625 14.918 3.212 14.754C2.762 14.576 2.367 14.317 2.025 13.975C1.683 13.633 1.424 13.238 1.246 12.788C1.082 12.375 1 11.945 1 11.5C1 11.055 1.082 10.625 1.246 10.212C1.424 9.762 1.683 9.367 2.025 9.025C2.367 8.683 2.762 8.424 3.212 8.246C3.625 8.082 4.055 8 4.5 8L5.5 8C5.641 8 5.759 8.048 5.856 8.144C5.952 8.241 6 8.359 6 8.5C6 8.641 5.952 8.759 5.856 8.856C5.759 8.952 5.641 9 5.5 9L4.5 9C4.182 9 3.875 9.059 3.58 9.176ZM10 8.5C10 8.359 10.048 8.241 10.144 8.144C10.241 8.048 10.359 8 10.5 8L11.5 8C11.945 8 12.375 8.082 12.788 8.246C13.238 8.424 13.633 8.683 13.975 9.025C14.317 9.367 14.576 9.762 14.754 10.212C14.918 10.625 15 11.055 15 11.5C15 11.945 14.918 12.375 14.754 12.788C14.576 13.238 14.317 13.633 13.975 13.975C13.633 14.317 13.238 14.576 12.788 14.754C12.375 14.918 11.945 15 11.5 15L10.5 15C10.359 15 10.241 14.952 10.144 14.856C10.048 14.759 10 14.641 10 14.5C10 14.359 10.048 14.241 10.144 14.144C10.241 14.048 10.359 14 10.5 14L11.5 14C11.818 14 12.125 13.941 12.42 13.824C12.741 13.697 13.024 13.512 13.268 13.268C13.512 13.024 13.697 12.741 13.824 12.42C13.941 12.125 14 11.818 14 11.5C14 11.182 13.941 10.875 13.824 10.58C13.697 10.259 13.512 9.976 13.268 9.732C13.024 9.488 12.741 9.303 12.42 9.176C12.125 9.059 11.818 9 11.5 9L10.5 9C10.359 9 10.241 8.952 10.144 8.856C10.048 8.759 10 8.641 10 8.5ZM10.856 11.144C10.952 11.241 11 11.359 11 11.5C11 11.641 10.952 11.759 10.856 11.856C10.759 11.952 10.641 12 10.5 12L5.5 12C5.359 12 5.241 11.952 5.144 11.856C5.048 11.759 5 11.641 5 11.5C5 11.359 5.048 11.241 5.144 11.144C5.241 11.048 5.359 11 5.5 11L10.5 11C10.641 11 10.759 11.048 10.856 11.144Z"), fill = SolidColor(Color.Black), ).build() } // Icon(LinkOutgoingIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "link-outgoing" (line-round), MIT. https://gentleface.com/icons/link-outgoing import 'package:flutter/widgets.dart'; class LinkOutgoingIcon extends StatelessWidget { const LinkOutgoingIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _LinkOutgoingIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _LinkOutgoingIconPainter extends CustomPainter { _LinkOutgoingIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(14.856, 1.144) ..cubicTo(14.952, 1.241, 15, 1.359, 15, 1.5) ..lineTo(15, 4.5) ..cubicTo(15, 4.641, 14.952, 4.759, 14.856, 4.856) ..cubicTo(14.759, 4.952, 14.641, 5, 14.5, 5) ..cubicTo(14.359, 5, 14.241, 4.952, 14.144, 4.856) ..cubicTo(14.048, 4.759, 14, 4.641, 14, 4.5) ..lineTo(14, 2.707) ..lineTo(10.854, 5.854) ..cubicTo(10.754, 5.953, 10.636, 6.003, 10.5, 6.003) ..cubicTo(10.364, 6.003, 10.246, 5.953, 10.146, 5.854) ..cubicTo(10.049, 5.756, 10, 5.638, 10, 5.5) ..cubicTo(10, 5.362, 10.049, 5.244, 10.146, 5.146) ..lineTo(13.293, 2) ..lineTo(11.5, 2) ..cubicTo(11.359, 2, 11.241, 1.952, 11.144, 1.856) ..cubicTo(11.048, 1.759, 11, 1.641, 11, 1.5) ..cubicTo(11, 1.359, 11.048, 1.241, 11.144, 1.144) ..cubicTo(11.241, 1.048, 11.359, 1, 11.5, 1) ..lineTo(14.5, 1) ..cubicTo(14.641, 1, 14.759, 1.048, 14.856, 1.144) ..close() ..moveTo(3.58, 9.176) ..cubicTo(3.259, 9.303, 2.976, 9.488, 2.732, 9.732) ..cubicTo(2.488, 9.976, 2.303, 10.259, 2.176, 10.58) ..cubicTo(2.059, 10.875, 2, 11.182, 2, 11.5) ..cubicTo(2, 11.818, 2.059, 12.125, 2.176, 12.42) ..cubicTo(2.303, 12.741, 2.488, 13.024, 2.732, 13.268) ..cubicTo(2.976, 13.512, 3.259, 13.697, 3.58, 13.824) ..cubicTo(3.875, 13.941, 4.182, 14, 4.5, 14) ..lineTo(5.5, 14) ..cubicTo(5.641, 14, 5.759, 14.048, 5.856, 14.144) ..cubicTo(5.952, 14.241, 6, 14.359, 6, 14.5) ..cubicTo(6, 14.641, 5.952, 14.759, 5.856, 14.856) ..cubicTo(5.759, 14.952, 5.641, 15, 5.5, 15) ..lineTo(4.5, 15) ..cubicTo(4.055, 15, 3.625, 14.918, 3.212, 14.754) ..cubicTo(2.762, 14.576, 2.367, 14.317, 2.025, 13.975) ..cubicTo(1.683, 13.633, 1.424, 13.238, 1.246, 12.788) ..cubicTo(1.082, 12.375, 1, 11.945, 1, 11.5) ..cubicTo(1, 11.055, 1.082, 10.625, 1.246, 10.212) ..cubicTo(1.424, 9.762, 1.683, 9.367, 2.025, 9.025) ..cubicTo(2.367, 8.683, 2.762, 8.424, 3.212, 8.246) ..cubicTo(3.625, 8.082, 4.055, 8, 4.5, 8) ..lineTo(5.5, 8) ..cubicTo(5.641, 8, 5.759, 8.048, 5.856, 8.144) ..cubicTo(5.952, 8.241, 6, 8.359, 6, 8.5) ..cubicTo(6, 8.641, 5.952, 8.759, 5.856, 8.856) ..cubicTo(5.759, 8.952, 5.641, 9, 5.5, 9) ..lineTo(4.5, 9) ..cubicTo(4.182, 9, 3.875, 9.059, 3.58, 9.176) ..close() ..moveTo(10, 8.5) ..cubicTo(10, 8.359, 10.048, 8.241, 10.144, 8.144) ..cubicTo(10.241, 8.048, 10.359, 8, 10.5, 8) ..lineTo(11.5, 8) ..cubicTo(11.945, 8, 12.375, 8.082, 12.788, 8.246) ..cubicTo(13.238, 8.424, 13.633, 8.683, 13.975, 9.025) ..cubicTo(14.317, 9.367, 14.576, 9.762, 14.754, 10.212) ..cubicTo(14.918, 10.625, 15, 11.055, 15, 11.5) ..cubicTo(15, 11.945, 14.918, 12.375, 14.754, 12.788) ..cubicTo(14.576, 13.238, 14.317, 13.633, 13.975, 13.975) ..cubicTo(13.633, 14.317, 13.238, 14.576, 12.788, 14.754) ..cubicTo(12.375, 14.918, 11.945, 15, 11.5, 15) ..lineTo(10.5, 15) ..cubicTo(10.359, 15, 10.241, 14.952, 10.144, 14.856) ..cubicTo(10.048, 14.759, 10, 14.641, 10, 14.5) ..cubicTo(10, 14.359, 10.048, 14.241, 10.144, 14.144) ..cubicTo(10.241, 14.048, 10.359, 14, 10.5, 14) ..lineTo(11.5, 14) ..cubicTo(11.818, 14, 12.125, 13.941, 12.42, 13.824) ..cubicTo(12.741, 13.697, 13.024, 13.512, 13.268, 13.268) ..cubicTo(13.512, 13.024, 13.697, 12.741, 13.824, 12.42) ..cubicTo(13.941, 12.125, 14, 11.818, 14, 11.5) ..cubicTo(14, 11.182, 13.941, 10.875, 13.824, 10.58) ..cubicTo(13.697, 10.259, 13.512, 9.976, 13.268, 9.732) ..cubicTo(13.024, 9.488, 12.741, 9.303, 12.42, 9.176) ..cubicTo(12.125, 9.059, 11.818, 9, 11.5, 9) ..lineTo(10.5, 9) ..cubicTo(10.359, 9, 10.241, 8.952, 10.144, 8.856) ..cubicTo(10.048, 8.759, 10, 8.641, 10, 8.5) ..close() ..moveTo(10.856, 11.144) ..cubicTo(10.952, 11.241, 11, 11.359, 11, 11.5) ..cubicTo(11, 11.641, 10.952, 11.759, 10.856, 11.856) ..cubicTo(10.759, 11.952, 10.641, 12, 10.5, 12) ..lineTo(5.5, 12) ..cubicTo(5.359, 12, 5.241, 11.952, 5.144, 11.856) ..cubicTo(5.048, 11.759, 5, 11.641, 5, 11.5) ..cubicTo(5, 11.359, 5.048, 11.241, 5.144, 11.144) ..cubicTo(5.241, 11.048, 5.359, 11, 5.5, 11) ..lineTo(10.5, 11) ..cubicTo(10.641, 11, 10.759, 11.048, 10.856, 11.144) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_LinkOutgoingIconPainter old) => old.color != color; } ```