diff --git a/umap/static/umap/bitbucket.png b/umap/static/umap/bitbucket.png
deleted file mode 100644
index 32863151..00000000
Binary files a/umap/static/umap/bitbucket.png and /dev/null differ
diff --git a/umap/static/umap/content.css b/umap/static/umap/content.css
index d13dce0b..48924743 100644
--- a/umap/static/umap/content.css
+++ b/umap/static/umap/content.css
@@ -41,33 +41,14 @@ body.login header {
     display: inline-block;
 }
 
+.login-grid span,
 .login-grid a {
     border: 1px solid #e5e5e5;
-    padding: 5px;
     color: #000;
-    background-position: center bottom;
-    background-repeat: no-repeat;
-    background-size: 92px 92px;
     height: 92px;
     width: 92px;
     margin-inline-end: 10px;
 }
-.login-grid .login-github {
-    background-image: url("./github.png");
-}
-.login-grid .login-bitbucket {
-    background-image: url("./bitbucket.png");
-}
-.login-grid .login-twitter-oauth2 {
-    background-image: url("./twitter.png");
-}
-.login-grid .login-openstreetmap,
-.login-grid .login-openstreetmap-oauth2 {
-    background-image: url("./openstreetmap.png");
-}
-.login-grid .login-keycloak {
-    background-image: url("./keycloak.png");
-}
 
 /* **************************** */
 /*            home              */
diff --git a/umap/static/umap/github.png b/umap/static/umap/github.png
deleted file mode 100644
index b9b32621..00000000
Binary files a/umap/static/umap/github.png and /dev/null differ
diff --git a/umap/static/umap/img/providers/bitbucket.png b/umap/static/umap/img/providers/bitbucket.png
new file mode 100644
index 00000000..d23fa6e6
Binary files /dev/null and b/umap/static/umap/img/providers/bitbucket.png differ
diff --git a/umap/static/umap/img/providers/github.png b/umap/static/umap/img/providers/github.png
new file mode 100644
index 00000000..ffb6a37a
Binary files /dev/null and b/umap/static/umap/img/providers/github.png differ
diff --git a/umap/static/umap/img/providers/keycloak.png b/umap/static/umap/img/providers/keycloak.png
new file mode 100644
index 00000000..f755d58e
Binary files /dev/null and b/umap/static/umap/img/providers/keycloak.png differ
diff --git a/umap/static/umap/img/providers/openstreetmap-oauth2.png b/umap/static/umap/img/providers/openstreetmap-oauth2.png
new file mode 100644
index 00000000..22799789
Binary files /dev/null and b/umap/static/umap/img/providers/openstreetmap-oauth2.png differ
diff --git a/umap/static/umap/img/providers/twitter-oauth2.png b/umap/static/umap/img/providers/twitter-oauth2.png
new file mode 100644
index 00000000..b263eac1
Binary files /dev/null and b/umap/static/umap/img/providers/twitter-oauth2.png differ
diff --git a/umap/static/umap/keycloak.png b/umap/static/umap/keycloak.png
deleted file mode 100644
index 86405f3a..00000000
Binary files a/umap/static/umap/keycloak.png and /dev/null differ
diff --git a/umap/static/umap/openstreetmap.png b/umap/static/umap/openstreetmap.png
deleted file mode 100644
index ab69d4f0..00000000
Binary files a/umap/static/umap/openstreetmap.png and /dev/null differ
diff --git a/umap/static/umap/twitter.png b/umap/static/umap/twitter.png
deleted file mode 100644
index 237c5d1f..00000000
Binary files a/umap/static/umap/twitter.png and /dev/null differ
diff --git a/umap/templates/auth/user_form.html b/umap/templates/auth/user_form.html
index 534d0f80..659d04a0 100644
--- a/umap/templates/auth/user_form.html
+++ b/umap/templates/auth/user_form.html
@@ -1,6 +1,6 @@
 {% extends "umap/content.html" %}
 
-{% load i18n %}
+{% load i18n static %}
 
 {% block maincontent %}
   {% include "umap/dashboard_menu.html" with selected="profile" %}
@@ -28,8 +28,10 @@
         </h3>
         <ul>
           {% for name in providers %}
-            <li>
-              {{ name|title }}
+            <li class="login-grid">
+              {% with "umap/img/providers/"|add:name|add:".png" as path %}
+               <img src="{% static path %}" width="92px" height="92px" alt="{{ name }}" />
+              {% endwith %}
             </li>
           {% endfor %}
         </ul>
@@ -46,9 +48,7 @@
             {% for name in backends.backends %}
               {% if name not in providers %}
                 <li>
-                  <a href="{% url "social:begin" name %}"
-                     class="umap-login-popup login-{{ name }}"
-                     title="{{ name|title }}"></a>
+                  {% include "umap/components/provider.html" with name=name %}
                 </li>
               {% endif %}
             {% endfor %}
diff --git a/umap/templates/registration/login.html b/umap/templates/registration/login.html
index ee5ab99c..e7a75cfd 100644
--- a/umap/templates/registration/login.html
+++ b/umap/templates/registration/login.html
@@ -55,10 +55,7 @@
         <ul class="login-grid block-grid">
           {% for name in backends.backends %}
             <li>
-              <a rel="nofollow"
-                 href="{% url "social:begin" name %}"
-                 class="umap-login-popup login-{{ name }}"
-                 title="{{ name|title }}"></a>
+              {% include "umap/components/provider.html" with name=name %}
             </li>
           {% endfor %}
         </ul>
diff --git a/umap/templates/umap/components/provider.html b/umap/templates/umap/components/provider.html
new file mode 100644
index 00000000..ed8e3bbf
--- /dev/null
+++ b/umap/templates/umap/components/provider.html
@@ -0,0 +1,8 @@
+{% load static %}
+<a href="{% url "social:begin" name %}"
+   class="umap-login-popup"
+   title="{{ name|title }}">
+    {% with "umap/img/providers/"|add:name|add:".png" as path %}
+     <img src="{% static path %}" width="92px" height="92px" alt="{{ name }}" />
+    {% endwith %}
+ </a>