---
category: Feedback
created: '2019-12-12'
description: Add validation icons to input with CSS
keywords: css validation icon
thumbnail: /assets/css-layout/thumbnails/validation-icon.png
title: Validation icon
---

## HTML

```html index.html
<div class="validation-icon">
    <!-- The input -->
    <input class="validation-icon__input" />

    <!-- The icon validation-icon -->
    <span class="validation-icon__icon">
        <!-- The SVG icon represents any state such as valid, invalid, loading, etc. -->
        ...
    </span>
</div>
```

## CSS

```css styles.css
.validation-icon {
    /* Used to position the validation icon */
    position: relative;
}

.validation-icon__input {
    /* Border */
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;

    /* Take the full width */
    width: 100%;
    height: 2rem;

    /* Don't overlap the icon */
    padding-right: 1.5rem;
}

.validation-icon__icon {
    /* Positioned at the right side */
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translate(0, -50%);

    z-index: 10;
}
```

<Playground>
```css styles.css hidden
body {
    align-items: center;
    display: flex;
    justify-content: center;
}

.validation-icon {
    /* Used to position the validation icon */
    position: relative;

    /* Demo */
    width: 16rem;
}

.validation-icon__input {
    /* Border */
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;

    /* Take the full width */
    width: 100%;
    height: 2rem;

    /* Don't overlap the icon */
    padding-right: 1.5rem;
}

.validation-icon__icon {
    /* Positioned at the right side */
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translate(0, -50%);

    z-index: 10;
}

.validation-icon__svg {
    fill: none;
    height: 1rem;
    width: 1rem;
    stroke: #22c55e;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}
```

```html index.html hidden
<div class="validation-icon">
    <input class="validation-icon__input" />
    <span class="validation-icon__icon">
        <svg class="validation-icon__svg" viewBox="0 0 24 24">
            <path d="M23.5,0.499l-16.5,23l-6.5-6.5"></path>
        </svg>
    </span>
</div>
```
</Playground>