opacity icon

opacity from Material Symbols by Google · Regular · Images · Apache-2.0 Free for personal and commercial use.

Name: opacity
Set: Material Symbols
Style: Regular
Category: Images
Viewbox: 24×24
License: Apache 2.0
Aliases: opacity-outline, opacity-outline-sharp, opacity-sharp

1 other variant in Material Symbols

The same icon in other sets

opacityCarbon opacityMaterial Symbols Light opacityMaterial Design Icons opacityRadix Icons

More images icons from Material Symbols

10mp 11mp 12mp 13mp 14mp 15mp 16mp 17mp 18mp 19mp 20mp 21mp 22mp 23mp 24fps-select 24mp 2mp 30fps-select 3mp 4mp 50mp 5mp 60fps-select 6mp

Use the opacity icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M6.338 18.7Q4 16.4 4 13.1q0-1.625.625-3.037T6.35 7.55L12 2l5.65 5.55q1.1 1.1 1.725 2.513T20 13.1q0 3.3-2.337 5.6T12 21t-5.663-2.3M6.05 14H17.9q.3-1.8-.337-3.075T16.25 9L12 4.8L7.75 9q-.675.65-1.325 1.925T6.05 14"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsOpacity(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="M6.338 18.7Q4 16.4 4 13.1q0-1.625.625-3.037T6.35 7.55L12 2l5.65 5.55q1.1 1.1 1.725 2.513T20 13.1q0 3.3-2.337 5.6T12 21t-5.663-2.3M6.05 14H17.9q.3-1.8-.337-3.075T16.25 9L12 4.8L7.75 9q-.675.65-1.325 1.925T6.05 14"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M6.338 18.7Q4 16.4 4 13.1q0-1.625.625-3.037T6.35 7.55L12 2l5.65 5.55q1.1 1.1 1.725 2.513T20 13.1q0 3.3-2.337 5.6T12 21t-5.663-2.3M6.05 14H17.9q.3-1.8-.337-3.075T16.25 9L12 4.8L7.75 9q-.675.65-1.325 1.925T6.05 14"/></svg>
</template>

CSS

.icon-opacity {
  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%22M6.338%2018.7Q4%2016.4%204%2013.1q0-1.625.625-3.037T6.35%207.55L12%202l5.65%205.55q1.1%201.1%201.725%202.513T20%2013.1q0%203.3-2.337%205.6T12%2021t-5.663-2.3M6.05%2014H17.9q.3-1.8-.337-3.075T16.25%209L12%204.8L7.75%209q-.675.65-1.325%201.925T6.05%2014%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%22M6.338%2018.7Q4%2016.4%204%2013.1q0-1.625.625-3.037T6.35%207.55L12%202l5.65%205.55q1.1%201.1%201.725%202.513T20%2013.1q0%203.3-2.337%205.6T12%2021t-5.663-2.3M6.05%2014H17.9q.3-1.8-.337-3.075T16.25%209L12%204.8L7.75%209q-.675.65-1.325%201.925T6.05%2014%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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