Gentleface › Design › line-cap-square
line-cap-square icon
line-cap-squareLine cap square: square cap, projecting cap. 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="M2 11L14.5 11C14.641 11 14.759 11.048 14.856 11.144C14.952 11.241 15 11.359 15 11.5C15 11.641 14.952 11.759 14.856 11.856C14.759 11.952 14.641 12 14.5 12L1.5 12C1.359 12 1.241 11.952 1.144 11.856C1.048 11.759 1 11.641 1 11.5L1 3.5C1 3.359 1.048 3.241 1.144 3.144C1.241 3.048 1.359 3 1.5 3L14.5 3C14.641 3 14.759 3.048 14.856 3.144C14.952 3.241 15 3.359 15 3.5C15 3.641 14.952 3.759 14.856 3.856C14.759 3.952 14.641 4 14.5 4L2 4L2 11ZM7 6L7 7L14.5 7C14.641 7 14.759 7.048 14.856 7.144C14.952 7.241 15 7.359 15 7.5C15 7.641 14.952 7.759 14.856 7.856C14.759 7.952 14.641 8 14.5 8L7 8L7 9L4 9L4 8.501L4 8.5L4 6L7 6Z"/></svg>
// Gentleface "line-cap-square" (line-round), MIT. https://gentleface.com/icons/line-cap-square
import type { SVGProps } from 'react';
export function LineCapSquareIcon(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="M2 11L14.5 11C14.641 11 14.759 11.048 14.856 11.144C14.952 11.241 15 11.359 15 11.5C15 11.641 14.952 11.759 14.856 11.856C14.759 11.952 14.641 12 14.5 12L1.5 12C1.359 12 1.241 11.952 1.144 11.856C1.048 11.759 1 11.641 1 11.5L1 3.5C1 3.359 1.048 3.241 1.144 3.144C1.241 3.048 1.359 3 1.5 3L14.5 3C14.641 3 14.759 3.048 14.856 3.144C14.952 3.241 15 3.359 15 3.5C15 3.641 14.952 3.759 14.856 3.856C14.759 3.952 14.641 4 14.5 4L2 4L2 11ZM7 6L7 7L14.5 7C14.641 7 14.759 7.048 14.856 7.144C14.952 7.241 15 7.359 15 7.5C15 7.641 14.952 7.759 14.856 7.856C14.759 7.952 14.641 8 14.5 8L7 8L7 9L4 9L4 8.501L4 8.5L4 6L7 6Z" />
</svg>
);
}Vue: see /icons/line-cap-square.md
Svelte: see /icons/line-cap-square.md
HTML img: see /icons/line-cap-square.md
CSS: see /icons/line-cap-square.md
Data URL: see /icons/line-cap-square.md
Sprite: see /icons/line-cap-square.md
SwiftUI: see /icons/line-cap-square.md
Compose: see /icons/line-cap-square.md
Android XML: see /icons/line-cap-square.md
Flutter: see /icons/line-cap-square.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 { LineCapSquareIcon } from '@gentleface/react'; (setup).
Meaning
- Use it for
- square cap, projecting cap
- Tags
- line cap, square cap, projecting cap, cap, stroke, stroke end, line end, linecap, stroke-linecap, square, projecting, extended, figma, illustrator, design tool, vector
- Category
- Design
- Component name
LineCapSquareIcon- 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-cap-square.json · Markdown: /icons/line-cap-square.md · SVG: https://gentleface.com/svg/{style}/16/line-cap-square.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/line-cap-square.png