slider vertical minimalistic icon

slider-vertical-minimalistic-bold-duotone from Solar by 480 Design · Bold Duotone · UI · CC-BY-4.0 Attribution required.

Name
slider-vertical-minimalistic-bold-duotone
Set
Solar
Style
Bold Duotone
Category
UI
Viewbox
24×24
License
CC BY 4.0

5 other variants in Solar

More ui icons from Solar

Use the slider vertical minimalistic icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path d="M5.84619 8C5.84619 5.17157 5.84619 3.75736 6.7474 2.87868C7.64861 2 9.09909 2 12 2C14.901 2 16.3515 2 17.2527 2.87868C18.1539 3.75736 18.1539 5.17157 18.1539 8V16C18.1539 18.8284 18.1539 20.2426 17.2527 21.1213C16.3515 22 14.901 22 12 22C9.09909 22 7.64861 22 6.7474 21.1213C5.84619 20.2426 5.84619 18.8284 5.84619 16V8Z"/><path fill-rule="evenodd" d="M2.76923 3.75C3.19407 3.75 3.53846 4.08579 3.53846 4.5V19.5C3.53846 19.9142 3.19407 20.25 2.76923 20.25C2.3444 20.25 2 19.9142 2 19.5V4.5C2 4.08579 2.3444 3.75 2.76923 3.75ZM21.2308 3.75C21.6556 3.75 22 4.08579 22 4.5V19.5C22 19.9142 21.6556 20.25 21.2308 20.25C20.8059 20.25 20.4615 19.9142 20.4615 19.5V4.5C20.4615 4.08579 20.8059 3.75 21.2308 3.75Z" clip-rule="evenodd" opacity=".5"/></g></svg>

React

import type { SVGProps } from "react";

export function SolarSliderVerticalMinimalisticBoldDuotone(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path d="M5.84619 8C5.84619 5.17157 5.84619 3.75736 6.7474 2.87868C7.64861 2 9.09909 2 12 2C14.901 2 16.3515 2 17.2527 2.87868C18.1539 3.75736 18.1539 5.17157 18.1539 8V16C18.1539 18.8284 18.1539 20.2426 17.2527 21.1213C16.3515 22 14.901 22 12 22C9.09909 22 7.64861 22 6.7474 21.1213C5.84619 20.2426 5.84619 18.8284 5.84619 16V8Z"/><path fillRule="evenodd" d="M2.76923 3.75C3.19407 3.75 3.53846 4.08579 3.53846 4.5V19.5C3.53846 19.9142 3.19407 20.25 2.76923 20.25C2.3444 20.25 2 19.9142 2 19.5V4.5C2 4.08579 2.3444 3.75 2.76923 3.75ZM21.2308 3.75C21.6556 3.75 22 4.08579 22 4.5V19.5C22 19.9142 21.6556 20.25 21.2308 20.25C20.8059 20.25 20.4615 19.9142 20.4615 19.5V4.5C20.4615 4.08579 20.8059 3.75 21.2308 3.75Z" clipRule="evenodd" opacity=".5"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path d="M5.84619 8C5.84619 5.17157 5.84619 3.75736 6.7474 2.87868C7.64861 2 9.09909 2 12 2C14.901 2 16.3515 2 17.2527 2.87868C18.1539 3.75736 18.1539 5.17157 18.1539 8V16C18.1539 18.8284 18.1539 20.2426 17.2527 21.1213C16.3515 22 14.901 22 12 22C9.09909 22 7.64861 22 6.7474 21.1213C5.84619 20.2426 5.84619 18.8284 5.84619 16V8Z"/><path fill-rule="evenodd" d="M2.76923 3.75C3.19407 3.75 3.53846 4.08579 3.53846 4.5V19.5C3.53846 19.9142 3.19407 20.25 2.76923 20.25C2.3444 20.25 2 19.9142 2 19.5V4.5C2 4.08579 2.3444 3.75 2.76923 3.75ZM21.2308 3.75C21.6556 3.75 22 4.08579 22 4.5V19.5C22 19.9142 21.6556 20.25 21.2308 20.25C20.8059 20.25 20.4615 19.9142 20.4615 19.5V4.5C20.4615 4.08579 20.8059 3.75 21.2308 3.75Z" clip-rule="evenodd" opacity=".5"/></g></svg>
</template>

CSS

.icon-slider-vertical-minimalistic-bold-duotone {
  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%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M5.84619%208C5.84619%205.17157%205.84619%203.75736%206.7474%202.87868C7.64861%202%209.09909%202%2012%202C14.901%202%2016.3515%202%2017.2527%202.87868C18.1539%203.75736%2018.1539%205.17157%2018.1539%208V16C18.1539%2018.8284%2018.1539%2020.2426%2017.2527%2021.1213C16.3515%2022%2014.901%2022%2012%2022C9.09909%2022%207.64861%2022%206.7474%2021.1213C5.84619%2020.2426%205.84619%2018.8284%205.84619%2016V8Z%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M2.76923%203.75C3.19407%203.75%203.53846%204.08579%203.53846%204.5V19.5C3.53846%2019.9142%203.19407%2020.25%202.76923%2020.25C2.3444%2020.25%202%2019.9142%202%2019.5V4.5C2%204.08579%202.3444%203.75%202.76923%203.75ZM21.2308%203.75C21.6556%203.75%2022%204.08579%2022%204.5V19.5C22%2019.9142%2021.6556%2020.25%2021.2308%2020.25C20.8059%2020.25%2020.4615%2019.9142%2020.4615%2019.5V4.5C20.4615%204.08579%2020.8059%203.75%2021.2308%203.75Z%22%20clip-rule%3D%22evenodd%22%20opacity%3D%22.5%22%2F%3E%3C%2Fg%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%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M5.84619%208C5.84619%205.17157%205.84619%203.75736%206.7474%202.87868C7.64861%202%209.09909%202%2012%202C14.901%202%2016.3515%202%2017.2527%202.87868C18.1539%203.75736%2018.1539%205.17157%2018.1539%208V16C18.1539%2018.8284%2018.1539%2020.2426%2017.2527%2021.1213C16.3515%2022%2014.901%2022%2012%2022C9.09909%2022%207.64861%2022%206.7474%2021.1213C5.84619%2020.2426%205.84619%2018.8284%205.84619%2016V8Z%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M2.76923%203.75C3.19407%203.75%203.53846%204.08579%203.53846%204.5V19.5C3.53846%2019.9142%203.19407%2020.25%202.76923%2020.25C2.3444%2020.25%202%2019.9142%202%2019.5V4.5C2%204.08579%202.3444%203.75%202.76923%203.75ZM21.2308%203.75C21.6556%203.75%2022%204.08579%2022%204.5V19.5C22%2019.9142%2021.6556%2020.25%2021.2308%2020.25C20.8059%2020.25%2020.4615%2019.9142%2020.4615%2019.5V4.5C20.4615%204.08579%2020.8059%203.75%2021.2308%203.75Z%22%20clip-rule%3D%22evenodd%22%20opacity%3D%22.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/solar/slider-vertical-minimalistic-bold-duotone.svg?color=%231a73e8&size=48