# [Usage](../../../usage.md) > [Components and standard attributes](../basics.md) > Pre icon

---

`preIcon` | `->setPreIcon()`

Sets an icon before the field in `Form` components or before the title/label/name in `Visual` components. Icon system uses MDI (Material Design Icons). And is sufficient to set only the suffix of the icon.  
Example: `account-badge` will transform into `<i class="mdi mdi-account-badge"></i>`

| Types    | Default |
|----------|---------|
| `string` | `null`  |

Leading MDI icon: before the input in Form fields, before title / label in Visuals. Set only the suffix (`account-badge` → `mdi mdi-account-badge`). When omitted (`null`) no icon renders. Ideal for field type cues (email, lock, calendar).
Color via `preIconColor`.

### Example
Blade:
```php
{!! \KFramework\Components\Forms\Input::make()->setName('email')->setPreIcon('email') !!}
```
Controller:
```php
Input::make('email')->setPreIcon('email');
```

### Interaction / tips
- Pair with `preIconColor` (../shared_attributes/pre_icon_color.md) for coloring.
- Mirrors `postIcon` (../shared_attributes/post_icon.md) (trailing icon); combine for both sides.
- Keep `label` (../shared_attributes/label.md) for accessible naming.
- Update reactively with `updateOnChange` (../shared_attributes/update_on_change.md) / `onLoadChange` (../shared_attributes/on_load_change.md) via `UpdateField::make(...)->setPreIcon(...)`.

See also: [preIconColor](pre_icon_color.md), [postIcon](post_icon.md), [postIconColor](post_icon_color.md), [label](label.md), [basics](../basics.md), [Input](../forms/input.md).