Gentleface › Design › line-weight
line-weight icon
line-weightLine weight: line weight, stroke width, border width, stroke weight. 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.144 2.856C2.048 2.759 2 2.641 2 2.5C2 2.359 2.048 2.241 2.144 2.144C2.241 2.048 2.359 2 2.5 2L13.5 2C13.641 2 13.759 2.048 13.856 2.144C13.952 2.241 14 2.359 14 2.5C14 2.641 13.952 2.759 13.856 2.856C13.759 2.952 13.641 3 13.5 3L2.5 3C2.359 3 2.241 2.952 2.144 2.856ZM2.293 7.707C2.098 7.512 2 7.276 2 7C2 6.724 2.098 6.488 2.293 6.293C2.488 6.098 2.724 6 3 6L13 6C13.276 6 13.512 6.098 13.707 6.293C13.902 6.488 14 6.724 14 7C14 7.276 13.902 7.512 13.707 7.707C13.512 7.902 13.276 8 13 8L3 8C2.724 8 2.488 7.902 2.293 7.707ZM13.561 11.439C13.854 11.732 14 12.086 14 12.5C14 12.914 13.854 13.268 13.561 13.561C13.268 13.854 12.914 14 12.5 14L3.5 14C3.086 14 2.732 13.854 2.439 13.561C2.146 13.268 2 12.914 2 12.5C2 12.086 2.146 11.732 2.439 11.439C2.732 11.146 3.086 11 3.5 11L12.5 11C12.914 11 13.268 11.146 13.561 11.439Z"/></svg>
// Gentleface "line-weight" (line-round), MIT. https://gentleface.com/icons/line-weight
import type { SVGProps } from 'react';
export function LineWeightIcon(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.144 2.856C2.048 2.759 2 2.641 2 2.5C2 2.359 2.048 2.241 2.144 2.144C2.241 2.048 2.359 2 2.5 2L13.5 2C13.641 2 13.759 2.048 13.856 2.144C13.952 2.241 14 2.359 14 2.5C14 2.641 13.952 2.759 13.856 2.856C13.759 2.952 13.641 3 13.5 3L2.5 3C2.359 3 2.241 2.952 2.144 2.856ZM2.293 7.707C2.098 7.512 2 7.276 2 7C2 6.724 2.098 6.488 2.293 6.293C2.488 6.098 2.724 6 3 6L13 6C13.276 6 13.512 6.098 13.707 6.293C13.902 6.488 14 6.724 14 7C14 7.276 13.902 7.512 13.707 7.707C13.512 7.902 13.276 8 13 8L3 8C2.724 8 2.488 7.902 2.293 7.707ZM13.561 11.439C13.854 11.732 14 12.086 14 12.5C14 12.914 13.854 13.268 13.561 13.561C13.268 13.854 12.914 14 12.5 14L3.5 14C3.086 14 2.732 13.854 2.439 13.561C2.146 13.268 2 12.914 2 12.5C2 12.086 2.146 11.732 2.439 11.439C2.732 11.146 3.086 11 3.5 11L12.5 11C12.914 11 13.268 11.146 13.561 11.439Z" />
</svg>
);
}Vue: see /icons/line-weight.md
Svelte: see /icons/line-weight.md
HTML img: see /icons/line-weight.md
CSS: see /icons/line-weight.md
Data URL: see /icons/line-weight.md
Sprite: see /icons/line-weight.md
SwiftUI: see /icons/line-weight.md
Compose: see /icons/line-weight.md
Android XML: see /icons/line-weight.md
Flutter: see /icons/line-weight.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.
Meaning
- Use it for
- line weight, stroke width, border width, stroke weight, line width, line thickness
- Tags
- line weight, stroke width, stroke weight, border width, thickness, line width, stroke, border, thick, thin, figma, design tool, ui design
- Category
- Design
- Component name
LineWeightIcon- History
- added
Family 2
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-weight.json · Markdown: /icons/line-weight.md · SVG: https://gentleface.com/svg/{style}/16/line-weight.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/line-weight.png