Gentleface › Development › brackets
brackets icon
bracketsBrackets: square brackets, array. 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="M5.5 13C5.641 13 5.759 13.048 5.856 13.144C5.952 13.241 6 13.359 6 13.5C6 13.641 5.952 13.759 5.856 13.856C5.759 13.952 5.641 14 5.5 14L3.5 14C3.359 14 3.241 13.952 3.144 13.856C3.048 13.759 3 13.641 3 13.5L3 1.5C3 1.359 3.048 1.241 3.144 1.144C3.241 1.048 3.359 1 3.5 1L5.5 1C5.641 1 5.759 1.048 5.856 1.144C5.952 1.241 6 1.359 6 1.5C6 1.641 5.952 1.759 5.856 1.856C5.759 1.952 5.641 2 5.5 2L4 2L4 13L5.5 13ZM12.856 1.144C12.952 1.241 13 1.359 13 1.5L13 13.5C13 13.641 12.952 13.759 12.856 13.856C12.759 13.952 12.641 14 12.5 14L10.5 14C10.359 14 10.241 13.952 10.144 13.856C10.048 13.759 10 13.641 10 13.5C10 13.359 10.048 13.241 10.144 13.144C10.241 13.048 10.359 13 10.5 13L12 13L12 2L10.5 2C10.359 2 10.241 1.952 10.144 1.856C10.048 1.759 10 1.641 10 1.5C10 1.359 10.048 1.241 10.144 1.144C10.241 1.048 10.359 1 10.5 1L12.5 1C12.641 1 12.759 1.048 12.856 1.144Z"/></svg>
// Gentleface "brackets" (line-round), MIT. https://gentleface.com/icons/brackets
import type { SVGProps } from 'react';
export function BracketsIcon(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="M5.5 13C5.641 13 5.759 13.048 5.856 13.144C5.952 13.241 6 13.359 6 13.5C6 13.641 5.952 13.759 5.856 13.856C5.759 13.952 5.641 14 5.5 14L3.5 14C3.359 14 3.241 13.952 3.144 13.856C3.048 13.759 3 13.641 3 13.5L3 1.5C3 1.359 3.048 1.241 3.144 1.144C3.241 1.048 3.359 1 3.5 1L5.5 1C5.641 1 5.759 1.048 5.856 1.144C5.952 1.241 6 1.359 6 1.5C6 1.641 5.952 1.759 5.856 1.856C5.759 1.952 5.641 2 5.5 2L4 2L4 13L5.5 13ZM12.856 1.144C12.952 1.241 13 1.359 13 1.5L13 13.5C13 13.641 12.952 13.759 12.856 13.856C12.759 13.952 12.641 14 12.5 14L10.5 14C10.359 14 10.241 13.952 10.144 13.856C10.048 13.759 10 13.641 10 13.5C10 13.359 10.048 13.241 10.144 13.144C10.241 13.048 10.359 13 10.5 13L12 13L12 2L10.5 2C10.359 2 10.241 1.952 10.144 1.856C10.048 1.759 10 1.641 10 1.5C10 1.359 10.048 1.241 10.144 1.144C10.241 1.048 10.359 1 10.5 1L12.5 1C12.641 1 12.759 1.048 12.856 1.144Z" />
</svg>
);
}Vue: see /icons/brackets.md
Svelte: see /icons/brackets.md
HTML img: see /icons/brackets.md
CSS: see /icons/brackets.md
Data URL: see /icons/brackets.md
Sprite: see /icons/brackets.md
SwiftUI: see /icons/brackets.md
Compose: see /icons/brackets.md
Android XML: see /icons/brackets.md
Flutter: see /icons/brackets.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
- square brackets, array
- Alternatives
braces: an object or JSON (curly-brackets)parentheses: parameters, arguments or grouping (parentheses)
- Also fits
- braces: an array or square brackets (array)
- parentheses: square brackets (array)
- bracket: square brackets in code or text
- Tags
- brackets, square-brackets, array, list, code, developer, programming, json
- Category
- Development
- Component name
BracketsIcon- History
- added
Family 12
More development icons
bug bug-off bug-play container database database-alert database-arrow-down database-arrow-right database-arrow-up database-bolt database-check database-gear database-lock database-off database-pencil database-plus · all development icons
For agents
Metadata: /icons/brackets.json · Markdown: /icons/brackets.md · SVG: https://gentleface.com/svg/{style}/16/brackets.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/brackets.png