levels icon

levels from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.

Name
levels
Set
IonIcons
Style
Regular
Viewbox
512×512
License
MIT

Use the levels icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M127 99.2V80c0-8.8-7.2-16-16-16s-16 7.2-16 16v21.5c-8.5 5.8-14 15.5-14 26.5s5.5 20.7 14 26.5V432c0 8.8 7.2 16 16 16s16-7.2 16-16V156.8c10.7-5.2 18-16.1 18-28.8s-7.3-23.6-18-28.8z" fill="currentColor"/><path d="M223 292.9V80c0-8.8-7.2-16-16-16s-16 7.2-16 16v211.7c-10.1 5.4-17 16-17 28.3s6.9 22.9 17 28.3V432c0 8.8 7.2 16 16 16s16-7.2 16-16v-84.9c9-5.7 15-15.7 15-27.1s-6-21.4-15-27.1z" fill="currentColor"/><path d="M319 163.3V80c0-8.8-7.2-16-16-16s-16 7.2-16 16v83.3c-9.6 5.5-16 15.9-16 27.7s6.4 22.2 16 27.7V432c0 8.8 7.2 16 16 16s16-7.2 16-16V218.7c9.6-5.5 16-15.9 16-27.7s-6.4-22.2-16-27.7z" fill="currentColor"/><path d="M431 383c0-11.8-6.4-22.2-16-27.7V80c0-8.8-7.2-16-16-16s-16 7.2-16 16v275.3c-9.6 5.5-16 15.9-16 27.7s6.4 22.2 16 27.7V432c0 8.8 7.2 16 16 16s16-7.2 16-16v-21.3c9.6-5.5 16-15.9 16-27.7z" fill="currentColor"/></svg>

React

import type { SVGProps } from "react";

export function IonLevels(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M127 99.2V80c0-8.8-7.2-16-16-16s-16 7.2-16 16v21.5c-8.5 5.8-14 15.5-14 26.5s5.5 20.7 14 26.5V432c0 8.8 7.2 16 16 16s16-7.2 16-16V156.8c10.7-5.2 18-16.1 18-28.8s-7.3-23.6-18-28.8z" fill="currentColor"/><path d="M223 292.9V80c0-8.8-7.2-16-16-16s-16 7.2-16 16v211.7c-10.1 5.4-17 16-17 28.3s6.9 22.9 17 28.3V432c0 8.8 7.2 16 16 16s16-7.2 16-16v-84.9c9-5.7 15-15.7 15-27.1s-6-21.4-15-27.1z" fill="currentColor"/><path d="M319 163.3V80c0-8.8-7.2-16-16-16s-16 7.2-16 16v83.3c-9.6 5.5-16 15.9-16 27.7s6.4 22.2 16 27.7V432c0 8.8 7.2 16 16 16s16-7.2 16-16V218.7c9.6-5.5 16-15.9 16-27.7s-6.4-22.2-16-27.7z" fill="currentColor"/><path d="M431 383c0-11.8-6.4-22.2-16-27.7V80c0-8.8-7.2-16-16-16s-16 7.2-16 16v275.3c-9.6 5.5-16 15.9-16 27.7s6.4 22.2 16 27.7V432c0 8.8 7.2 16 16 16s16-7.2 16-16v-21.3c9.6-5.5 16-15.9 16-27.7z" fill="currentColor"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M127 99.2V80c0-8.8-7.2-16-16-16s-16 7.2-16 16v21.5c-8.5 5.8-14 15.5-14 26.5s5.5 20.7 14 26.5V432c0 8.8 7.2 16 16 16s16-7.2 16-16V156.8c10.7-5.2 18-16.1 18-28.8s-7.3-23.6-18-28.8z" fill="currentColor"/><path d="M223 292.9V80c0-8.8-7.2-16-16-16s-16 7.2-16 16v211.7c-10.1 5.4-17 16-17 28.3s6.9 22.9 17 28.3V432c0 8.8 7.2 16 16 16s16-7.2 16-16v-84.9c9-5.7 15-15.7 15-27.1s-6-21.4-15-27.1z" fill="currentColor"/><path d="M319 163.3V80c0-8.8-7.2-16-16-16s-16 7.2-16 16v83.3c-9.6 5.5-16 15.9-16 27.7s6.4 22.2 16 27.7V432c0 8.8 7.2 16 16 16s16-7.2 16-16V218.7c9.6-5.5 16-15.9 16-27.7s-6.4-22.2-16-27.7z" fill="currentColor"/><path d="M431 383c0-11.8-6.4-22.2-16-27.7V80c0-8.8-7.2-16-16-16s-16 7.2-16 16v275.3c-9.6 5.5-16 15.9-16 27.7s6.4 22.2 16 27.7V432c0 8.8 7.2 16 16 16s16-7.2 16-16v-21.3c9.6-5.5 16-15.9 16-27.7z" fill="currentColor"/></svg>
</template>

CSS

.icon-levels {
  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%20512%20512%22%3E%3Cpath%20d%3D%22M127%2099.2V80c0-8.8-7.2-16-16-16s-16%207.2-16%2016v21.5c-8.5%205.8-14%2015.5-14%2026.5s5.5%2020.7%2014%2026.5V432c0%208.8%207.2%2016%2016%2016s16-7.2%2016-16V156.8c10.7-5.2%2018-16.1%2018-28.8s-7.3-23.6-18-28.8z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M223%20292.9V80c0-8.8-7.2-16-16-16s-16%207.2-16%2016v211.7c-10.1%205.4-17%2016-17%2028.3s6.9%2022.9%2017%2028.3V432c0%208.8%207.2%2016%2016%2016s16-7.2%2016-16v-84.9c9-5.7%2015-15.7%2015-27.1s-6-21.4-15-27.1z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M319%20163.3V80c0-8.8-7.2-16-16-16s-16%207.2-16%2016v83.3c-9.6%205.5-16%2015.9-16%2027.7s6.4%2022.2%2016%2027.7V432c0%208.8%207.2%2016%2016%2016s16-7.2%2016-16V218.7c9.6-5.5%2016-15.9%2016-27.7s-6.4-22.2-16-27.7z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M431%20383c0-11.8-6.4-22.2-16-27.7V80c0-8.8-7.2-16-16-16s-16%207.2-16%2016v275.3c-9.6%205.5-16%2015.9-16%2027.7s6.4%2022.2%2016%2027.7V432c0%208.8%207.2%2016%2016%2016s16-7.2%2016-16v-21.3c9.6-5.5%2016-15.9%2016-27.7z%22%20fill%3D%22currentColor%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%20512%20512%22%3E%3Cpath%20d%3D%22M127%2099.2V80c0-8.8-7.2-16-16-16s-16%207.2-16%2016v21.5c-8.5%205.8-14%2015.5-14%2026.5s5.5%2020.7%2014%2026.5V432c0%208.8%207.2%2016%2016%2016s16-7.2%2016-16V156.8c10.7-5.2%2018-16.1%2018-28.8s-7.3-23.6-18-28.8z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M223%20292.9V80c0-8.8-7.2-16-16-16s-16%207.2-16%2016v211.7c-10.1%205.4-17%2016-17%2028.3s6.9%2022.9%2017%2028.3V432c0%208.8%207.2%2016%2016%2016s16-7.2%2016-16v-84.9c9-5.7%2015-15.7%2015-27.1s-6-21.4-15-27.1z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M319%20163.3V80c0-8.8-7.2-16-16-16s-16%207.2-16%2016v83.3c-9.6%205.5-16%2015.9-16%2027.7s6.4%2022.2%2016%2027.7V432c0%208.8%207.2%2016%2016%2016s16-7.2%2016-16V218.7c9.6-5.5%2016-15.9%2016-27.7s-6.4-22.2-16-27.7z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M431%20383c0-11.8-6.4-22.2-16-27.7V80c0-8.8-7.2-16-16-16s-16%207.2-16%2016v275.3c-9.6%205.5-16%2015.9-16%2027.7s6.4%2022.2%2016%2027.7V432c0%208.8%207.2%2016%2016%2016s16-7.2%2016-16v-21.3c9.6-5.5%2016-15.9%2016-27.7z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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