text variable front icon
text-variable-front from Huge Icons by Hugeicons · Stroke · MIT Free for personal and commercial use.
- Name
- text-variable-front
- Set
- Huge Icons
- Style
- Stroke
- Viewbox
- 24×24
- License
- MIT
Related icons in Huge Icons
text-align-centertext-align-endtext-align-justifytext-align-justify-centertext-align-justify-lefttext-align-justify-righttext-align-lefttext-align-left-01text-align-righttext-align-right-01text-align-starttext-all-capstext-boldtext-centerline-center-toptext-centerline-lefttext-centerline-middletext-centerline-righttext-checktext-circletext-cleartext-colortext-creationtext-firstline-lefttext-firstline-right
Use the text variable front icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M7.5 15h-3M6 3v12M6 3c-.793 0-1.811.114-2.622.227c-.343.048-.514.072-.666.156c-.316.175-.57.558-.666 1.004C2 4.6 2 4.845 2 5.333M6 3c.793 0 1.811.114 2.622.227c.343.048.514.072.666.156c.316.175.57.558.666 1.004c.046.214.046.458.046.946M19.5 15h-3M18 3v12m0-12c-.793 0-1.811.114-2.622.227c-.343.048-.514.072-.666.156c-.316.175-.57.558-.666 1.004C14 4.6 14 4.845 14 5.333M18 3c.793 0 1.811.114 2.622.227c.343.048.514.072.666.156c.316.175.57.558.666 1.004c.046.214.046.458.046.946"/><path stroke-linejoin="round" d="M2 19h8m4 0h8"/><circle cx="12" cy="19" r="2" stroke-linejoin="round"/></g></svg>
React
import type { SVGProps } from "react";
export function HugeiconsTextVariableFront(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeWidth="1.5"><path d="M7.5 15h-3M6 3v12M6 3c-.793 0-1.811.114-2.622.227c-.343.048-.514.072-.666.156c-.316.175-.57.558-.666 1.004C2 4.6 2 4.845 2 5.333M6 3c.793 0 1.811.114 2.622.227c.343.048.514.072.666.156c.316.175.57.558.666 1.004c.046.214.046.458.046.946M19.5 15h-3M18 3v12m0-12c-.793 0-1.811.114-2.622.227c-.343.048-.514.072-.666.156c-.316.175-.57.558-.666 1.004C14 4.6 14 4.845 14 5.333M18 3c.793 0 1.811.114 2.622.227c.343.048.514.072.666.156c.316.175.57.558.666 1.004c.046.214.046.458.046.946"/><path strokeLinejoin="round" d="M2 19h8m4 0h8"/><circle cx="12" cy="19" r="2" strokeLinejoin="round"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M7.5 15h-3M6 3v12M6 3c-.793 0-1.811.114-2.622.227c-.343.048-.514.072-.666.156c-.316.175-.57.558-.666 1.004C2 4.6 2 4.845 2 5.333M6 3c.793 0 1.811.114 2.622.227c.343.048.514.072.666.156c.316.175.57.558.666 1.004c.046.214.046.458.046.946M19.5 15h-3M18 3v12m0-12c-.793 0-1.811.114-2.622.227c-.343.048-.514.072-.666.156c-.316.175-.57.558-.666 1.004C14 4.6 14 4.845 14 5.333M18 3c.793 0 1.811.114 2.622.227c.343.048.514.072.666.156c.316.175.57.558.666 1.004c.046.214.046.458.046.946"/><path stroke-linejoin="round" d="M2 19h8m4 0h8"/><circle cx="12" cy="19" r="2" stroke-linejoin="round"/></g></svg> </template>
CSS
.icon-text-variable-front {
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%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M7.5%2015h-3M6%203v12M6%203c-.793%200-1.811.114-2.622.227c-.343.048-.514.072-.666.156c-.316.175-.57.558-.666%201.004C2%204.6%202%204.845%202%205.333M6%203c.793%200%201.811.114%202.622.227c.343.048.514.072.666.156c.316.175.57.558.666%201.004c.046.214.046.458.046.946M19.5%2015h-3M18%203v12m0-12c-.793%200-1.811.114-2.622.227c-.343.048-.514.072-.666.156c-.316.175-.57.558-.666%201.004C14%204.6%2014%204.845%2014%205.333M18%203c.793%200%201.811.114%202.622.227c.343.048.514.072.666.156c.316.175.57.558.666%201.004c.046.214.046.458.046.946%22%2F%3E%3Cpath%20stroke-linejoin%3D%22round%22%20d%3D%22M2%2019h8m4%200h8%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2219%22%20r%3D%222%22%20stroke-linejoin%3D%22round%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%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M7.5%2015h-3M6%203v12M6%203c-.793%200-1.811.114-2.622.227c-.343.048-.514.072-.666.156c-.316.175-.57.558-.666%201.004C2%204.6%202%204.845%202%205.333M6%203c.793%200%201.811.114%202.622.227c.343.048.514.072.666.156c.316.175.57.558.666%201.004c.046.214.046.458.046.946M19.5%2015h-3M18%203v12m0-12c-.793%200-1.811.114-2.622.227c-.343.048-.514.072-.666.156c-.316.175-.57.558-.666%201.004C14%204.6%2014%204.845%2014%205.333M18%203c.793%200%201.811.114%202.622.227c.343.048.514.072.666.156c.316.175.57.558.666%201.004c.046.214.046.458.046.946%22%2F%3E%3Cpath%20stroke-linejoin%3D%22round%22%20d%3D%22M2%2019h8m4%200h8%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2219%22%20r%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/hugeicons/text-variable-front.svg?color=%231a73e8&size=48
