Gentleface › Design › line-join-round
line-join-round icon
line-join-roundLine join round: line join round, round join. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.
Code line-round
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M14.5 8C14.641 8 14.759 8.048 14.856 8.144C14.952 8.241 15 8.359 15 8.5L15 14.5C15 14.641 14.952 14.759 14.856 14.856C14.759 14.952 14.641 15 14.5 15L7.5 15C6.673 15 5.876 14.848 5.107 14.544C4.273 14.213 3.538 13.731 2.904 13.096C2.269 12.462 1.787 11.727 1.456 10.893C1.152 10.124 1 9.327 1 8.5L1 1.5C1 1.359 1.048 1.241 1.144 1.144C1.241 1.048 1.359 1 1.5 1L7.5 1C7.641 1 7.759 1.048 7.856 1.144C7.952 1.241 8 1.359 8 1.5L8 8L14.5 8ZM2.386 10.525C2.666 11.231 3.074 11.852 3.611 12.389C4.148 12.926 4.769 13.334 5.475 13.614C6.126 13.871 6.801 14 7.5 14L14 14L14 9L7.5 9C7.359 9 7.241 8.952 7.144 8.856C7.048 8.759 7 8.641 7 8.5L7 2L2 2L2 8.5C2 9.199 2.129 9.874 2.386 10.525Z"/></svg>
// Gentleface "line-join-round" (line-round), MIT. https://gentleface.com/icons/line-join-round
import type { SVGProps } from 'react';
export function LineJoinRoundIcon(props: SVGProps<SVGSVGElement>) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
<path d="M14.5 8C14.641 8 14.759 8.048 14.856 8.144C14.952 8.241 15 8.359 15 8.5L15 14.5C15 14.641 14.952 14.759 14.856 14.856C14.759 14.952 14.641 15 14.5 15L7.5 15C6.673 15 5.876 14.848 5.107 14.544C4.273 14.213 3.538 13.731 2.904 13.096C2.269 12.462 1.787 11.727 1.456 10.893C1.152 10.124 1 9.327 1 8.5L1 1.5C1 1.359 1.048 1.241 1.144 1.144C1.241 1.048 1.359 1 1.5 1L7.5 1C7.641 1 7.759 1.048 7.856 1.144C7.952 1.241 8 1.359 8 1.5L8 8L14.5 8ZM2.386 10.525C2.666 11.231 3.074 11.852 3.611 12.389C4.148 12.926 4.769 13.334 5.475 13.614C6.126 13.871 6.801 14 7.5 14L14 14L14 9L7.5 9C7.359 9 7.241 8.952 7.144 8.856C7.048 8.759 7 8.641 7 8.5L7 2L2 2L2 8.5C2 9.199 2.129 9.874 2.386 10.525Z" />
</svg>
);
}Vue: see /icons/line-join-round.md
Svelte: see /icons/line-join-round.md
HTML img: see /icons/line-join-round.md
CSS: see /icons/line-join-round.md
Data URL: see /icons/line-join-round.md
Sprite: see /icons/line-join-round.md
SwiftUI: see /icons/line-join-round.md
Compose: see /icons/line-join-round.md
Android XML: see /icons/line-join-round.md
Flutter: see /icons/line-join-round.md
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. 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. More in how to use.
With npm: import { LineJoinRoundIcon } from '@gentleface/react'; (setup).
Meaning
- Use it for
- line join round, round join
- Tags
- line join, round join, rounded corner, join, corner, stroke, linejoin, stroke-linejoin, round, rounded, figma, illustrator, design tool, vector
- Category
- Design
- Component name
LineJoinRoundIcon- History
- released in 0.2.0
- added
- Since
- version 0.2.0
Family 8
More design icons
align-horizontal-center align-objects-bottom align-objects-bottom-three align-objects-left align-objects-left-three align-objects-right align-objects-right-three align-objects-top align-objects-top-three align-vertical-center angle animation animation-off auto-layout-horizontal auto-layout-vertical auto-layout-wrap · all design icons
For agents
Metadata: /icons/line-join-round.json · Markdown: /icons/line-join-round.md · SVG: https://gentleface.com/svg/{style}/16/line-join-round.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/line-join-round.png