# variable icon

Variable. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/variable

- Category: Development
- Use it for: variable, template variable, merge field, dynamic field
- Tags: variable, template-variable, placeholder, parameter, x, parentheses, code, developer, programming
- Family: variable-plus
- Component name: VariableIcon
- Added: 2026-10-16

## Alternatives

- `function`: a function or formula (formula)
- `braces`: a JSON object (object)

## Don't confuse with

- `placeholder`: a layout placeholder box (empty-slot), not a template variable

## Files

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.

- line-round: https://gentleface.com/svg/line-round/16/variable.svg · PNG https://gentleface.com/png/line-round/16/variable.png · https://gentleface.com/png/line-round/32/variable.png · https://gentleface.com/png/line-round/48/variable.png
- line-soft: https://gentleface.com/svg/line-soft/16/variable.svg · PNG https://gentleface.com/png/line-soft/16/variable.png · https://gentleface.com/png/line-soft/32/variable.png · https://gentleface.com/png/line-soft/48/variable.png
- line-sharp: https://gentleface.com/svg/line-sharp/16/variable.svg · PNG https://gentleface.com/png/line-sharp/16/variable.png · https://gentleface.com/png/line-sharp/32/variable.png · https://gentleface.com/png/line-sharp/48/variable.png
- solid-round: https://gentleface.com/svg/solid-round/16/variable.svg · PNG https://gentleface.com/png/solid-round/16/variable.png · https://gentleface.com/png/solid-round/32/variable.png · https://gentleface.com/png/solid-round/48/variable.png
- solid-soft: https://gentleface.com/svg/solid-soft/16/variable.svg · PNG https://gentleface.com/png/solid-soft/16/variable.png · https://gentleface.com/png/solid-soft/32/variable.png · https://gentleface.com/png/solid-soft/48/variable.png
- solid-sharp: https://gentleface.com/svg/solid-sharp/16/variable.svg · PNG https://gentleface.com/png/solid-sharp/16/variable.png · https://gentleface.com/png/solid-sharp/32/variable.png · https://gentleface.com/png/solid-sharp/48/variable.png

The SVG of every style: https://gentleface.com/icons/variable.json (`svg`).

## Code (line-round)

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. For another style, take its SVG from the JSON and swap the path `d`.

### SVG

```svg
<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>
```

### React

```tsx
// 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

```vue
<!-- Gentleface "variable" (line-round), MIT. https://gentleface.com/icons/variable -->
<template>
  <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>
</template>
```

### Svelte

```svelte
<!-- Gentleface "variable" (line-round), MIT. https://gentleface.com/icons/variable -->
<script>
  let props = $props();
</script>

<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>
```

### HTML img

```html
<!-- Gentleface "variable" (line-round), MIT. https://gentleface.com/icons/variable. An <img> can't take currentColor: it draws black. Inline the SVG or use the CSS mask to color it. -->
<img src="https://gentleface.com/svg/line-round/16/variable.svg" width="16" height="16" alt="">
```

### CSS

```css
/* Gentleface "variable" (line-round), MIT. https://gentleface.com/icons/variable. Takes the text color. */
.icon-variable {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
```

### Data URL

```text
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E
```

### Sprite

```html
<!-- Gentleface "variable" (line-round), MIT. https://gentleface.com/icons/variable
     Every icon of this style in one file: https://gentleface.com/sprite/line-round.svg
     Serve it from your own origin: <use> does not load from another origin. -->
<svg width="16" height="16" aria-hidden="true"><use href="/sprite/line-round.svg#variable"/></svg>
```

### SwiftUI

```swift
// Gentleface "variable" (line-round), MIT. https://gentleface.com/icons/variable
import SwiftUI

struct VariableIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 3.824, y: 4.206))
        p.addCurve(to: CGPoint(x: 3, y: 7.5), control1: CGPoint(x: 3.275, y: 5.235), control2: CGPoint(x: 3, y: 6.333))
        p.addCurve(to: CGPoint(x: 3.824, y: 10.794), control1: CGPoint(x: 3, y: 8.667), control2: CGPoint(x: 3.275, y: 9.765))
        p.addCurve(to: CGPoint(x: 5.8, y: 13.1), control1: CGPoint(x: 4.312, y: 11.709), control2: CGPoint(x: 4.97, y: 12.478))
        p.addCurve(to: CGPoint(x: 5.998, y: 13.429), control1: CGPoint(x: 5.913, y: 13.185), control2: CGPoint(x: 5.979, y: 13.294))
        p.addCurve(to: CGPoint(x: 5.9, y: 13.8), control1: CGPoint(x: 6.017, y: 13.564), control2: CGPoint(x: 5.985, y: 13.687))
        p.addCurve(to: CGPoint(x: 5.571, y: 13.995), control1: CGPoint(x: 5.817, y: 13.91), control2: CGPoint(x: 5.707, y: 13.975))
        p.addCurve(to: CGPoint(x: 5.2, y: 13.9), control1: CGPoint(x: 5.434, y: 14.014), control2: CGPoint(x: 5.31, y: 13.983))
        p.addCurve(to: CGPoint(x: 2.941, y: 11.265), control1: CGPoint(x: 4.252, y: 13.189), control2: CGPoint(x: 3.499, y: 12.31))
        p.addCurve(to: CGPoint(x: 2, y: 7.5), control1: CGPoint(x: 2.314, y: 10.088), control2: CGPoint(x: 2, y: 8.833))
        p.addCurve(to: CGPoint(x: 2.941, y: 3.735), control1: CGPoint(x: 2, y: 6.167), control2: CGPoint(x: 2.314, y: 4.912))
        p.addCurve(to: CGPoint(x: 5.2, y: 1.1), control1: CGPoint(x: 3.499, y: 2.69), control2: CGPoint(x: 4.252, y: 1.811))
        p.addCurve(to: CGPoint(x: 5.571, y: 1.002), control1: CGPoint(x: 5.313, y: 1.015), control2: CGPoint(x: 5.436, y: 0.983))
        p.addCurve(to: CGPoint(x: 5.9, y: 1.2), control1: CGPoint(x: 5.706, y: 1.021), control2: CGPoint(x: 5.815, y: 1.087))
        p.addCurve(to: CGPoint(x: 5.995, y: 1.571), control1: CGPoint(x: 5.983, y: 1.31), control2: CGPoint(x: 6.014, y: 1.434))
        p.addCurve(to: CGPoint(x: 5.8, y: 1.9), control1: CGPoint(x: 5.975, y: 1.707), control2: CGPoint(x: 5.91, y: 1.817))
        p.addCurve(to: CGPoint(x: 3.824, y: 4.206), control1: CGPoint(x: 4.97, y: 2.522), control2: CGPoint(x: 4.312, y: 3.291))
        p.closeSubpath()
        p.move(to: CGPoint(x: 14, y: 7.5))
        p.addCurve(to: CGPoint(x: 13.059, y: 11.265), control1: CGPoint(x: 14, y: 8.833), control2: CGPoint(x: 13.686, y: 10.088))
        p.addCurve(to: CGPoint(x: 10.8, y: 13.9), control1: CGPoint(x: 12.501, y: 12.31), control2: CGPoint(x: 11.748, y: 13.189))
        p.addCurve(to: CGPoint(x: 10.429, y: 13.995), control1: CGPoint(x: 10.69, y: 13.983), control2: CGPoint(x: 10.566, y: 14.014))
        p.addCurve(to: CGPoint(x: 10.1, y: 13.8), control1: CGPoint(x: 10.293, y: 13.975), control2: CGPoint(x: 10.183, y: 13.91))
        p.addCurve(to: CGPoint(x: 10.005, y: 13.429), control1: CGPoint(x: 10.017, y: 13.69), control2: CGPoint(x: 9.985, y: 13.566))
        p.addCurve(to: CGPoint(x: 10.2, y: 13.1), control1: CGPoint(x: 10.025, y: 13.293), control2: CGPoint(x: 10.09, y: 13.183))
        p.addCurve(to: CGPoint(x: 12.176, y: 10.794), control1: CGPoint(x: 11.03, y: 12.478), control2: CGPoint(x: 11.688, y: 11.709))
        p.addCurve(to: CGPoint(x: 13, y: 7.5), control1: CGPoint(x: 12.725, y: 9.765), control2: CGPoint(x: 13, y: 8.667))
        p.addCurve(to: CGPoint(x: 12.176, y: 4.206), control1: CGPoint(x: 13, y: 6.333), control2: CGPoint(x: 12.725, y: 5.235))
        p.addCurve(to: CGPoint(x: 10.2, y: 1.9), control1: CGPoint(x: 11.688, y: 3.291), control2: CGPoint(x: 11.03, y: 2.522))
        p.addCurve(to: CGPoint(x: 10.002, y: 1.571), control1: CGPoint(x: 10.087, y: 1.815), control2: CGPoint(x: 10.021, y: 1.706))
        p.addCurve(to: CGPoint(x: 10.1, y: 1.2), control1: CGPoint(x: 9.983, y: 1.436), control2: CGPoint(x: 10.015, y: 1.313))
        p.addCurve(to: CGPoint(x: 10.429, y: 1.005), control1: CGPoint(x: 10.183, y: 1.09), control2: CGPoint(x: 10.293, y: 1.025))
        p.addCurve(to: CGPoint(x: 10.8, y: 1.1), control1: CGPoint(x: 10.566, y: 0.985), control2: CGPoint(x: 10.69, y: 1.017))
        p.addCurve(to: CGPoint(x: 13.059, y: 3.735), control1: CGPoint(x: 11.748, y: 1.811), control2: CGPoint(x: 12.501, y: 2.69))
        p.addCurve(to: CGPoint(x: 14, y: 7.5), control1: CGPoint(x: 13.686, y: 4.912), control2: CGPoint(x: 14, y: 6.167))
        p.closeSubpath()
        p.move(to: CGPoint(x: 10.5, y: 4.997))
        p.addCurve(to: CGPoint(x: 10.854, y: 5.146), control1: CGPoint(x: 10.636, y: 4.997), control2: CGPoint(x: 10.754, y: 5.047))
        p.addCurve(to: CGPoint(x: 11, y: 5.5), control1: CGPoint(x: 10.951, y: 5.244), control2: CGPoint(x: 11, y: 5.362))
        p.addCurve(to: CGPoint(x: 10.854, y: 5.854), control1: CGPoint(x: 11, y: 5.638), control2: CGPoint(x: 10.951, y: 5.756))
        p.addLine(to: CGPoint(x: 8.707, y: 8))
        p.addLine(to: CGPoint(x: 10.854, y: 10.146))
        p.addCurve(to: CGPoint(x: 11.003, y: 10.5), control1: CGPoint(x: 10.953, y: 10.246), control2: CGPoint(x: 11.003, y: 10.364))
        p.addCurve(to: CGPoint(x: 10.854, y: 10.854), control1: CGPoint(x: 11.003, y: 10.636), control2: CGPoint(x: 10.953, y: 10.754))
        p.addCurve(to: CGPoint(x: 10.5, y: 11.003), control1: CGPoint(x: 10.754, y: 10.953), control2: CGPoint(x: 10.636, y: 11.003))
        p.addCurve(to: CGPoint(x: 10.146, y: 10.854), control1: CGPoint(x: 10.364, y: 11.003), control2: CGPoint(x: 10.246, y: 10.953))
        p.addLine(to: CGPoint(x: 8, y: 8.707))
        p.addLine(to: CGPoint(x: 5.854, y: 10.854))
        p.addCurve(to: CGPoint(x: 5.5, y: 11), control1: CGPoint(x: 5.756, y: 10.951), control2: CGPoint(x: 5.638, y: 11))
        p.addCurve(to: CGPoint(x: 5.146, y: 10.854), control1: CGPoint(x: 5.362, y: 11), control2: CGPoint(x: 5.244, y: 10.951))
        p.addCurve(to: CGPoint(x: 4.997, y: 10.5), control1: CGPoint(x: 5.047, y: 10.754), control2: CGPoint(x: 4.997, y: 10.636))
        p.addCurve(to: CGPoint(x: 5.146, y: 10.146), control1: CGPoint(x: 4.997, y: 10.364), control2: CGPoint(x: 5.047, y: 10.246))
        p.addLine(to: CGPoint(x: 7.293, y: 8))
        p.addLine(to: CGPoint(x: 5.146, y: 5.854))
        p.addCurve(to: CGPoint(x: 4.997, y: 5.5), control1: CGPoint(x: 5.047, y: 5.754), control2: CGPoint(x: 4.997, y: 5.636))
        p.addCurve(to: CGPoint(x: 5.146, y: 5.146), control1: CGPoint(x: 4.997, y: 5.364), control2: CGPoint(x: 5.047, y: 5.246))
        p.addCurve(to: CGPoint(x: 5.5, y: 4.997), control1: CGPoint(x: 5.246, y: 5.047), control2: CGPoint(x: 5.364, y: 4.997))
        p.addCurve(to: CGPoint(x: 5.854, y: 5.146), control1: CGPoint(x: 5.636, y: 4.997), control2: CGPoint(x: 5.754, y: 5.047))
        p.addLine(to: CGPoint(x: 8, y: 7.293))
        p.addLine(to: CGPoint(x: 10.146, y: 5.146))
        p.addCurve(to: CGPoint(x: 10.5, y: 4.997), control1: CGPoint(x: 10.246, y: 5.047), control2: CGPoint(x: 10.364, y: 4.997))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

// VariableIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp.
```

### Compose

```kotlin
// Gentleface "variable" (line-round), MIT. https://gentleface.com/icons/variable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.addPathNodes
import androidx.compose.ui.unit.dp

val VariableIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "variable", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("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"),
        fill = SolidColor(Color.Black),
    ).build()
}

// Icon(VariableIcon, contentDescription = null) tints it with LocalContentColor.
```

### Android XML

```xml
<!-- res/drawable/ic_variable.xml · Gentleface "variable" (line-round), MIT. https://gentleface.com/icons/variable -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="16dp"
    android:height="16dp"
    android:viewportWidth="16"
    android:viewportHeight="16"
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="@android:color/white"
      android:pathData="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"/>
</vector>
```

### Flutter

```dart
// Gentleface "variable" (line-round), MIT. https://gentleface.com/icons/variable
import 'package:flutter/widgets.dart';

class VariableIcon extends StatelessWidget {
  const VariableIcon({super.key, this.size = 16, this.color});
  final double size;
  final Color? color;

  @override
  Widget build(BuildContext context) => CustomPaint(
        size: Size.square(size),
        painter: _VariableIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)),
      );
}

class _VariableIconPainter extends CustomPainter {
  _VariableIconPainter(this.color);
  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(size.width / 16, size.height / 16);
    final p = Path()
      ..moveTo(3.824, 4.206)
      ..cubicTo(3.275, 5.235, 3, 6.333, 3, 7.5)
      ..cubicTo(3, 8.667, 3.275, 9.765, 3.824, 10.794)
      ..cubicTo(4.312, 11.709, 4.97, 12.478, 5.8, 13.1)
      ..cubicTo(5.913, 13.185, 5.979, 13.294, 5.998, 13.429)
      ..cubicTo(6.017, 13.564, 5.985, 13.687, 5.9, 13.8)
      ..cubicTo(5.817, 13.91, 5.707, 13.975, 5.571, 13.995)
      ..cubicTo(5.434, 14.014, 5.31, 13.983, 5.2, 13.9)
      ..cubicTo(4.252, 13.189, 3.499, 12.31, 2.941, 11.265)
      ..cubicTo(2.314, 10.088, 2, 8.833, 2, 7.5)
      ..cubicTo(2, 6.167, 2.314, 4.912, 2.941, 3.735)
      ..cubicTo(3.499, 2.69, 4.252, 1.811, 5.2, 1.1)
      ..cubicTo(5.313, 1.015, 5.436, 0.983, 5.571, 1.002)
      ..cubicTo(5.706, 1.021, 5.815, 1.087, 5.9, 1.2)
      ..cubicTo(5.983, 1.31, 6.014, 1.434, 5.995, 1.571)
      ..cubicTo(5.975, 1.707, 5.91, 1.817, 5.8, 1.9)
      ..cubicTo(4.97, 2.522, 4.312, 3.291, 3.824, 4.206)
      ..close()
      ..moveTo(14, 7.5)
      ..cubicTo(14, 8.833, 13.686, 10.088, 13.059, 11.265)
      ..cubicTo(12.501, 12.31, 11.748, 13.189, 10.8, 13.9)
      ..cubicTo(10.69, 13.983, 10.566, 14.014, 10.429, 13.995)
      ..cubicTo(10.293, 13.975, 10.183, 13.91, 10.1, 13.8)
      ..cubicTo(10.017, 13.69, 9.985, 13.566, 10.005, 13.429)
      ..cubicTo(10.025, 13.293, 10.09, 13.183, 10.2, 13.1)
      ..cubicTo(11.03, 12.478, 11.688, 11.709, 12.176, 10.794)
      ..cubicTo(12.725, 9.765, 13, 8.667, 13, 7.5)
      ..cubicTo(13, 6.333, 12.725, 5.235, 12.176, 4.206)
      ..cubicTo(11.688, 3.291, 11.03, 2.522, 10.2, 1.9)
      ..cubicTo(10.087, 1.815, 10.021, 1.706, 10.002, 1.571)
      ..cubicTo(9.983, 1.436, 10.015, 1.313, 10.1, 1.2)
      ..cubicTo(10.183, 1.09, 10.293, 1.025, 10.429, 1.005)
      ..cubicTo(10.566, 0.985, 10.69, 1.017, 10.8, 1.1)
      ..cubicTo(11.748, 1.811, 12.501, 2.69, 13.059, 3.735)
      ..cubicTo(13.686, 4.912, 14, 6.167, 14, 7.5)
      ..close()
      ..moveTo(10.5, 4.997)
      ..cubicTo(10.636, 4.997, 10.754, 5.047, 10.854, 5.146)
      ..cubicTo(10.951, 5.244, 11, 5.362, 11, 5.5)
      ..cubicTo(11, 5.638, 10.951, 5.756, 10.854, 5.854)
      ..lineTo(8.707, 8)
      ..lineTo(10.854, 10.146)
      ..cubicTo(10.953, 10.246, 11.003, 10.364, 11.003, 10.5)
      ..cubicTo(11.003, 10.636, 10.953, 10.754, 10.854, 10.854)
      ..cubicTo(10.754, 10.953, 10.636, 11.003, 10.5, 11.003)
      ..cubicTo(10.364, 11.003, 10.246, 10.953, 10.146, 10.854)
      ..lineTo(8, 8.707)
      ..lineTo(5.854, 10.854)
      ..cubicTo(5.756, 10.951, 5.638, 11, 5.5, 11)
      ..cubicTo(5.362, 11, 5.244, 10.951, 5.146, 10.854)
      ..cubicTo(5.047, 10.754, 4.997, 10.636, 4.997, 10.5)
      ..cubicTo(4.997, 10.364, 5.047, 10.246, 5.146, 10.146)
      ..lineTo(7.293, 8)
      ..lineTo(5.146, 5.854)
      ..cubicTo(5.047, 5.754, 4.997, 5.636, 4.997, 5.5)
      ..cubicTo(4.997, 5.364, 5.047, 5.246, 5.146, 5.146)
      ..cubicTo(5.246, 5.047, 5.364, 4.997, 5.5, 4.997)
      ..cubicTo(5.636, 4.997, 5.754, 5.047, 5.854, 5.146)
      ..lineTo(8, 7.293)
      ..lineTo(10.146, 5.146)
      ..cubicTo(10.246, 5.047, 10.364, 4.997, 10.5, 4.997)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

  @override
  bool shouldRepaint(_VariableIconPainter old) => old.color != color;
}
```