variable icon

variable-16-solid from HeroIcons by Refactoring UI Inc · Solid 16x16 · MIT Free for personal and commercial use.

Name: variable-16-solid
Set: HeroIcons
Style: Solid 16x16
Viewbox: 16×16
License: MIT

3 other variants in HeroIcons

variable variable-20-solid variable-solid

The same icon in other sets

variableHuge Icons variableLucide variableMaterial Design Icons variableTabler Icons

Use the variable icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M3.38 3.012a.75.75 0 1 0-1.408-.516A16 16 0 0 0 1 8c0 1.932.343 3.786.972 5.503a.75.75 0 0 0 1.408-.516A14.5 14.5 0 0 1 2.5 8c0-1.754.311-3.434.88-4.988m9.24 0a.75.75 0 1 1 1.408-.516A16 16 0 0 1 15 8a16 16 0 0 1-.972 5.503a.75.75 0 0 1-1.408-.516c.569-1.554.88-3.233.88-4.987s-.311-3.434-.88-4.988M6.523 4.785a.75.75 0 0 1 .898.38l.758 1.515l.812-.902a2.38 2.38 0 0 1 2.486-.674a.75.75 0 1 1-.454 1.429a.88.88 0 0 0-.918.249L8.9 8.122l.734 1.468l.388-.124a.75.75 0 0 1 .457 1.428l-1 .32a.75.75 0 0 1-.899-.379L7.821 9.32l-.811.901a2.37 2.37 0 0 1-2.489.673a.75.75 0 0 1 .458-1.428a.87.87 0 0 0 .916-.248L7.1 7.878L6.366 6.41l-.389.124a.75.75 0 1 1-.454-1.43z"/></svg>

React

import type { SVGProps } from "react";

export function HeroiconsVariable16Solid(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M3.38 3.012a.75.75 0 1 0-1.408-.516A16 16 0 0 0 1 8c0 1.932.343 3.786.972 5.503a.75.75 0 0 0 1.408-.516A14.5 14.5 0 0 1 2.5 8c0-1.754.311-3.434.88-4.988m9.24 0a.75.75 0 1 1 1.408-.516A16 16 0 0 1 15 8a16 16 0 0 1-.972 5.503a.75.75 0 0 1-1.408-.516c.569-1.554.88-3.233.88-4.987s-.311-3.434-.88-4.988M6.523 4.785a.75.75 0 0 1 .898.38l.758 1.515l.812-.902a2.38 2.38 0 0 1 2.486-.674a.75.75 0 1 1-.454 1.429a.88.88 0 0 0-.918.249L8.9 8.122l.734 1.468l.388-.124a.75.75 0 0 1 .457 1.428l-1 .32a.75.75 0 0 1-.899-.379L7.821 9.32l-.811.901a2.37 2.37 0 0 1-2.489.673a.75.75 0 0 1 .458-1.428a.87.87 0 0 0 .916-.248L7.1 7.878L6.366 6.41l-.389.124a.75.75 0 1 1-.454-1.43z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M3.38 3.012a.75.75 0 1 0-1.408-.516A16 16 0 0 0 1 8c0 1.932.343 3.786.972 5.503a.75.75 0 0 0 1.408-.516A14.5 14.5 0 0 1 2.5 8c0-1.754.311-3.434.88-4.988m9.24 0a.75.75 0 1 1 1.408-.516A16 16 0 0 1 15 8a16 16 0 0 1-.972 5.503a.75.75 0 0 1-1.408-.516c.569-1.554.88-3.233.88-4.987s-.311-3.434-.88-4.988M6.523 4.785a.75.75 0 0 1 .898.38l.758 1.515l.812-.902a2.38 2.38 0 0 1 2.486-.674a.75.75 0 1 1-.454 1.429a.88.88 0 0 0-.918.249L8.9 8.122l.734 1.468l.388-.124a.75.75 0 0 1 .457 1.428l-1 .32a.75.75 0 0 1-.899-.379L7.821 9.32l-.811.901a2.37 2.37 0 0 1-2.489.673a.75.75 0 0 1 .458-1.428a.87.87 0 0 0 .916-.248L7.1 7.878L6.366 6.41l-.389.124a.75.75 0 1 1-.454-1.43z"/></svg>
</template>

CSS

.icon-variable-16-solid {
  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%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M3.38%203.012a.75.75%200%201%200-1.408-.516A16%2016%200%200%200%201%208c0%201.932.343%203.786.972%205.503a.75.75%200%200%200%201.408-.516A14.5%2014.5%200%200%201%202.5%208c0-1.754.311-3.434.88-4.988m9.24%200a.75.75%200%201%201%201.408-.516A16%2016%200%200%201%2015%208a16%2016%200%200%201-.972%205.503a.75.75%200%200%201-1.408-.516c.569-1.554.88-3.233.88-4.987s-.311-3.434-.88-4.988M6.523%204.785a.75.75%200%200%201%20.898.38l.758%201.515l.812-.902a2.38%202.38%200%200%201%202.486-.674a.75.75%200%201%201-.454%201.429a.88.88%200%200%200-.918.249L8.9%208.122l.734%201.468l.388-.124a.75.75%200%200%201%20.457%201.428l-1%20.32a.75.75%200%200%201-.899-.379L7.821%209.32l-.811.901a2.37%202.37%200%200%201-2.489.673a.75.75%200%200%201%20.458-1.428a.87.87%200%200%200%20.916-.248L7.1%207.878L6.366%206.41l-.389.124a.75.75%200%201%201-.454-1.43z%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%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M3.38%203.012a.75.75%200%201%200-1.408-.516A16%2016%200%200%200%201%208c0%201.932.343%203.786.972%205.503a.75.75%200%200%200%201.408-.516A14.5%2014.5%200%200%201%202.5%208c0-1.754.311-3.434.88-4.988m9.24%200a.75.75%200%201%201%201.408-.516A16%2016%200%200%201%2015%208a16%2016%200%200%201-.972%205.503a.75.75%200%200%201-1.408-.516c.569-1.554.88-3.233.88-4.987s-.311-3.434-.88-4.988M6.523%204.785a.75.75%200%200%201%20.898.38l.758%201.515l.812-.902a2.38%202.38%200%200%201%202.486-.674a.75.75%200%201%201-.454%201.429a.88.88%200%200%200-.918.249L8.9%208.122l.734%201.468l.388-.124a.75.75%200%200%201%20.457%201.428l-1%20.32a.75.75%200%200%201-.899-.379L7.821%209.32l-.811.901a2.37%202.37%200%200%201-2.489.673a.75.75%200%200%201%20.458-1.428a.87.87%200%200%200%20.916-.248L7.1%207.878L6.366%206.41l-.389.124a.75.75%200%201%201-.454-1.43z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/heroicons/variable-16-solid.svg?color=%231a73e8&size=48