diff --git a/themes/src/main/resources/theme/base/login/login-password.ftl b/themes/src/main/resources/theme/base/login/login-password.ftl
index a0601c8cda..aa984b1a90 100755
--- a/themes/src/main/resources/theme/base/login/login-password.ftl
+++ b/themes/src/main/resources/theme/base/login/login-password.ftl
@@ -15,10 +15,11 @@
                                    type="password" autocomplete="on" autofocus
                                    aria-invalid="<#if messagesPerField.existsError('password')>true</#if>"
                             />
-                            <button class="pf-c-button pf-m-control" type="button" aria-label="${msg('showPassword')}"
+                            <button class="${properties.kcFormPasswordVisibilityButtonClass!}" type="button" aria-label="${msg('showPassword')}"
                                     aria-controls="password"  data-password-toggle
+                                    data-icon-show="${properties.kcFormPasswordVisibilityIconShow!}" data-icon-hide="${properties.kcFormPasswordVisibilityIconHide!}"
                                     data-label-show="${msg('showPassword')}" data-label-hide="${msg('hidePassword')}">
-                                <i class="fa fa-eye" aria-hidden="true"></i>
+                                <i class="${properties.kcFormPasswordVisibilityIconShow!}" aria-hidden="true"></i>
                             </button>
                         </div>
                         <#if messagesPerField.existsError('password')>
diff --git a/themes/src/main/resources/theme/base/login/login-update-password.ftl b/themes/src/main/resources/theme/base/login/login-update-password.ftl
index f1ac3b99cb..f6414ec9f8 100755
--- a/themes/src/main/resources/theme/base/login/login-update-password.ftl
+++ b/themes/src/main/resources/theme/base/login/login-update-password.ftl
@@ -15,10 +15,11 @@
                                autofocus autocomplete="new-password"
                                aria-invalid="<#if messagesPerField.existsError('password','password-confirm')>true</#if>"
                         />
-                        <button class="pf-c-button pf-m-control" type="button" aria-label="${msg('showPassword')}"
+                        <button class="${properties.kcFormPasswordVisibilityButtonClass!}" type="button" aria-label="${msg('showPassword')}"
                                 aria-controls="password-new"  data-password-toggle
+                                data-icon-show="${properties.kcFormPasswordVisibilityIconShow!}" data-icon-hide="${properties.kcFormPasswordVisibilityIconHide!}"
                                 data-label-show="${msg('showPassword')}" data-label-hide="${msg('hidePassword')}">
-                            <i class="fa fa-eye" aria-hidden="true"></i>
+                            <i class="${properties.kcFormPasswordVisibilityIconShow!}" aria-hidden="true"></i>
                         </button>
                     </div>
 
@@ -41,10 +42,11 @@
                                autocomplete="new-password"
                                aria-invalid="<#if messagesPerField.existsError('password-confirm')>true</#if>"
                         />
-                        <button class="pf-c-button pf-m-control" type="button" aria-label="${msg('showPassword')}"
+                        <button class="${properties.kcFormPasswordVisibilityButtonClass!}" type="button" aria-label="${msg('showPassword')}"
                                 aria-controls="password-confirm"  data-password-toggle
+                                data-icon-show="${properties.kcFormPasswordVisibilityIconShow!}" data-icon-hide="${properties.kcFormPasswordVisibilityIconHide!}"
                                 data-label-show="${msg('showPassword')}" data-label-hide="${msg('hidePassword')}">
-                            <i class="fa fa-eye" aria-hidden="true"></i>
+                            <i class="${properties.kcFormPasswordVisibilityIconShow!}" aria-hidden="true"></i>
                         </button>
                     </div>
 
diff --git a/themes/src/main/resources/theme/base/login/login.ftl b/themes/src/main/resources/theme/base/login/login.ftl
index 08e81e116e..81c9dbf144 100755
--- a/themes/src/main/resources/theme/base/login/login.ftl
+++ b/themes/src/main/resources/theme/base/login/login.ftl
@@ -31,10 +31,11 @@
                             <input tabindex="2" id="password" class="${properties.kcInputClass!}" name="password" type="password" autocomplete="off"
                                    aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>"
                             />
-                            <button class="pf-c-button pf-m-control" type="button" aria-label="${msg("showPassword")}"
+                            <button class="${properties.kcFormPasswordVisibilityButtonClass!}" type="button" aria-label="${msg("showPassword")}"
                                     aria-controls="password"  data-password-toggle
+                                    data-icon-show="${properties.kcFormPasswordVisibilityIconShow!}" data-icon-hide="${properties.kcFormPasswordVisibilityIconHide!}"
                                     data-label-show="${msg('showPassword')}" data-label-hide="${msg('hidePassword')}">
-                                <i class="fa fa-eye" aria-hidden="true"></i>
+                                <i class="${properties.kcFormPasswordVisibilityIconShow!}" aria-hidden="true"></i>
                             </button>
                         </div>
 
diff --git a/themes/src/main/resources/theme/base/login/register-user-profile.ftl b/themes/src/main/resources/theme/base/login/register-user-profile.ftl
index 36a59d434c..f55f48a40e 100755
--- a/themes/src/main/resources/theme/base/login/register-user-profile.ftl
+++ b/themes/src/main/resources/theme/base/login/register-user-profile.ftl
@@ -21,10 +21,11 @@
 										   autocomplete="new-password"
 										   aria-invalid="<#if messagesPerField.existsError('password','password-confirm')>true</#if>"
 									/>
-									<button class="pf-c-button pf-m-control" type="button" aria-label="${msg('showPassword')}"
+									<button class="${properties.kcFormPasswordVisibilityButtonClass!}" type="button" aria-label="${msg('showPassword')}"
 											aria-controls="password"  data-password-toggle
+											data-icon-show="${properties.kcFormPasswordVisibilityIconShow!}" data-icon-hide="${properties.kcFormPasswordVisibilityIconHide!}"
 											data-label-show="${msg('showPassword')}" data-label-hide="${msg('hidePassword')}">
-										<i class="fa fa-eye" aria-hidden="true"></i>
+										<i class="${properties.kcFormPasswordVisibilityIconShow!}" aria-hidden="true"></i>
 									</button>
 								</div>
 		
@@ -47,10 +48,11 @@
 										   name="password-confirm"
 										   aria-invalid="<#if messagesPerField.existsError('password-confirm')>true</#if>"
 									/>
-									<button class="pf-c-button pf-m-control" type="button" aria-label="${msg('showPassword')}"
+									<button class="${properties.kcFormPasswordVisibilityButtonClass!}" type="button" aria-label="${msg('showPassword')}"
 											aria-controls="password-confirm"  data-password-toggle
+											data-icon-show="${properties.kcFormPasswordVisibilityIconShow!}" data-icon-hide="${properties.kcFormPasswordVisibilityIconHide!}"
 											data-label-show="${msg('showPassword')}" data-label-hide="${msg('hidePassword')}">
-										<i class="fa fa-eye" aria-hidden="true"></i>
+										<i class="${properties.kcFormPasswordVisibilityIconShow!}" aria-hidden="true"></i>
 									</button>
 								</div>
 		
diff --git a/themes/src/main/resources/theme/base/login/register.ftl b/themes/src/main/resources/theme/base/login/register.ftl
index ce01291ef1..5a219d75da 100755
--- a/themes/src/main/resources/theme/base/login/register.ftl
+++ b/themes/src/main/resources/theme/base/login/register.ftl
@@ -90,10 +90,11 @@
                                    autocomplete="new-password"
                                    aria-invalid="<#if messagesPerField.existsError('password','password-confirm')>true</#if>"
                             />
-                            <button class="pf-c-button pf-m-control" type="button" aria-label="${msg('showPassword')}"
+                            <button class="${properties.kcFormPasswordVisibilityButtonClass!}" type="button" aria-label="${msg('showPassword')}"
                                     aria-controls="password"  data-password-toggle
+                                    data-icon-show="${properties.kcFormPasswordVisibilityIconShow!}" data-icon-hide="${properties.kcFormPasswordVisibilityIconHide!}"
                                     data-label-show="${msg('showPassword')}" data-label-hide="${msg('hidePassword')}">
-                                <i class="fa fa-eye" aria-hidden="true"></i>
+                                <i class="${properties.kcFormPasswordVisibilityIconShow!}" aria-hidden="true"></i>
                             </button>
                         </div>
 
@@ -117,10 +118,11 @@
                                    name="password-confirm"
                                    aria-invalid="<#if messagesPerField.existsError('password-confirm')>true</#if>"
                             />
-                            <button class="pf-c-button pf-m-control" type="button" aria-label="${msg('showPassword')}"
+                            <button class="${properties.kcFormPasswordVisibilityButtonClass!}" type="button" aria-label="${msg('showPassword')}"
                                     aria-controls="password-confirm"  data-password-toggle
+                                    data-icon-show="${properties.kcFormPasswordVisibilityIconShow!}" data-icon-hide="${properties.kcFormPasswordVisibilityIconHide!}"
                                     data-label-show="${msg('showPassword')}" data-label-hide="${msg('hidePassword')}">
-                                <i class="fa fa-eye" aria-hidden="true"></i>
+                                <i class="${properties.kcFormPasswordVisibilityIconShow!}" aria-hidden="true"></i>
                             </button>
                         </div>
 
diff --git a/themes/src/main/resources/theme/base/login/resources/js/passwordVisibility.js b/themes/src/main/resources/theme/base/login/resources/js/passwordVisibility.js
index 3d35c09225..b9b7dbdbed 100644
--- a/themes/src/main/resources/theme/base/login/resources/js/passwordVisibility.js
+++ b/themes/src/main/resources/theme/base/login/resources/js/passwordVisibility.js
@@ -2,11 +2,11 @@ const toggle = (button) =>  {
     const passwordElement = document.getElementById(button.getAttribute('aria-controls'));
     if (passwordElement.type === "password") {
         passwordElement.type = "text";
-        button.children.item(0).classList.replace("fa-eye", "fa-eye-slash");
+        button.children.item(0).className = button.dataset.iconHide;
         button.setAttribute("aria-label", button.dataset.labelHide);
     } else if(passwordElement.type === "text") {
         passwordElement.type = "password";
-        button.children.item(0).classList.replace("fa-eye-slash", "fa-eye");
+        button.children.item(0).className = button.dataset.iconShow;
         button.setAttribute("aria-label", button.dataset.labelShow);
     }
 }
diff --git a/themes/src/main/resources/theme/keycloak/login/theme.properties b/themes/src/main/resources/theme/keycloak/login/theme.properties
index 90fdd2b50d..f3555bc833 100644
--- a/themes/src/main/resources/theme/keycloak/login/theme.properties
+++ b/themes/src/main/resources/theme/keycloak/login/theme.properties
@@ -160,3 +160,8 @@ kcRecoveryCodesConfirmation=kc-recovery-codes-confirmation
 kcCheckClass=pf-c-check
 kcCheckInputClass=pf-c-check__input
 kcCheckLabelClass=pf-c-check__label
+
+## Password visibility
+kcFormPasswordVisibilityButtonClass=pf-c-button pf-m-control
+kcFormPasswordVisibilityIconShow=fa fa-eye
+kcFormPasswordVisibilityIconHide=fa fa-eye-slash