Gentleface › Development › variable
variable icon
variableVariable: variable, template variable, merge field, dynamic field. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.
Code line-round
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M3.824 4.206C3.275 5.235 3 6.333 3 7.5C3 8.667 3.275 9.765 3.824 10.794C4.312 11.709 4.97 12.478 5.8 13.1C5.913 13.185 5.979 13.294 5.998 13.429C6.017 13.564 5.985 13.687 5.9 13.8C5.817 13.91 5.707 13.975 5.571 13.995C5.434 14.014 5.31 13.983 5.2 13.9C4.252 13.189 3.499 12.31 2.941 11.265C2.314 10.088 2 8.833 2 7.5C2 6.167 2.314 4.912 2.941 3.735C3.499 2.69 4.252 1.811 5.2 1.1C5.313 1.015 5.436 0.983 5.571 1.002C5.706 1.021 5.815 1.087 5.9 1.2C5.983 1.31 6.014 1.434 5.995 1.571C5.975 1.707 5.91 1.817 5.8 1.9C4.97 2.522 4.312 3.291 3.824 4.206ZM14 7.5C14 8.833 13.686 10.088 13.059 11.265C12.501 12.31 11.748 13.189 10.8 13.9C10.69 13.983 10.566 14.014 10.429 13.995C10.293 13.975 10.183 13.91 10.1 13.8C10.017 13.69 9.985 13.566 10.005 13.429C10.025 13.293 10.09 13.183 10.2 13.1C11.03 12.478 11.688 11.709 12.176 10.794C12.725 9.765 13 8.667 13 7.5C13 6.333 12.725 5.235 12.176 4.206C11.688 3.291 11.03 2.522 10.2 1.9C10.087 1.815 10.021 1.706 10.002 1.571C9.983 1.436 10.015 1.313 10.1 1.2C10.183 1.09 10.293 1.025 10.429 1.005C10.566 0.985 10.69 1.017 10.8 1.1C11.748 1.811 12.501 2.69 13.059 3.735C13.686 4.912 14 6.167 14 7.5ZM10.5 4.997C10.636 4.997 10.754 5.047 10.854 5.146C10.951 5.244 11 5.362 11 5.5C11 5.638 10.951 5.756 10.854 5.854L8.707 8L10.854 10.146C10.953 10.246 11.003 10.364 11.003 10.5C11.003 10.636 10.953 10.754 10.854 10.854C10.754 10.953 10.636 11.003 10.5 11.003C10.364 11.003 10.246 10.953 10.146 10.854L8 8.707L5.854 10.854C5.756 10.951 5.638 11 5.5 11C5.362 11 5.244 10.951 5.146 10.854C5.047 10.754 4.997 10.636 4.997 10.5C4.997 10.364 5.047 10.246 5.146 10.146L7.293 8L5.146 5.854C5.047 5.754 4.997 5.636 4.997 5.5C4.997 5.364 5.047 5.246 5.146 5.146C5.246 5.047 5.364 4.997 5.5 4.997C5.636 4.997 5.754 5.047 5.854 5.146L8 7.293L10.146 5.146C10.246 5.047 10.364 4.997 10.5 4.997Z"/></svg>
// Gentleface "variable" (line-round), MIT. https://gentleface.com/icons/variable
import type { SVGProps } from 'react';
export function VariableIcon(props: SVGProps<SVGSVGElement>) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
<path d="M3.824 4.206C3.275 5.235 3 6.333 3 7.5C3 8.667 3.275 9.765 3.824 10.794C4.312 11.709 4.97 12.478 5.8 13.1C5.913 13.185 5.979 13.294 5.998 13.429C6.017 13.564 5.985 13.687 5.9 13.8C5.817 13.91 5.707 13.975 5.571 13.995C5.434 14.014 5.31 13.983 5.2 13.9C4.252 13.189 3.499 12.31 2.941 11.265C2.314 10.088 2 8.833 2 7.5C2 6.167 2.314 4.912 2.941 3.735C3.499 2.69 4.252 1.811 5.2 1.1C5.313 1.015 5.436 0.983 5.571 1.002C5.706 1.021 5.815 1.087 5.9 1.2C5.983 1.31 6.014 1.434 5.995 1.571C5.975 1.707 5.91 1.817 5.8 1.9C4.97 2.522 4.312 3.291 3.824 4.206ZM14 7.5C14 8.833 13.686 10.088 13.059 11.265C12.501 12.31 11.748 13.189 10.8 13.9C10.69 13.983 10.566 14.014 10.429 13.995C10.293 13.975 10.183 13.91 10.1 13.8C10.017 13.69 9.985 13.566 10.005 13.429C10.025 13.293 10.09 13.183 10.2 13.1C11.03 12.478 11.688 11.709 12.176 10.794C12.725 9.765 13 8.667 13 7.5C13 6.333 12.725 5.235 12.176 4.206C11.688 3.291 11.03 2.522 10.2 1.9C10.087 1.815 10.021 1.706 10.002 1.571C9.983 1.436 10.015 1.313 10.1 1.2C10.183 1.09 10.293 1.025 10.429 1.005C10.566 0.985 10.69 1.017 10.8 1.1C11.748 1.811 12.501 2.69 13.059 3.735C13.686 4.912 14 6.167 14 7.5ZM10.5 4.997C10.636 4.997 10.754 5.047 10.854 5.146C10.951 5.244 11 5.362 11 5.5C11 5.638 10.951 5.756 10.854 5.854L8.707 8L10.854 10.146C10.953 10.246 11.003 10.364 11.003 10.5C11.003 10.636 10.953 10.754 10.854 10.854C10.754 10.953 10.636 11.003 10.5 11.003C10.364 11.003 10.246 10.953 10.146 10.854L8 8.707L5.854 10.854C5.756 10.951 5.638 11 5.5 11C5.362 11 5.244 10.951 5.146 10.854C5.047 10.754 4.997 10.636 4.997 10.5C4.997 10.364 5.047 10.246 5.146 10.146L7.293 8L5.146 5.854C5.047 5.754 4.997 5.636 4.997 5.5C4.997 5.364 5.047 5.246 5.146 5.146C5.246 5.047 5.364 4.997 5.5 4.997C5.636 4.997 5.754 5.047 5.854 5.146L8 7.293L10.146 5.146C10.246 5.047 10.364 4.997 10.5 4.997Z" />
</svg>
);
}Vue: see /icons/variable.md
Svelte: see /icons/variable.md
HTML img: see /icons/variable.md
CSS: see /icons/variable.md
Data URL: see /icons/variable.md
Sprite: see /icons/variable.md
SwiftUI: see /icons/variable.md
Compose: see /icons/variable.md
Android XML: see /icons/variable.md
Flutter: see /icons/variable.md
Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.
Meaning
- Use it for
- variable, template variable, merge field, dynamic field
- Alternatives
- Don’t confuse with
placeholder: a layout placeholder box (empty-slot), not a template variable
- Tags
- variable, template-variable, placeholder, parameter, x, parentheses, code, developer, programming
- Category
- Development
- Component name
VariableIcon- History
- added
Family 1
More development icons
binary braces brackets bug bug-off bug-play code code-alert code-block code-eye code-off code-pencil code-play code-search code-sparkle container · all development icons
For agents
Metadata: /icons/variable.json · Markdown: /icons/variable.md · SVG: https://gentleface.com/svg/{style}/16/variable.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/variable.png