hls icon

hls-rounded from Material Symbols Light by Google · Rounded · UI Actions · Apache-2.0 Free for personal and commercial use.

Name: hls-rounded
Set: Material Symbols Light
Style: Rounded
Category: UI Actions
Viewbox: 24×24
License: Apache 2.0
Aliases: hls-outline-rounded

2 other variants in Material Symbols Light

hls hls-sharp

The same icon in other sets

hlsMaterial Symbols

More ui actions icons from Material Symbols Light

Use the hls icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M3.308 14.25v-4.5q0-.192.125-.317t.316-.125t.317.125t.126.317v1.558h2.616V9.75q0-.192.125-.317t.316-.125t.317.125t.126.317v4.5q0 .192-.125.317t-.316.125t-.317-.125t-.126-.317v-2.058H4.192v2.058q0 .192-.125.317t-.316.125t-.317-.125t-.126-.317m6.923-.173V9.75q0-.192.125-.317t.316-.125t.317.125t.126.317v4.058h2.289q.191 0 .317.125q.125.125.125.316q0 .192-.125.317q-.126.126-.317.126h-2.558q-.248 0-.432-.183q-.183-.184-.183-.432m6.346.615q-.327 0-.548-.22q-.221-.222-.221-.549v-.538q0-.143.13-.226l.254-.159h.116q.153 0 .269.116q.115.115.115.269v.423h2.616v-1.5h-2.885q-.261 0-.438-.177t-.177-.439v-1.615q0-.327.22-.548q.222-.221.549-.221h2.846q.327 0 .548.22q.221.222.221.549v.539q0 .142-.13.225l-.254.159h-.116q-.154 0-.269-.115q-.115-.116-.115-.27v-.423h-2.616v1.5h2.885q.262 0 .439.177q.176.177.176.439v1.615q0 .327-.22.548q-.222.221-.549.221z"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsLightHlsRounded(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="M3.308 14.25v-4.5q0-.192.125-.317t.316-.125t.317.125t.126.317v1.558h2.616V9.75q0-.192.125-.317t.316-.125t.317.125t.126.317v4.5q0 .192-.125.317t-.316.125t-.317-.125t-.126-.317v-2.058H4.192v2.058q0 .192-.125.317t-.316.125t-.317-.125t-.126-.317m6.923-.173V9.75q0-.192.125-.317t.316-.125t.317.125t.126.317v4.058h2.289q.191 0 .317.125q.125.125.125.316q0 .192-.125.317q-.126.126-.317.126h-2.558q-.248 0-.432-.183q-.183-.184-.183-.432m6.346.615q-.327 0-.548-.22q-.221-.222-.221-.549v-.538q0-.143.13-.226l.254-.159h.116q.153 0 .269.116q.115.115.115.269v.423h2.616v-1.5h-2.885q-.261 0-.438-.177t-.177-.439v-1.615q0-.327.22-.548q.222-.221.549-.221h2.846q.327 0 .548.22q.221.222.221.549v.539q0 .142-.13.225l-.254.159h-.116q-.154 0-.269-.115q-.115-.116-.115-.27v-.423h-2.616v1.5h2.885q.262 0 .439.177q.176.177.176.439v1.615q0 .327-.22.548q-.222.221-.549.221z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M3.308 14.25v-4.5q0-.192.125-.317t.316-.125t.317.125t.126.317v1.558h2.616V9.75q0-.192.125-.317t.316-.125t.317.125t.126.317v4.5q0 .192-.125.317t-.316.125t-.317-.125t-.126-.317v-2.058H4.192v2.058q0 .192-.125.317t-.316.125t-.317-.125t-.126-.317m6.923-.173V9.75q0-.192.125-.317t.316-.125t.317.125t.126.317v4.058h2.289q.191 0 .317.125q.125.125.125.316q0 .192-.125.317q-.126.126-.317.126h-2.558q-.248 0-.432-.183q-.183-.184-.183-.432m6.346.615q-.327 0-.548-.22q-.221-.222-.221-.549v-.538q0-.143.13-.226l.254-.159h.116q.153 0 .269.116q.115.115.115.269v.423h2.616v-1.5h-2.885q-.261 0-.438-.177t-.177-.439v-1.615q0-.327.22-.548q.222-.221.549-.221h2.846q.327 0 .548.22q.221.222.221.549v.539q0 .142-.13.225l-.254.159h-.116q-.154 0-.269-.115q-.115-.116-.115-.27v-.423h-2.616v1.5h2.885q.262 0 .439.177q.176.177.176.439v1.615q0 .327-.22.548q-.222.221-.549.221z"/></svg>
</template>

CSS

.icon-hls-rounded {
  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%22M3.308%2014.25v-4.5q0-.192.125-.317t.316-.125t.317.125t.126.317v1.558h2.616V9.75q0-.192.125-.317t.316-.125t.317.125t.126.317v4.5q0%20.192-.125.317t-.316.125t-.317-.125t-.126-.317v-2.058H4.192v2.058q0%20.192-.125.317t-.316.125t-.317-.125t-.126-.317m6.923-.173V9.75q0-.192.125-.317t.316-.125t.317.125t.126.317v4.058h2.289q.191%200%20.317.125q.125.125.125.316q0%20.192-.125.317q-.126.126-.317.126h-2.558q-.248%200-.432-.183q-.183-.184-.183-.432m6.346.615q-.327%200-.548-.22q-.221-.222-.221-.549v-.538q0-.143.13-.226l.254-.159h.116q.153%200%20.269.116q.115.115.115.269v.423h2.616v-1.5h-2.885q-.261%200-.438-.177t-.177-.439v-1.615q0-.327.22-.548q.222-.221.549-.221h2.846q.327%200%20.548.22q.221.222.221.549v.539q0%20.142-.13.225l-.254.159h-.116q-.154%200-.269-.115q-.115-.116-.115-.27v-.423h-2.616v1.5h2.885q.262%200%20.439.177q.176.177.176.439v1.615q0%20.327-.22.548q-.222.221-.549.221z%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%22M3.308%2014.25v-4.5q0-.192.125-.317t.316-.125t.317.125t.126.317v1.558h2.616V9.75q0-.192.125-.317t.316-.125t.317.125t.126.317v4.5q0%20.192-.125.317t-.316.125t-.317-.125t-.126-.317v-2.058H4.192v2.058q0%20.192-.125.317t-.316.125t-.317-.125t-.126-.317m6.923-.173V9.75q0-.192.125-.317t.316-.125t.317.125t.126.317v4.058h2.289q.191%200%20.317.125q.125.125.125.316q0%20.192-.125.317q-.126.126-.317.126h-2.558q-.248%200-.432-.183q-.183-.184-.183-.432m6.346.615q-.327%200-.548-.22q-.221-.222-.221-.549v-.538q0-.143.13-.226l.254-.159h.116q.153%200%20.269.116q.115.115.115.269v.423h2.616v-1.5h-2.885q-.261%200-.438-.177t-.177-.439v-1.615q0-.327.22-.548q.222-.221.549-.221h2.846q.327%200%20.548.22q.221.222.221.549v.539q0%20.142-.13.225l-.254.159h-.116q-.154%200-.269-.115q-.115-.116-.115-.27v-.423h-2.616v1.5h2.885q.262%200%20.439.177q.176.177.176.439v1.615q0%20.327-.22.548q-.222.221-.549.221z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols-light/hls-rounded.svg?color=%231a73e8&size=48