# Icons in Form Input Fields

**URL:** <https://community.weweb.io/t/icons-in-form-input-fields/19375>\
**Category:** How do I?\
**Created:** [July 24, 2025, 8:04am UTC](https://community.weweb.io/t/icons-in-form-input-fields/19375 "2025-07-24T08:04:58Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![xtremeexposures](https://avatars.discourse-cdn.com/v4/letter/x/5f9b8f/32.png) [@xtremeexposures](https://community.weweb.io/u/xtremeexposures)\
**Post date:** [July 24, 2025, 8:04am UTC](https://community.weweb.io/t/icons-in-form-input-fields/19375/1 "2025-07-24T08:04:58Z")

</div>

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](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/8/8a67765b5837b31411ef2bfdc6d38b0442a48035.png)

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](http://w3schools.com)

```auto
  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.

---

<div class="post-metadata">

**Author:** ![Batik\_Okazov](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/batik_okazov/32/12688_2.png) [@Batik\_Okazov](https://community.weweb.io/u/Batik_Okazov)\
**Post date:** [July 24, 2025, 12:10pm UTC](https://community.weweb.io/t/icons-in-form-input-fields/19375/2 "2025-07-24T12:10:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![xtremeexposures](https://avatars.discourse-cdn.com/v4/letter/x/5f9b8f/32.png) [@xtremeexposures](https://community.weweb.io/u/xtremeexposures)\
**Post date:** [July 24, 2025, 12:17pm UTC](https://community.weweb.io/t/icons-in-form-input-fields/19375/3 "2025-07-24T12:17:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Batik\_Okazov](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/batik_okazov/32/12688_2.png) [@Batik\_Okazov](https://community.weweb.io/u/Batik_Okazov)\
**Post date:** [July 24, 2025, 12:19pm UTC](https://community.weweb.io/t/icons-in-form-input-fields/19375/4 "2025-07-24T12:19:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jptrinh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jptrinh/32/1493_2.png) [@jptrinh](https://community.weweb.io/u/jptrinh)\
**Post date:** [July 29, 2025, 4:25pm UTC](https://community.weweb.io/t/icons-in-form-input-fields/19375/5 "2025-07-29T16:25:34Z")

</div>

Hey @xtremeexposures 👋

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 🙂