Carousel / Gallery

[fzembow]

Describe the requested icon

My specific use case is a UI toggle split button for changing between different views of an image gallery. One of my modes is a "filmstrip", which you already have, but there isn't a good "gallery" treatment that I was able to find.

Screenshots

One idea would be a combination of the caret-left and caret-right icons already existing with an image, something skin to:

This is what I went with, implemented using Tailwind

const Carousel: FC = () => (
  <div className="flex items-center">
    <CaretLeft size={10} className="-mr-1" />
    <ImageSquare />
    <CaretRight size={10} className="-ml-1" />
  </div>
);

An alternative approach would be to do something similar to the iOS Finder icon for its gallery view:

Additional context

I love phosphor icons, thank you in particular for having really clean SVG markup :)