Form Inputs with Icons Template

Add clarity and a modern touch to your forms by embedding icons directly inside the input fields.

This template uses simple CSS positioning to place an icon inside an input, providing a strong visual cue for the user about the field's purpose.

Get Source Code → Preview →

About this "Inputs with Icons" Form

Placing an icon inside an input field is a common UI pattern that reinforces the field's purpose. A user icon for "Username" or an envelope for "Email" makes the form quicker to scan and understand. This template achieves the effect with a combination of HTML structure and CSS positioning.

Each form group is a container with position: relative;. The icon (an SVG in this example) is absolutely positioned within this container. To prevent the user's typed text from overlapping the icon, padding is added to the left side of the input element, creating a neat space for the icon to live.

Features

Enhanced Visual Cues: Icons help users immediately recognize a field's purpose.
Modern Aesthetic: Gives forms a professional, app-like appearance.
CSS Positioning: Achieves the layout cleanly without complex hacks.
Embedded SVGs: Uses inline SVGs, which are lightweight, scalable, and can be styled with CSS. No image files or font libraries are needed.

Dependencies

None. This template uses only pure HTML and CSS.

Code

Here's the full code for the form with icon inputs:

<div class="icon-form-container">
    <h2>Account Login</h2>
    <form action="#" method="post">
        <div class="input-group">
            <span class="input-icon">
                
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path></svg>
            </span>
            <input class="form-control-icon" type="text" placeholder="Username" required>
        </div>
        
        <div class="input-group">
            <span class="input-icon">
                
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"></path></svg>
            </span>
            <input class="form-control-icon" type="password" placeholder="Password" required>
        </div>
        
        <button class="submit-btn" type="submit">Sign In</button>
    </form>
</div>

View Output