slider alt icon

slider-alt from BoxIcons v2 by Boxicons · Regular · MIT Free for personal and commercial use.

Name
slider-alt
Set
BoxIcons v2
Style
Regular
Viewbox
24×24
License
MIT
Aliases
bx-slider-alt

Use the slider alt icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M7.5 14.5c-1.58 0-2.903 1.06-3.337 2.5H2v2h2.163c.434 1.44 1.757 2.5 3.337 2.5s2.903-1.06 3.337-2.5H22v-2H10.837c-.434-1.44-1.757-2.5-3.337-2.5m0 5c-.827 0-1.5-.673-1.5-1.5s.673-1.5 1.5-1.5S9 17.173 9 18s-.673 1.5-1.5 1.5m9-11c-1.58 0-2.903 1.06-3.337 2.5H2v2h11.163c.434 1.44 1.757 2.5 3.337 2.5s2.903-1.06 3.337-2.5H22v-2h-2.163c-.434-1.44-1.757-2.5-3.337-2.5m0 5c-.827 0-1.5-.673-1.5-1.5s.673-1.5 1.5-1.5s1.5.673 1.5 1.5s-.673 1.5-1.5 1.5"/><path fill="currentColor" d="M12.837 5C12.403 3.56 11.08 2.5 9.5 2.5S6.597 3.56 6.163 5H2v2h4.163C6.597 8.44 7.92 9.5 9.5 9.5s2.903-1.06 3.337-2.5h9.288V5zM9.5 7.5C8.673 7.5 8 6.827 8 6s.673-1.5 1.5-1.5S11 5.173 11 6s-.673 1.5-1.5 1.5"/></svg>

React

import type { SVGProps } from "react";

export function BxSliderAlt(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" d="M7.5 14.5c-1.58 0-2.903 1.06-3.337 2.5H2v2h2.163c.434 1.44 1.757 2.5 3.337 2.5s2.903-1.06 3.337-2.5H22v-2H10.837c-.434-1.44-1.757-2.5-3.337-2.5m0 5c-.827 0-1.5-.673-1.5-1.5s.673-1.5 1.5-1.5S9 17.173 9 18s-.673 1.5-1.5 1.5m9-11c-1.58 0-2.903 1.06-3.337 2.5H2v2h11.163c.434 1.44 1.757 2.5 3.337 2.5s2.903-1.06 3.337-2.5H22v-2h-2.163c-.434-1.44-1.757-2.5-3.337-2.5m0 5c-.827 0-1.5-.673-1.5-1.5s.673-1.5 1.5-1.5s1.5.673 1.5 1.5s-.673 1.5-1.5 1.5"/><path fill="currentColor" d="M12.837 5C12.403 3.56 11.08 2.5 9.5 2.5S6.597 3.56 6.163 5H2v2h4.163C6.597 8.44 7.92 9.5 9.5 9.5s2.903-1.06 3.337-2.5h9.288V5zM9.5 7.5C8.673 7.5 8 6.827 8 6s.673-1.5 1.5-1.5S11 5.173 11 6s-.673 1.5-1.5 1.5"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M7.5 14.5c-1.58 0-2.903 1.06-3.337 2.5H2v2h2.163c.434 1.44 1.757 2.5 3.337 2.5s2.903-1.06 3.337-2.5H22v-2H10.837c-.434-1.44-1.757-2.5-3.337-2.5m0 5c-.827 0-1.5-.673-1.5-1.5s.673-1.5 1.5-1.5S9 17.173 9 18s-.673 1.5-1.5 1.5m9-11c-1.58 0-2.903 1.06-3.337 2.5H2v2h11.163c.434 1.44 1.757 2.5 3.337 2.5s2.903-1.06 3.337-2.5H22v-2h-2.163c-.434-1.44-1.757-2.5-3.337-2.5m0 5c-.827 0-1.5-.673-1.5-1.5s.673-1.5 1.5-1.5s1.5.673 1.5 1.5s-.673 1.5-1.5 1.5"/><path fill="currentColor" d="M12.837 5C12.403 3.56 11.08 2.5 9.5 2.5S6.597 3.56 6.163 5H2v2h4.163C6.597 8.44 7.92 9.5 9.5 9.5s2.903-1.06 3.337-2.5h9.288V5zM9.5 7.5C8.673 7.5 8 6.827 8 6s.673-1.5 1.5-1.5S11 5.173 11 6s-.673 1.5-1.5 1.5"/></svg>
</template>

CSS

.icon-slider-alt {
  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%20d%3D%22M7.5%2014.5c-1.58%200-2.903%201.06-3.337%202.5H2v2h2.163c.434%201.44%201.757%202.5%203.337%202.5s2.903-1.06%203.337-2.5H22v-2H10.837c-.434-1.44-1.757-2.5-3.337-2.5m0%205c-.827%200-1.5-.673-1.5-1.5s.673-1.5%201.5-1.5S9%2017.173%209%2018s-.673%201.5-1.5%201.5m9-11c-1.58%200-2.903%201.06-3.337%202.5H2v2h11.163c.434%201.44%201.757%202.5%203.337%202.5s2.903-1.06%203.337-2.5H22v-2h-2.163c-.434-1.44-1.757-2.5-3.337-2.5m0%205c-.827%200-1.5-.673-1.5-1.5s.673-1.5%201.5-1.5s1.5.673%201.5%201.5s-.673%201.5-1.5%201.5%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12.837%205C12.403%203.56%2011.08%202.5%209.5%202.5S6.597%203.56%206.163%205H2v2h4.163C6.597%208.44%207.92%209.5%209.5%209.5s2.903-1.06%203.337-2.5h9.288V5zM9.5%207.5C8.673%207.5%208%206.827%208%206s.673-1.5%201.5-1.5S11%205.173%2011%206s-.673%201.5-1.5%201.5%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%20d%3D%22M7.5%2014.5c-1.58%200-2.903%201.06-3.337%202.5H2v2h2.163c.434%201.44%201.757%202.5%203.337%202.5s2.903-1.06%203.337-2.5H22v-2H10.837c-.434-1.44-1.757-2.5-3.337-2.5m0%205c-.827%200-1.5-.673-1.5-1.5s.673-1.5%201.5-1.5S9%2017.173%209%2018s-.673%201.5-1.5%201.5m9-11c-1.58%200-2.903%201.06-3.337%202.5H2v2h11.163c.434%201.44%201.757%202.5%203.337%202.5s2.903-1.06%203.337-2.5H22v-2h-2.163c-.434-1.44-1.757-2.5-3.337-2.5m0%205c-.827%200-1.5-.673-1.5-1.5s.673-1.5%201.5-1.5s1.5.673%201.5%201.5s-.673%201.5-1.5%201.5%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12.837%205C12.403%203.56%2011.08%202.5%209.5%202.5S6.597%203.56%206.163%205H2v2h4.163C6.597%208.44%207.92%209.5%209.5%209.5s2.903-1.06%203.337-2.5h9.288V5zM9.5%207.5C8.673%207.5%208%206.827%208%206s.673-1.5%201.5-1.5S11%205.173%2011%206s-.673%201.5-1.5%201.5%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/bx/slider-alt.svg?color=%231a73e8&size=48