Icon for additionalSignupField for Lock

[ike1]

I’m trying to add custom sign up fields as a part of universal login. I found the parameter to add for these fields which is easy/great. However I’m having a hard time trying to understand where I’m supposed to source the icons from that fit with the Auth0 existing icons. This is what I have added to my universal login:

      additionalSignUpFields: [{
      	"name": "mobile",
        "placeholder": "your phone number (eg. +61412345678)",
        "icon": "https://raw.githubusercontent.com/feathericons/feather/master/icons/smartphone.svg"
      }]

And this is the result:

I guess the mismatch of the colour can’t be helped, but its positioning is also off. Auth0 offers this icon field but no guidance around how to actually use it properly. I’ve tried other icons but it just gets worse (icon isnt constrained to the grey box).

[anishsinha0128]

I’m facing the same problem here and cannot find anything in auth0’s documentation page about this. Auth0 has icons on https://identicons.dev/ but doesn’t give any instructions on how to use them in the signup form.

[anishsinha0128]

Update–

I put together a solution that seems a bit hacky, but it works and is responsive on mobile devices as well as desktop. In the login form html, above the first script tag, I inserted:

<style>.auth0-lock.auth0-lock .auth0-lock-input-wrap .auth0-lock-custom-icon {
    width: 30px;
    margin: 0 auto;
    padding: 0;
    top:5px;left:5px;
    }
</style>

For the actual icon source, I went to identicons.dev, and I right clicked on each image icon and copied its image address. I wish that Auth0 offered a more straightforward way of copying the urls here, but I had to make do. As far as I know, all icons from there will work with my solution. Additionally, all the icons there are “Royalty-free, free-to-use icons and clipart representing fundamental identity concepts. Use them in presentations, specifications and documentation”, so there shouldn’t be an issue about licensing or copyright.

My ‘additionalSignUpFields’ looks like: `additionalSignUpFields: [
{
name: “first_name”,
placeholder: “your first name”,
icon: “https://identicons.dev/static/icons/gray/svg/icon-user.svg”

},
{name: “last_name”, placeholder: “your last name”,icon: “https://identicons.dev/static/icons/gray/svg/icon-user.svg”}],`

I apologize for the bad formatting. The final signup page looks like:

I hope this was helpful. I hope Auth0 sees this and they provide a less hacky solution, or a better way to do this. Feel free to reply if you need more information.

[scott14]

This is great - thank you.