A pair of shorts for summer wear and sports kit. 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="M4 8V6C4 4.9 4.8954 4 6 4H18C19.1046 4 20 4.9 20 6V8M4 8L2.0338 17.07C1.8211 18.22 2.635 19.31 3.8151 19.46L8.107 19.98C9.1466 20.11 10.1195 19.46 10.3736 18.46L11.4975 14.04C11.6284 13.53 12.3716 13.53 12.5025 14.04L13.6264 18.46C13.8805 19.46 14.8534 20.11 15.893 19.98L20.1849 19.46C21.365 19.31 22.1789 18.22 21.9662 17.07L20 8M4 8H8M20 8H16"/>
</svg>Also called
What someone searching for this drawing would have typed instead. These are the words the browser's search matches on.
- clothing
- summer
- swimwear
- sportswear
- trunks
- apparel
Related icons
The rest of the shorts family first, then the Commerce shelf.
FAQ
Answered from shorts's own facts: its shelf, the styles it was drawn in, its siblings and its dates.
- What is the shorts icon for?
- A pair of shorts for summer wear and sports kit. It is filed under Commerce in Keyline Icons, drawn on the same 24×24 grid as the rest of the set. People look for it as clothing, summer, swimwear, sportswear, trunks and apparel, and the browser's search matches all of those.
- What styles does the shorts 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 shorts?
- No. shorts is drawn as a bare glyph, and the set has no boxed variant of it.
- What other icons go with shorts?
- badge-percent, box, briefcase, briefcase-arrow-down, circle-percent and concierge-bell, and 12 more, all shown below. They are the Commerce shelf: nothing else in the set is named after shorts.
- How do I import shorts in React?
- <Shorts /> is the component, and the style 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 <Shorts size={16} /> and className="size-4" both work, and there is no provider or theme to set up.
- Where is the shorts SVG?
- icons/stroke/shorts.svg, icons/two-tone/shorts.svg, icons/duotone/shorts.svg and icons/fill/shorts.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 shorts added to the set?
- Added 8 Nov 2026. It ships in v2.6.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.