CSS to put icon inside an input element in a form Last Updated : 11 Jul, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report CSS to put an icon inside an input element in a form asks how to style an input field to include an icon within the input box itself. This typically involves using CSS to position the icon alongside the text, providing a visually integrated user interface. CDN LinkInclude the Font Awesome library to use a variety of icons in your project:https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css Example 1: Adding an Icon Inside an Input ElementIn this example, center the input fields with icons inside. It uses Font Awesome for the icons and CSS for positioning. Each input field has an icon positioned to the left, creating a visually appealing form. index.html <!DOCTYPE html> <html> <head> <title>Put icon inside an input element</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body { text-align: center; } h3 { text-align: center; } div { max-width: 400px; margin: auto; } .input-icons { width: 100%; margin-bottom: 10px; } .input-icons i { position: absolute; } .icon { padding: 10px; min-width: 40px; } .input-field { width: 100%; padding: 10px; text-align: center; } </style> </head> <body> <h3> Icons inside the input element </h3> <div> <div class="input-icons"> <i class="fa fa-user icon"></i> <input class="input-field" type="text"> <i class="fa fa-instagram icon"></i> <input class="input-field" type="text"> <i class="fa fa-envelope icon"></i> <input class="input-field" type="text"> <i class="fa fa-youtube icon"></i> <input class="input-field" type="text"> <i class="fa fa-facebook icon"></i> <input class="input-field" type="text"> </div> </div> </body> </html> Output Example 2: Enhancing the Input with Additional CSS PropertiesThis example shows how to put an icon inside an input element in a form with some CSS properties. index.html <!DOCTYPE html> <html> <head> <title>Put icon inside an input element</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body { text-align: center; } form { max-width: 450px; margin: auto; } h2 { color: green; } .input-icons { width: 100%; margin-bottom: 10px; } .input-icons i { position: absolute; } .icon { padding: 10px; color: green; min-width: 50px; text-align: center; } .input-field { width: 100%; padding: 10px; text-align: center; } </style> </head> <body> <form> <h2>GeeksforGeeks</h2> <div class="input-icons"> <i class="fa fa-user icon"></i> <input class="input-field" type="text" placeholder="Username"> </div> <div class="input-icons"> <i class="fa fa-envelope icon"></i> <input class="input-field" type="text" placeholder="Email"> </div> <div class="input-icons"> <i class="fa fa-key icon"></i> <input class="input-field" type="password" placeholder="Password"> </div> </form> </body> </html> OutputNote: CSS is the foundation of webpages, is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples . Comment More infoAdvertise with us Next Article How to put an input element on the same line as its label? S Sabya_Samadder Follow Improve Article Tags : CSS Similar Reads How to Add Icon in Form Input Field in Tailwind CSS ? 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 fie 2 min read How to use :before or :after pseudo-element to an input field in CSS ? Input tag (<input>) in HTML is used to take input from the user like text input, button input, file input, etc. In CSS, pseudo-elements are basically specific keywords that are added to a selector to style a specific part of the selected element. For example: ::before, ::after etc. The pseudo- 3 min read How to Add Button Inside an Input Field in HTML ? Integrating a button inside an input box is a common design pattern in web development, often seen in search bars, where a “search†button sits within the text input field, or in password fields that include a “show/hide†toggle. This UI element enhances user experience by offering a clear, interact 3 min read How to put an input element on the same line as its label? We will put an element on the same line as its label. There are several approaches to make an input element the same as its label. Table of ContentUsing float and overflow attributesUsing table cell attribute in display propertyUsing float and overflow attributesMake a label and style it with float 2 min read How to Style the Input File Type in Forms using CSS? Customizing the style of file input elements in web forms is essential to enhance the visual appeal of a website. Employing techniques such as CSS styling and the ::file-selector-button to achieve a visually appealing file upload experience. These methods allow for the customization of various desig 2 min read How to Place Font Awesome Icon to Input Field? Place Font Awesome icon in your form is an innovative idea, that will bring attention to your website. It is as simple as putting Font Awesome icon on any button. The <i> tag and <span> tag are used widely to add icons on the webpages. To add any icons on the webpages, it needs the font- 2 min read Like