How to create an input with an icon

Learn how to create an input field with an icon using Tailwind CSS.

Learn how to create beautifully styled input fields with icons using TailwindCSS. Whether you need an email field, a search box, or a custom input with URL prefixes or suffixes, Tailwind’s utility classes make this simple and efficient.

Creating an input field with an icon involves a combination of relative and absolute positioning, along with Tailwind’s spacing utilities. Here’s a step-by-step guide:

Step 1: Structure the Input

Wrap the input field in a div with relative positioning. This container will serve as the base for positioning the icon.

<div class="relative">
    <input 
        type="email" 
        class="block w-full px-3 h-9 text-sm rounded-lg border border-gray-300 shadow-xs outline-hidden focus:ring-2 focus:border-transparent focus:ring-primary-600 dark:border-gray-700/75 dark:bg-gray-800/15" 
        placeholder="Enter your email" 
    />
</div>

Step 2: Add an Icon

Place an <svg> element for the icon inside the container. Use absolute positioning to align the icon relative to the container. For example, to position the icon on the left:

<div class="relative">
    <svg class="absolute inset-y-0 left-3 my-auto size-4 pointer-events-none rtl:left-auto rtl:right-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 1 0-2.636 6.364M16.5 12V8.25" />
    </svg>
    <input 
        type="email" 
        class="block w-full ps-9 px-3 h-9 text-sm rounded-lg border border-gray-300 shadow-xs outline-hidden focus:ring-2 focus:border-transparent focus:ring-primary-600 dark:border-gray-700/75 dark:bg-gray-800/15" 
        placeholder="Enter your email" 
    />
</div>

Key Classes:

absolute: Positions the icon relative to the container.
inset-y-0: Aligns the icon vertically in the center.
left-3: Positions the icon 12px from the left edge of the container.
pointer-events-none: Disables pointer events on the icon to ensure that it doesn’t interfere with input interactions.
rtl:left-auto rtl:right-3: Positions the icon 12px from the right edge in right-to-left languages.
ps-9: This utility class adds padding to the left side of the input field. This padding ensures that any text entered into the input field does not overlap with an icon or other elements positioned inside the input field on the left.

Difference between `ps` and `pl`:

ps is a shorthand for padding-inline-start and is used to add padding to the start edge of an element. The start edge is the left edge in left-to-right languages like English and the right edge in right-to-left languages like Arabic.
pl is a shorthand for padding-left and is used to add padding to the left edge of an element. It always adds padding to the left edge, regardless of the text direction.

Step 3: Customize for Different Alignments and Text Additions

Once you’ve mastered the basic setup, you can easily adapt it to other use cases. Below are some examples.

To create a search box with an icon, follow the same steps as above. Adjust the icon and input field styles as needed.

<div class="space-y-2.5 min-w-64">
    <div class="relative">
        <svg class="absolute inset-y-0 z-1 my-auto left-3 size-4 pointer-events-none rtl:left-auto rtl:right-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
        </svg>
        <input 
            type="search" 
            id="search" 
            class="block w-full ps-9 px-3 h-9 text-sm rounded-lg border border-gray-300 shadow-xs shadow-gray-950/5 outline-hidden focus:ring-2 focus:border-transparent focus:ring-primary-600 dark:bg-gray-900 dark:border-gray-700/75"
            placeholder="Search all tips"
        />
    </div>
</div>

Right-Aligned Icon

To place the icon on the right, adjust the position to right-3 and add pe-9 to the input field for padding.

Your email

<div class="space-y-2.5 min-w-64">
    <label for="email" class="text-gray-950 font-medium text-sm dark:text-white">Your email</label>
    
    <div class="relative">
        <svg class="absolute inset-y-0 z-1 my-auto right-3 size-4 pointer-events-non rtl:left-3 rtl:right-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
        </svg>
        <input 
            type="email" 
            id="email" 
            name="email"
            class="block w-full pe-9 px-3 h-9 text-sm rounded-lg border border-gray-300 shadow-xs shadow-gray-950/5 outline-hidden focus:ring-2 focus:border-transparent focus:ring-primary-600 dark:bg-gray-900 dark:border-gray-700/75" 
            placeholder="Enter your email" 
        />
    </div>
</div>

URL Prefix

To add a prefix like https:// to a URL input field, place the prefix inside the container and adjust the padding accordingly.

https://

<div class="space-y-2.5 min-w-64">
    <div class="relative">
        <span class="block absolute inset-y-0 z-1 my-auto left-3 h-fit text-sm pointer-events-none rtl:right-3 rtl:left-auto">https://</span>
        <input 
            type="text" 
            id="url"
            name="url" 
            class="block w-full ps-16 px-3 h-9 text-sm rounded-lg border border-gray-300 shadow-xs shadow-gray-950/5 outline-hidden focus:ring-2 focus:border-transparent focus:ring-primary-600 dark:placeholder-gray-600 dark:bg-gray-900 dark:border-gray-700/75" 
            placeholder="tailtips.dev" 
        />
    </div>
</div>

URL Suffix

Similarly, you can add a suffix like .dev to a URL input field by placing the suffix inside the container and adjusting the padding.

.dev

<div class="space-y-2.5 min-w-64">
    <div class="relative">
        <span class="block absolute inset-y-0 z-1 my-auto right-3 h-fit text-sm pointer-events-none rtl:left-3 rtl:right-auto">.dev</span>
        <input 
            type="text" 
            id="url"
            name="url" 
            class="block w-full pe-12 px-3 h-9 text-sm rounded-lg border border-gray-300 shadow-xs shadow-gray-950/5 outline-hidden focus:ring-2 focus:border-transparent focus:ring-primary-600 dark:placeholder-gray-600 dark:bg-gray-900 dark:border-gray-700/75" 
            placeholder="tailtips" 
        />
    </div>
</div>

On this page