Three equal columns, for column layouts, kanban boards and side by side views. On a 24×24 grid in stroke, two-tone, duotone and fill, free under MIT.
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 5L5 5C5.5523 5 6 5.4477 6 6L6 18C6 18.5523 5.5523 19 5 19L3 19C2.4477 19 2 18.5523 2 18L2 6C2 5.4477 2.4477 5 3 5ZM11 5L13 5C13.5523 5 14 5.4477 14 6L14 18C14 18.5523 13.5523 19 13 19L11 19C10.4477 19 10 18.5523 10 18L10 6C10 5.4477 10.4477 5 11 5ZM19 5L21 5C21.5523 5 22 5.4477 22 6L22 18C22 18.5523 21.5523 19 21 19L19 19C18.4477 19 18 18.5523 18 18L18 6C18 5.4477 18.4477 5 19 5Z" fill="none"/>
</svg>Also called
What someone searching for this drawing would have typed instead. These are the words the browser's search matches on.
- columns
- three columns
- kanban
- board
- layout
- panes
- split
Related icons
The rest of the layout family first, then the Layout shelf.
FAQ
Answered from layout-columns's own facts: its shelf, the weights it was drawn in, its siblings and its dates.
- What is the layout-columns icon for?
- Three equal columns, for column layouts, kanban boards and side by side views. It is filed under Layout in Keyline Icons, drawn on the same 24×24 grid as the rest of the set. People look for it as columns, three columns, kanban, board, layout, panes and split, and the browser's search matches all of those.
- What styles does the layout-columns icon come in?
- All four: stroke, two-tone, duotone and fill. They are drawn from the same geometry, so swapping style never moves anything.
- Is there a square or circle version of layout-columns?
- No. layout-columns is drawn as a bare glyph, and the set has no boxed variant of it.
- What other icons go with layout-columns?
- layout-bento, layout-dashboard, align-offset-bottom, align-offset-left, align-offset-right and align-offset-top, and 12 more, all shown below. The layout family is listed first, then the rest of the Layout shelf, so the row under this one is the useful one even where a shelf runs long.
- How do I import layout-columns in React?
- <LayoutColumns /> is the component, and the weight decides the module: stroke from "@keyline-icons/react", two-tone from "@keyline-icons/react/two-tone", duotone from "@keyline-icons/react/duotone" and fill from "@keyline-icons/react/fill". It takes the usual SVG props plus a size, so <LayoutColumns size={16} /> and className="size-4" both work, and there is no provider or theme to set up.
- Where is the layout-columns SVG?
- icons/stroke/layout-columns.svg, icons/two-tone/layout-columns.svg, icons/duotone/layout-columns.svg and icons/fill/layout-columns.svg in the repository, normalised: no wrapper, no ids and no classes to strip out. The tabs above hand you the same drawing as SVG or JSX without the download, and neither needs an install.
- When was layout-columns added to the set?
- Added 20 Oct 2026. It ships in v2.1.0, so an install at that version or later has it.
Questions about the set rather than about this drawing are answered where they belong. The home page covers what the set is, how the three styles differ, why some icons come boxed and where the Figma file is; installing the set in a shadcn/ui project covers the React package, the CLI and using an icon without React. The MIT licence is stated in the footer of every page.