Icons in Form Input Fields

Ask us anything How do I?
1

I’m trying to add an icon to the start of a form input field as shown below.

Screenshot 2025-07-24 at 09.03.13
Screenshot 2025-07-24 at 09.03.13962×236 4.21 KB

I assume to do this I’ll need to use custom CSS on the form input field element. I’ve found this example code from w3schools.com

  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 40px;

Inserting this into the custom css doesn’t work - I think I need to assign an icon it can access.

My ideal icon is ‘lucide/user’ but entering this in the (‘’) doesn’t work either.

Can anyone help here? I would imagine it’s possible, however, am unsure of how to reference icons outside of using the icon elements found in the library.

2

HI @xtremeexposures ,

is it necessary to place an icon right inside the input field?

In such cases I just use a “div” element to place inside it an “icon” and “input field” elements. Then you remove input field’s border and style the div as an input field. It’s an easy way.

1 Like
3

Unfortunately that wouldn’t align with my app’s brand guidelines.

4

Then, I think, it is doable through creating a custom “input field” with Weweb AI or other IDE/LLM.

2 Likes
5

Hey @xtremeexposures :waving_hand:

What I do to achieve that kind of design it to wrap my input in a div. Then I add a left padding to the input, that will leave space to add an icon to the left. You can then position your icon with an absolute positionning.

Let me know if you need more detailed instructions :slight_smile:

1 Like