Hover the icon or press Play. Suggested motion: pop. Pick another to preview it and update the animated code:

Simple Line Icons · SlPlaylist

Playlist icon

A free playlist icon from Simple Line Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

License: MIT license
Project: thesabbir.github.io

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/simple-line-icons/playlist.json

components/icons/simple-line-icons-playlist.tsx

import * as React from "react";

/**
 * Playlist from Simple Line Icons (https://thesabbir.github.io/simple-line-icons/), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/simple-line-icons/playlist. Sized in em, colored by currentColor.
 */
export function SlPlaylistIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 1024 1024"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M33.76 63.76h448c17.664 0 32-14.336 32-32s-14.336-32-32-32h-448c-17.664 0-32 14.336-32 32s14.32 32 32 32zm0 192h448c17.664 0 32-14.336 32-32s-14.336-32-32-32h-448c-17.664 0-32 14.336-32 32s14.32 32 32 32zm480 160c0-17.664-14.336-32-32-32h-448c-17.664 0-32 14.336-32 32s14.336 32 32 32h448c17.664 0 32-14.336 32-32zm499.12-91.216L699.968 11.646c-9.904-9.92-24.656-11.84-36.592-6.016-12.544 4.336-21.616 16.113-21.616 30.128v708.4c-33.92-25.135-78.432-40.527-127.376-40.527-106.064 0-192.097 71.776-192.097 160.288 0 88.528 86.032 160.336 192.097 160.336 106.128 0 192.096-71.808 192.096-160.336 0-4.016-.368-7.936-.72-11.871V107.952L967.6 369.808c12.496 12.496 32.769 12.496 45.265 0 12.496-12.496 12.496-32.769.015-45.265zM641.76 867.021c-2.304 44.497-54.191 92.815-128.127 92.815-75.648 0-128.353-50.56-128.353-95.871 0-45.344 52.704-95.84 128.353-95.84 73.936 0 125.823 48.256 128.127 92.784v6.113z"
      />
    </svg>
  );
}

With react-icons

import { SlPlaylist } from "react-icons/sl";

export function Example() {
  return <SlPlaylist className="size-5" />;
}

playlist.svg

<svg
  viewBox="0 0 1024 1024"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M33.76 63.76h448c17.664 0 32-14.336 32-32s-14.336-32-32-32h-448c-17.664 0-32 14.336-32 32s14.32 32 32 32zm0 192h448c17.664 0 32-14.336 32-32s-14.336-32-32-32h-448c-17.664 0-32 14.336-32 32s14.32 32 32 32zm480 160c0-17.664-14.336-32-32-32h-448c-17.664 0-32 14.336-32 32s14.336 32 32 32h448c17.664 0 32-14.336 32-32zm499.12-91.216L699.968 11.646c-9.904-9.92-24.656-11.84-36.592-6.016-12.544 4.336-21.616 16.113-21.616 30.128v708.4c-33.92-25.135-78.432-40.527-127.376-40.527-106.064 0-192.097 71.776-192.097 160.288 0 88.528 86.032 160.336 192.097 160.336 106.128 0 192.096-71.808 192.096-160.336 0-4.016-.368-7.936-.72-11.871V107.952L967.6 369.808c12.496 12.496 32.769 12.496 45.265 0 12.496-12.496 12.496-32.769.015-45.265zM641.76 867.021c-2.304 44.497-54.191 92.815-128.127 92.815-75.648 0-128.353-50.56-128.353-95.871 0-45.344 52.704-95.84 128.353-95.84 73.936 0 125.823 48.256 128.127 92.784v6.113z"
  />
</svg>

Attribution

"Playlist" icon from Simple Line Icons (https://thesabbir.github.io/simple-line-icons/), licensed under MIT license.

Playlist icon in other sets

Similar Simple Line Icons icons