playlist icon
playlist from Reicon by REICON · Outline · List · MIT Free for personal and commercial use.
- Name
- playlist
- Set
- Reicon
- Style
- Outline
- Category
- List
- Viewbox
- 24×24
- License
- MIT
2 other variants in Reicon
The same icon in other sets
All playlist icons →More list icons from Reicon
Use the playlist icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M2.25 6A.75.75 0 0 1 3 5.25h18a.75.75 0 0 1 0 1.5H3A.75.75 0 0 1 2.25 6m0 4A.75.75 0 0 1 3 9.25h18a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75m16.955 3.443l.09.052c.789.455 1.442.833 1.909 1.186c.475.36.901.8 1.012 1.428c.045.259.045.523 0 .782c-.111.628-.537 1.068-1.012 1.428c-.467.353-1.12.73-1.91 1.186l-.089.052c-.788.455-1.442.833-1.981 1.06c-.55.232-1.144.38-1.744.162a2.3 2.3 0 0 1-.676-.39c-.49-.41-.657-1-.731-1.591C14 18.218 14 17.463 14 16.552v-.104c0-.91 0-1.665.073-2.246c.074-.591.242-1.18.73-1.59q.305-.256.677-.391c.6-.219 1.194-.07 1.744.162c.539.227 1.192.605 1.981 1.06m-2.564.322c-.442-.186-.59-.156-.647-.135a.8.8 0 0 0-.226.13c-.047.04-.147.153-.207.629S15.5 15.524 15.5 16.5s.001 1.635.061 2.111s.16.59.207.629a.8.8 0 0 0 .225.13c.058.02.206.05.648-.135c.442-.186 1.014-.515 1.859-1.003s1.416-.819 1.798-1.108s.43-.433.44-.494a.8.8 0 0 0 0-.26c-.01-.06-.058-.204-.44-.494s-.953-.62-1.798-1.108s-1.417-.817-1.859-1.003M2.25 14a.75.75 0 0 1 .75-.75h8a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75m0 4a.75.75 0 0 1 .75-.75h8a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75" clip-rule="evenodd"/></svg>
React
import type { SVGProps } from "react";
export function ReiconPlaylist(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fillRule="evenodd" d="M2.25 6A.75.75 0 0 1 3 5.25h18a.75.75 0 0 1 0 1.5H3A.75.75 0 0 1 2.25 6m0 4A.75.75 0 0 1 3 9.25h18a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75m16.955 3.443l.09.052c.789.455 1.442.833 1.909 1.186c.475.36.901.8 1.012 1.428c.045.259.045.523 0 .782c-.111.628-.537 1.068-1.012 1.428c-.467.353-1.12.73-1.91 1.186l-.089.052c-.788.455-1.442.833-1.981 1.06c-.55.232-1.144.38-1.744.162a2.3 2.3 0 0 1-.676-.39c-.49-.41-.657-1-.731-1.591C14 18.218 14 17.463 14 16.552v-.104c0-.91 0-1.665.073-2.246c.074-.591.242-1.18.73-1.59q.305-.256.677-.391c.6-.219 1.194-.07 1.744.162c.539.227 1.192.605 1.981 1.06m-2.564.322c-.442-.186-.59-.156-.647-.135a.8.8 0 0 0-.226.13c-.047.04-.147.153-.207.629S15.5 15.524 15.5 16.5s.001 1.635.061 2.111s.16.59.207.629a.8.8 0 0 0 .225.13c.058.02.206.05.648-.135c.442-.186 1.014-.515 1.859-1.003s1.416-.819 1.798-1.108s.43-.433.44-.494a.8.8 0 0 0 0-.26c-.01-.06-.058-.204-.44-.494s-.953-.62-1.798-1.108s-1.417-.817-1.859-1.003M2.25 14a.75.75 0 0 1 .75-.75h8a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75m0 4a.75.75 0 0 1 .75-.75h8a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75" clipRule="evenodd"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M2.25 6A.75.75 0 0 1 3 5.25h18a.75.75 0 0 1 0 1.5H3A.75.75 0 0 1 2.25 6m0 4A.75.75 0 0 1 3 9.25h18a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75m16.955 3.443l.09.052c.789.455 1.442.833 1.909 1.186c.475.36.901.8 1.012 1.428c.045.259.045.523 0 .782c-.111.628-.537 1.068-1.012 1.428c-.467.353-1.12.73-1.91 1.186l-.089.052c-.788.455-1.442.833-1.981 1.06c-.55.232-1.144.38-1.744.162a2.3 2.3 0 0 1-.676-.39c-.49-.41-.657-1-.731-1.591C14 18.218 14 17.463 14 16.552v-.104c0-.91 0-1.665.073-2.246c.074-.591.242-1.18.73-1.59q.305-.256.677-.391c.6-.219 1.194-.07 1.744.162c.539.227 1.192.605 1.981 1.06m-2.564.322c-.442-.186-.59-.156-.647-.135a.8.8 0 0 0-.226.13c-.047.04-.147.153-.207.629S15.5 15.524 15.5 16.5s.001 1.635.061 2.111s.16.59.207.629a.8.8 0 0 0 .225.13c.058.02.206.05.648-.135c.442-.186 1.014-.515 1.859-1.003s1.416-.819 1.798-1.108s.43-.433.44-.494a.8.8 0 0 0 0-.26c-.01-.06-.058-.204-.44-.494s-.953-.62-1.798-1.108s-1.417-.817-1.859-1.003M2.25 14a.75.75 0 0 1 .75-.75h8a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75m0 4a.75.75 0 0 1 .75-.75h8a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75" clip-rule="evenodd"/></svg> </template>
CSS
.icon-playlist {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M2.25%206A.75.75%200%200%201%203%205.25h18a.75.75%200%200%201%200%201.5H3A.75.75%200%200%201%202.25%206m0%204A.75.75%200%200%201%203%209.25h18a.75.75%200%200%201%200%201.5H3a.75.75%200%200%201-.75-.75m16.955%203.443l.09.052c.789.455%201.442.833%201.909%201.186c.475.36.901.8%201.012%201.428c.045.259.045.523%200%20.782c-.111.628-.537%201.068-1.012%201.428c-.467.353-1.12.73-1.91%201.186l-.089.052c-.788.455-1.442.833-1.981%201.06c-.55.232-1.144.38-1.744.162a2.3%202.3%200%200%201-.676-.39c-.49-.41-.657-1-.731-1.591C14%2018.218%2014%2017.463%2014%2016.552v-.104c0-.91%200-1.665.073-2.246c.074-.591.242-1.18.73-1.59q.305-.256.677-.391c.6-.219%201.194-.07%201.744.162c.539.227%201.192.605%201.981%201.06m-2.564.322c-.442-.186-.59-.156-.647-.135a.8.8%200%200%200-.226.13c-.047.04-.147.153-.207.629S15.5%2015.524%2015.5%2016.5s.001%201.635.061%202.111s.16.59.207.629a.8.8%200%200%200%20.225.13c.058.02.206.05.648-.135c.442-.186%201.014-.515%201.859-1.003s1.416-.819%201.798-1.108s.43-.433.44-.494a.8.8%200%200%200%200-.26c-.01-.06-.058-.204-.44-.494s-.953-.62-1.798-1.108s-1.417-.817-1.859-1.003M2.25%2014a.75.75%200%200%201%20.75-.75h8a.75.75%200%200%201%200%201.5H3a.75.75%200%200%201-.75-.75m0%204a.75.75%200%200%201%20.75-.75h8a.75.75%200%200%201%200%201.5H3a.75.75%200%200%201-.75-.75%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M2.25%206A.75.75%200%200%201%203%205.25h18a.75.75%200%200%201%200%201.5H3A.75.75%200%200%201%202.25%206m0%204A.75.75%200%200%201%203%209.25h18a.75.75%200%200%201%200%201.5H3a.75.75%200%200%201-.75-.75m16.955%203.443l.09.052c.789.455%201.442.833%201.909%201.186c.475.36.901.8%201.012%201.428c.045.259.045.523%200%20.782c-.111.628-.537%201.068-1.012%201.428c-.467.353-1.12.73-1.91%201.186l-.089.052c-.788.455-1.442.833-1.981%201.06c-.55.232-1.144.38-1.744.162a2.3%202.3%200%200%201-.676-.39c-.49-.41-.657-1-.731-1.591C14%2018.218%2014%2017.463%2014%2016.552v-.104c0-.91%200-1.665.073-2.246c.074-.591.242-1.18.73-1.59q.305-.256.677-.391c.6-.219%201.194-.07%201.744.162c.539.227%201.192.605%201.981%201.06m-2.564.322c-.442-.186-.59-.156-.647-.135a.8.8%200%200%200-.226.13c-.047.04-.147.153-.207.629S15.5%2015.524%2015.5%2016.5s.001%201.635.061%202.111s.16.59.207.629a.8.8%200%200%200%20.225.13c.058.02.206.05.648-.135c.442-.186%201.014-.515%201.859-1.003s1.416-.819%201.798-1.108s.43-.433.44-.494a.8.8%200%200%200%200-.26c-.01-.06-.058-.204-.44-.494s-.953-.62-1.798-1.108s-1.417-.817-1.859-1.003M2.25%2014a.75.75%200%200%201%20.75-.75h8a.75.75%200%200%201%200%201.5H3a.75.75%200%200%201-.75-.75m0%204a.75.75%200%200%201%20.75-.75h8a.75.75%200%200%201%200%201.5H3a.75.75%200%200%201-.75-.75%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/reicon/playlist.svg?color=%231a73e8&size=48
