Gentleface › Layout & interface › carousel-horizontal
carousel-horizontal icon
carousel-horizontalCarousel horizontal: carousel, horizontal carousel, image slider. 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="M11.86 12.736C11.758 12.993 11.609 13.219 11.414 13.414C11.219 13.609 10.993 13.758 10.736 13.86C10.5 13.953 10.254 14 10 14L6 14C5.746 14 5.5 13.953 5.264 13.86C5.007 13.758 4.781 13.609 4.586 13.414C4.391 13.219 4.242 12.993 4.14 12.736C4.047 12.5 4 12.254 4 12L4 4C4 3.746 4.047 3.5 4.14 3.264C4.242 3.007 4.391 2.781 4.586 2.586C4.781 2.391 5.007 2.242 5.264 2.14C5.5 2.047 5.746 2 6 2L10 2C10.254 2 10.5 2.047 10.736 2.14C10.993 2.242 11.219 2.391 11.414 2.586C11.609 2.781 11.758 3.007 11.86 3.264C11.953 3.5 12 3.746 12 4L12 12C12 12.254 11.953 12.5 11.86 12.736ZM5.293 12.707C5.488 12.902 5.724 13 6 13L10 13C10.276 13 10.512 12.902 10.707 12.707C10.902 12.512 11 12.276 11 12L11 4C11 3.724 10.902 3.488 10.707 3.293C10.512 3.098 10.276 3 10 3L6 3C5.724 3 5.488 3.098 5.293 3.293C5.098 3.488 5 3.724 5 4L5 12C5 12.276 5.098 12.512 5.293 12.707ZM2.856 11.856C2.759 11.952 2.641 12 2.5 12L1.5 12C1.359 12 1.241 11.952 1.144 11.856C1.048 11.759 1 11.641 1 11.5C1 11.359 1.048 11.241 1.144 11.144C1.241 11.048 1.359 11 1.5 11L2 11L2 5L1.5 5C1.359 5 1.241 4.952 1.144 4.856C1.048 4.759 1 4.641 1 4.5C1 4.359 1.048 4.241 1.144 4.144C1.241 4.048 1.359 4 1.5 4L2.5 4C2.641 4 2.759 4.048 2.856 4.144C2.952 4.241 3 4.359 3 4.5L3 11.5C3 11.641 2.952 11.759 2.856 11.856ZM14 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 12L13.5 12C13.359 12 13.241 11.952 13.144 11.856C13.048 11.759 13 11.641 13 11.5L13 4.5C13 4.359 13.048 4.241 13.144 4.144C13.241 4.048 13.359 4 13.5 4L14.5 4C14.641 4 14.759 4.048 14.856 4.144C14.952 4.241 15 4.359 15 4.5C15 4.641 14.952 4.759 14.856 4.856C14.759 4.952 14.641 5 14.5 5L14 5L14 11Z"/></svg>
// Gentleface "carousel-horizontal" (line-round), MIT. https://gentleface.com/icons/carousel-horizontal
import type { SVGProps } from 'react';
export function CarouselHorizontalIcon(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="M11.86 12.736C11.758 12.993 11.609 13.219 11.414 13.414C11.219 13.609 10.993 13.758 10.736 13.86C10.5 13.953 10.254 14 10 14L6 14C5.746 14 5.5 13.953 5.264 13.86C5.007 13.758 4.781 13.609 4.586 13.414C4.391 13.219 4.242 12.993 4.14 12.736C4.047 12.5 4 12.254 4 12L4 4C4 3.746 4.047 3.5 4.14 3.264C4.242 3.007 4.391 2.781 4.586 2.586C4.781 2.391 5.007 2.242 5.264 2.14C5.5 2.047 5.746 2 6 2L10 2C10.254 2 10.5 2.047 10.736 2.14C10.993 2.242 11.219 2.391 11.414 2.586C11.609 2.781 11.758 3.007 11.86 3.264C11.953 3.5 12 3.746 12 4L12 12C12 12.254 11.953 12.5 11.86 12.736ZM5.293 12.707C5.488 12.902 5.724 13 6 13L10 13C10.276 13 10.512 12.902 10.707 12.707C10.902 12.512 11 12.276 11 12L11 4C11 3.724 10.902 3.488 10.707 3.293C10.512 3.098 10.276 3 10 3L6 3C5.724 3 5.488 3.098 5.293 3.293C5.098 3.488 5 3.724 5 4L5 12C5 12.276 5.098 12.512 5.293 12.707ZM2.856 11.856C2.759 11.952 2.641 12 2.5 12L1.5 12C1.359 12 1.241 11.952 1.144 11.856C1.048 11.759 1 11.641 1 11.5C1 11.359 1.048 11.241 1.144 11.144C1.241 11.048 1.359 11 1.5 11L2 11L2 5L1.5 5C1.359 5 1.241 4.952 1.144 4.856C1.048 4.759 1 4.641 1 4.5C1 4.359 1.048 4.241 1.144 4.144C1.241 4.048 1.359 4 1.5 4L2.5 4C2.641 4 2.759 4.048 2.856 4.144C2.952 4.241 3 4.359 3 4.5L3 11.5C3 11.641 2.952 11.759 2.856 11.856ZM14 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 12L13.5 12C13.359 12 13.241 11.952 13.144 11.856C13.048 11.759 13 11.641 13 11.5L13 4.5C13 4.359 13.048 4.241 13.144 4.144C13.241 4.048 13.359 4 13.5 4L14.5 4C14.641 4 14.759 4.048 14.856 4.144C14.952 4.241 15 4.359 15 4.5C15 4.641 14.952 4.759 14.856 4.856C14.759 4.952 14.641 5 14.5 5L14 5L14 11Z" />
</svg>
);
}Vue: see /icons/carousel-horizontal.md
Svelte: see /icons/carousel-horizontal.md
HTML img: see /icons/carousel-horizontal.md
CSS: see /icons/carousel-horizontal.md
Data URL: see /icons/carousel-horizontal.md
Sprite: see /icons/carousel-horizontal.md
SwiftUI: see /icons/carousel-horizontal.md
Compose: see /icons/carousel-horizontal.md
Android XML: see /icons/carousel-horizontal.md
Flutter: see /icons/carousel-horizontal.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
- carousel, horizontal carousel, image slider
- Alternatives
carousel-vertical: a vertical carousel, e.g. stories (vertical-carousel)slideshow: a full-screen slideshow of photos (slideshow)
- Don’t confuse with
slider: slider is the range input (slider); an image slider is a carousel
- Also fits
- vertical carousel: the default horizontal carousel (carousel)
- swipe: swipeable content (carousel)
- Tags
- carousel, slider, image slider, gallery, slides, swipe, cards, horizontal scroll, banner, ui, component
- Category
- Layout & interface
- Component name
CarouselHorizontalIcon- History
- added
Family 58
More layout & interface icons
apps checkbox checkbox-indeterminate checkbox-off command-palette cursor cursor-click cursor-hover cursor-text cursor-user drag-drop grid grip-horizontal grip-vertical hand hand-grab · all layout & interface icons
For agents
Metadata: /icons/carousel-horizontal.json · Markdown: /icons/carousel-horizontal.md · SVG: https://gentleface.com/svg/{style}/16/carousel-horizontal.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/carousel-horizontal.png