How to Add Icon in Form Input Field in Tailwind CSS ?
Last Updated :
23 Jul, 2025
An icon in a form input field is a small picture or symbol placed inside or next to the input box. It helps users understand what to enter and makes the form easier to use. Using Tailwind CSS, you can use a combination of HTML structure and Tailwind utility classes to add icons in the form input field.
In this method, input elements are enhanced with Tailwind CSS using inline SVG icons. Since SVG (Scalable Vector Graphics) icons are easily customizable, scaleable, and styleable using CSS, they are a flexible option for icons. By directly integrating the SVG code into the HTML, we can use Tailwind CSS classes to modify the SVG's look and behavior.
Syntax
<svg class="h-5 w-5 text-gray-400"
fill="none"
stroke="currentColor">
<!-- Your SVG icon code here -->
</svg>
Example: This example uses the SVG icons with the Form Input.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
rel="stylesheet" />
<title>
Tailwind CSS Icon in Input
</title>
</head>
<body class="bg-gray-100
min-h-screen
flex items-center
justify-center">
<div class="relative">
<input type="text"
class="pl-10 pr-4 py-2 border rounded-lg"
placeholder="Enter your email" />
<div class="absolute inset-y-0 left-0 pl-3
flex items-center
pointer-events-none">
<svg class="h-5 w-5 text-gray-400"
fill="none"
stroke="currentColor">
<path stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8">
</path>
</svg>
</div>
</div>
</body>
</html>
Output:
In this method, we make use of icon font libraries, in particular the Font Awesome library, to include icons into input elements using Tailwind CSS. Collections of symbols or glyphs that are used as font characters are known as icon fonts. Including the Font Awesome CSS gives us access to a large number of insertable icons.
Syntax
<i class="fas fa-envelope text-gray-400"></i>
Example: This example uses the Font-awesome icons with the Form Input.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
rel="stylesheet" />
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
rel="stylesheet" />
<title>
Tailwind CSS Icon in Input
</title>
</head>
<body class="bg-gray-100
min-h-screen
flex items-center
justify-center">
<div class="relative">
<input type="text"
class="pl-10 pr-4 py-2 border rounded-lg"
placeholder="Enter your email" />
<div class="absolute inset-y-0 left-0 pl-3
flex items-center
pointer-events-none">
<i class="fas fa-envelope text-gray-400"></i>
</div>
</div>
</body>
</html>
Output:
