diff --git a/app/assets/images/mfa-options/security_key.gif b/app/assets/images/mfa-options/security_key.gif
deleted file mode 100644
index ed40944237a..00000000000
Binary files a/app/assets/images/mfa-options/security_key.gif and /dev/null differ
diff --git a/app/assets/images/mfa-options/security_key.svg b/app/assets/images/mfa-options/security_key.svg
new file mode 100644
index 00000000000..25e8722f75d
--- /dev/null
+++ b/app/assets/images/mfa-options/security_key.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 262 124"><g clip-path="url(#a)"><rect width="262" height="124" fill="#F2F9FF" rx="8"/><g><animateTransform attributeName="transform" attributeType="xml" dur="4s" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" keyTimes="0; 0.25; 0.375; 0.875; 1" repeatCount="indefinite" type="translate" values="0,0; 0,0; -88,0; -88,0; 0,0"/><path fill="#FDB81E" d="M216.268 89.758h-66.646V62.965h66.646z"/><path fill="#112E51" fill-rule="evenodd" d="m170.744 90.905-20.731-.032a4.03 4.03 0 0 1-2.838-1.17A4 4 0 0 1 146 86.882l.037-21.942a3.96 3.96 0 0 1 1.181-2.826 4.03 4.03 0 0 1 2.847-1.163l20.71.034q.509.005 1.001.132l.004-2.126a3.98 3.98 0 0 1 2.488-3.69 4 4 0 0 1 1.54-.3l21.386.033h.369l36.424.063a4.03 4.03 0 0 1 2.843 1.174 4 4 0 0 1 1.17 2.831l-.007 4.26.007-.006-.007 1.242v5.6l.007 1.565-.007 3.443v7.59h-.016l-.022 10.21a3.96 3.96 0 0 1-1.181 2.828 4.03 4.03 0 0 1-2.847 1.163l-3.205.004-3.242-.016-51.725-.077a4.03 4.03 0 0 1-2.843-1.174 4 4 0 0 1-1.17-2.831l.003-2.126c-.326.087-.663.13-1.001.13m21.124-21.574a11.92 11.92 0 0 0 1.469 15.114 12.07 12.07 0 0 0 8.504 3.52c2.38.005 4.709-.692 6.691-2.003a12 12 0 0 0 4.444-5.363 11.9 11.9 0 0 0 .698-6.915 11.95 11.95 0 0 0-3.283-6.134 12.06 12.06 0 0 0-6.157-3.287 12.1 12.1 0 0 0-6.956.669 12 12 0 0 0-5.41 4.399m-41.143-4.388-.005 3.988a.67.67 0 0 0 .675.655l20.388.045.007-5.319-20.395-.034a.68.68 0 0 0-.474.194.66.66 0 0 0-.196.471m21.048 5.344-15.039-.015.003 5.31 15.037.017zm-.019 5.977-15.037-.017-.002 5.329 15.039.015zm-21.066 6.623-.005 3.989.007.007a.67.67 0 0 0 .669.652l20.395.034-.001-5.313-20.395-.033a.67.67 0 0 0-.67.664" clip-rule="evenodd"/></g><rect width="380" height="132" x="-296" y="29" fill="#DEDEDE" rx="12"/><rect width="378" height="76" x="-295" y="-48" fill="#454545" stroke="#DEDEDE" stroke-width="2" rx="11"/><rect width="340" height="92" x="-276" y="49" fill="#F0F0F0" rx="8"/><rect width="52" height="36" x="4" y="57" fill="#454545" rx="4"/><g fill="#F0F0F0"><path d="M25.246 69.667a.987.987 0 1 0-1.295-1.49 9.23 9.23 0 1 0 12.042-.05.987.987 0 1 0-1.283 1.502 7.25 7.25 0 0 1 2.545 5.518c0 4.001-3.255 7.257-7.256 7.257s-7.254-3.255-7.254-7.256a7.26 7.26 0 0 1 2.5-5.481"/><path d="M30.988 75.766v-9.222a.987.987 0 0 0-1.974 0v9.222a.988.988 0 0 0 1.974 0"/></g><rect width="52" height="36" x="4" y="97" fill="#454545" rx="4"/><path fill="#E21C3D" fill-rule="evenodd" d="M117.86 67.002c0-.895-1.085-1.34-1.713-.702l-8.86 8.999a1 1 0 0 0 0 1.403l8.86 8.999c.628.637 1.713.193 1.713-.702v-2.753a1 1 0 0 1 1-1H130a1 1 0 0 0 1-1v-8.428a1 1 0 0 0-1-1h-11.14a1 1 0 0 1-1-1z" clip-rule="evenodd"><animate attributeName="opacity" dur="4s" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" keyTimes="0; 0.15; 0.25; 0.925; 1" repeatCount="indefinite" values="1; 1; 0; 0; 1"/><animateTransform attributeName="transform" attributeType="xml" dur="4s" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" keyTimes="0.0; 0.075; 0.25; 0.925; 1.0" repeatCount="indefinite" type="translate" values="0,0; 0,0; -10,0; -10,0; 0.0"/></path></g><rect width="261" height="123" x=".5" y=".5" stroke="#CEDCED" rx="7.5"/><defs><clipPath id="a"><rect width="262" height="124" fill="#fff" rx="8"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/app/assets/images/mfa-options/security_key_mobile.gif b/app/assets/images/mfa-options/security_key_mobile.gif
deleted file mode 100644
index f14234f9af8..00000000000
Binary files a/app/assets/images/mfa-options/security_key_mobile.gif and /dev/null differ
diff --git a/app/assets/images/mfa-options/security_key_mobile.svg b/app/assets/images/mfa-options/security_key_mobile.svg
new file mode 100644
index 00000000000..7433b38df38
--- /dev/null
+++ b/app/assets/images/mfa-options/security_key_mobile.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 262 127"><g clip-path="url(#a)"><rect width="262" height="126.468" fill="#F2F9FF" rx="8"/><g><animateTransform attributeName="transform" attributeType="xml" dur="4s" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" keyTimes="0; 0.25; 0.45; 0.75; 0.875; 1" repeatCount="indefinite" type="translate" values="0,0; 0,0; 0,-76; 0,-76; 0,0; 0,0"/><path fill="#112E51" d="M109 111a4 4 0 0 1 4-4h36a4 4 0 0 1 4 4v57a4 4 0 0 1-4 4h-36a4 4 0 0 1-4-4z"/><path fill="#FDB81E" d="M142 142c0 6.075-4.925 11-11 11s-11-4.925-11-11 4.925-11 11-11 11 4.925 11 11"/><path fill="url(#b)" d="M117 86a2 2 0 0 1 2-2h24a2 2 0 0 1 2 2v23a2 2 0 0 1-2 2h-24a2 2 0 0 1-2-2z"/><rect width="24" height="2" x="119" y="85" fill="#454545" rx="1"/></g><rect width="199" height="94" x="31.5" y="-60.5" fill="#454545" stroke="#DEDEDE" stroke-width="3" rx="22.5"/><path fill="#E21C3D" fill-rule="evenodd" d="M139.998 61.86c.895 0 1.339-1.085.702-1.713l-8.999-8.86a1 1 0 0 0-1.403 0l-8.999 8.86c-.637.628-.193 1.713.702 1.713h2.753a1 1 0 0 1 1 1V74a1 1 0 0 0 1 1h8.428a1 1 0 0 0 1-1V62.86a1 1 0 0 1 1-1z" clip-rule="evenodd"><animateTransform attributeName="transform" attributeType="xml" dur="4s" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" keyTimes="0; 0.075; 0.25; 0.875; 1" repeatCount="indefinite" type="translate" values="0,0; 0,0; 0,-8; 0,-8; 0,0"/><animate attributeName="opacity" dur="4s" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" keyTimes="0.0; 0.15; 0.25; 0.875; 1.0" repeatCount="indefinite" values="1; 1; 0; 0; 1"/></path></g><rect width="261" height="125.468" x=".5" y=".5" stroke="#CEDCED" rx="7.5"/><defs><linearGradient id="b" x1="145" x2="117" y1="107.365" y2="107.365" gradientUnits="userSpaceOnUse"><stop stop-color="#DEDEDE"/><stop offset=".925" stop-color="#EFEFEF"/><stop offset="1" stop-color="#DEDEDE"/></linearGradient><clipPath id="a"><rect width="262" height="126.468" fill="#fff" rx="8"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/app/views/users/webauthn_setup/new.html.erb b/app/views/users/webauthn_setup/new.html.erb
index 9546190cdfa..90cb3d3c4f7 100644
--- a/app/views/users/webauthn_setup/new.html.erb
+++ b/app/views/users/webauthn_setup/new.html.erb
@@ -60,9 +60,9 @@
         <% end %>
         <%= c.with_item(heading: t('forms.webauthn_setup.step_2')) do %>
             <% if mobile? %>
-              <%= image_tag asset_url('mfa-options/security_key_mobile.gif'), width: 420, height: 193, class: 'height-auto rounded-xl', alt: t('forms.webauthn_setup.step_2_image_mobile_alt') %>
+              <%= image_tag asset_url('mfa-options/security_key_mobile.svg'), width: 420, height: 193, class: 'height-auto', alt: t('forms.webauthn_setup.step_2_image_mobile_alt'), role: 'img' %>
             <% else %>
-              <%= image_tag asset_url('mfa-options/security_key.gif'), width: 420, height: 193, class: 'height-auto rounded-xl', alt: t('forms.webauthn_setup.step_2_image_alt') %>
+              <%= image_tag asset_url('mfa-options/security_key.svg'), width: 420, height: 193, class: 'height-auto', alt: t('forms.webauthn_setup.step_2_image_alt'), role: 'img' %>
             <% end %>
           <% end %>
         <%= c.with_item(heading: t('forms.webauthn_setup.step_3')) do %>
diff --git a/spec/views/users/webauthn_setup/new.html.erb_spec.rb b/spec/views/users/webauthn_setup/new.html.erb_spec.rb
index a9777c8f588..d8477ef4f7d 100644
--- a/spec/views/users/webauthn_setup/new.html.erb_spec.rb
+++ b/spec/views/users/webauthn_setup/new.html.erb_spec.rb
@@ -140,7 +140,7 @@
       it 'displays the security key image' do
         render
 
-        expect(rendered).to match(/src=".*security_key-.*\.gif"/)
+        expect(rendered).to match(/src=".*security_key-.*\.svg"/)
       end
 
       context 'when on a mobile device' do
@@ -151,7 +151,7 @@
         it 'displays the mobile security key image' do
           render
 
-          expect(rendered).to match(/src=".*security_key_mobile-.*\.gif"/)
+          expect(rendered).to match(/src=".*security_key_mobile-.*\.svg"/)
         end
       end
     end