Fixed #20597 -- Replaced admin GIF/PNG icons by SVG

32 files changed, 299 insertions, 114 deletions

diff --git a/django/contrib/admin/static/admin/css/base.css b/django/contrib/admin/static/admin/css/base.css
index c5e9f39c29..decc1c6d8b 100644
--- a/django/contrib/admin/static/admin/css/base.css
+++ b/django/contrib/admin/static/admin/css/base.css
@@ -192,7 +192,7 @@ p.mini {
     color: #999;
 }
 
-img.help-tooltip {
+.help-tooltip {
     cursor: help;
 }
 
@@ -352,7 +352,7 @@ table thead th.sorted:hover a.sortremove {
 
 table thead th.sorted .sortoptions {
     display: block;
-    padding: 10px 5px 0 5px;
+    padding: 9px 5px 0 5px;
     float: right;
     text-align: right;
 }
@@ -361,37 +361,57 @@ table thead th.sorted .sortpriority {
     font-size: .8em;
     min-width: 12px;
     text-align: center;
-    vertical-align: top;
+    vertical-align: 3px;
+    margin-left: 2px;
+    margin-right: 2px;
 }
 
 table thead th.sorted .sortoptions a {
+    position: relative;
     width: 14px;
-    height: 12px;
+    height: 14px;
     display: inline-block;
+    background: url(../img/svg/sorting-icons.svg) 0 0 no-repeat;
+    background-size: 14px auto;
 }
 
 table thead th.sorted .sortoptions a.sortremove {
-    background: url(../img/sorting-icons.gif) -4px -5px no-repeat;
+    background-position: 0 0;
+}
+
+table thead th.sorted .sortoptions a.sortremove:after {
+    content: '\\';
+    position: absolute;
+    top: -6px;
+    left: 3px;
+    font-weight: 200;
+    font-size: 18px;
+    color: #999;
+}
+
+table thead th.sorted .sortoptions a.sortremove:hover:after {
+    color: #447e9b;
 }
 
 table thead th.sorted .sortoptions a.sortremove:hover {
-    background: url(../img/sorting-icons.gif) -4px -27px no-repeat;
+    background-position: 0 -14px;
 }
 
 table thead th.sorted .sortoptions a.ascending {
-    background: url(../img/sorting-icons.gif) -5px -50px no-repeat;
+    background-position: 0 -28px;
 }
 
 table thead th.sorted .sortoptions a.ascending:hover {
-    background: url(../img/sorting-icons.gif) -5px -72px no-repeat;
+    background-position: 0 -42px;
 }
 
 table thead th.sorted .sortoptions a.descending {
-    background: url(../img/sorting-icons.gif) -5px -94px no-repeat;
+    top: 1px;
+    background-position: 0 -56px;
 }
 
 table thead th.sorted .sortoptions a.descending:hover {
-    background: url(../img/sorting-icons.gif) -5px -115px no-repeat;
+    background-position: 0 -70px;
 }
 
 /* ORDERABLE TABLES */
@@ -551,16 +571,19 @@ ul.messagelist li {
     font-size: 13px;
     padding: 10px 10px 10px 65px;
     margin: 0 0 10px 0;
-    background: #dfd url(../img/icon_success.gif) 40px 12px no-repeat;
+    background: #dfd url(../img/svg/icon-yes.svg) 40px 12px no-repeat;
+    background-size: 16px auto;
     color: #333;
 }
 
 ul.messagelist li.warning {
-    background: #ffc url(../img/icon_alert.gif) 40px 10px no-repeat;
+    background: #ffc url(../img/svg/icon-alert.svg) 40px 14px no-repeat;
+    background-size: 14px auto;
 }
 
 ul.messagelist li.error {
-    background: #ffefef url(../img/icon_error.gif) 40px 11px no-repeat;
+    background: #ffefef url(../img/svg/icon-no.svg) 40px 12px no-repeat;
+    background-size: 16px auto;
 }
 
 .errornote {
@@ -633,7 +656,7 @@ div.system-message p.system-message-title {
     padding: 4px 5px 4px 25px;
     margin: 0;
     color: #c11;
-    background: #ffefef url(../img/icon_error.gif) 5px .3em no-repeat;
+    background: #ffefef url(../img/svg/icon-no.svg) 5px 5px no-repeat;
 }
 
 .description {
@@ -663,18 +686,18 @@ div.breadcrumbs a:hover {
 /* ACTION ICONS */
 
 .addlink {
-    padding-left: 14px;
-    background: url(../img/icon_addlink.gif) 0 .2em no-repeat;
+    padding-left: 16px;
+    background: url(../img/svg/icon-addlink.svg) 0 1px no-repeat;
 }
 
 .changelink, .inlinechangelink {
-    padding-left: 14px;
-    background: url(../img/icon_changelink.gif) 0 .2em no-repeat;
+    padding-left: 16px;
+    background: url(../img/svg/icon-changelink.svg) 0 1px no-repeat;
 }
 
 .deletelink {
-    padding-left: 14px;
-    background: url(../img/icon_deletelink.gif) 0 .25em no-repeat;
+    padding-left: 16px;
+    background: url(../img/svg/icon-deletelink.svg) 0 1px no-repeat;
 }
 
 a.deletelink:link, a.deletelink:visited {
@@ -732,12 +755,12 @@ a.deletelink:hover {
 }
 
 .object-tools a.viewsitelink, .object-tools a.golink {
-    background: #999 url(../img/tooltag-arrowright.png) 95% center no-repeat;
+    background: #999 url(../img/svg/tooltag-arrowright.svg) 93% center no-repeat;
     padding-right: 26px;
 }
 
 .object-tools a.addlink {
-    background: #999 url(../img/tooltag-add.png) 95% center no-repeat;
+    background: #999 url(../img/svg/tooltag-add.svg) 93% center no-repeat;
     padding-right: 26px;
 }
 
diff --git a/django/contrib/admin/static/admin/css/changelists.css b/django/contrib/admin/static/admin/css/changelists.css
index 06b7f0dcf2..4df480d9c0 100644
--- a/django/contrib/admin/static/admin/css/changelists.css
+++ b/django/contrib/admin/static/admin/css/changelists.css
@@ -105,8 +105,9 @@
     border: 1px solid #ccc;
     padding: 2px 10px;
     margin: 0;
-    vertical-align: -1px;
-    background: #fff url(../img/nav-bg.gif) bottom repeat-x;
+    vertical-align: middle;
+    background: #fff;
+    box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset;
     cursor: pointer;
     color: #333;
 }
@@ -189,8 +190,6 @@
 
 .change-list ul.toplinks {
     display: block;
-    background: white url(../img/nav-bg-reverse.gif) 0 -10px repeat-x;
-    border-top: 1px solid white;
     float: left;
     padding: 0 !important;
     margin: 0 !important;
@@ -325,7 +324,8 @@
     font-size: 13px;
     border: 1px solid #ccc;
     border-radius: 4px;
-    background: #fff url(../img/nav-bg.gif) bottom repeat-x;
+    background: #fff;
+    box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset;
     cursor: pointer;
     height: 24px;
     line-height: 1;
diff --git a/django/contrib/admin/static/admin/css/forms.css b/django/contrib/admin/static/admin/css/forms.css
index 9f75c30ba7..7121b2432f 100644
--- a/django/contrib/admin/static/admin/css/forms.css
+++ b/django/contrib/admin/static/admin/css/forms.css
@@ -463,8 +463,8 @@ body.popup .submit-row {
 .inline-group ul.tools a.add,
 .inline-group div.add-row a,
 .inline-group .tabular tr.add-row td a {
-    background: url(../img/icon_addlink.gif) 0 50% no-repeat;
-    padding-left: 14px;
+    background: url(../img/svg/icon-addlink.svg) 0 1px no-repeat;
+    padding-left: 16px;
     font-size: 12px;
     outline: 0; /* Remove dotted border around link */
 }
@@ -478,22 +478,21 @@ body.popup .submit-row {
 .add-another, .related-lookup {
     margin-left: 5px;
     display: inline-block;
+    vertical-align: middle;
+    background-repeat: no-repeat;
+    background-size: 14px;
 }
 
 .add-another {
-    width: 10px;
-    height: 10px;
-    background-image: url(../img/icon_addlink.gif);
+    width: 16px;
+    height: 16px;
+    background-image: url(../img/svg/icon-addlink.svg);
 }
 
 .related-lookup {
     width: 16px;
     height: 16px;
-    background-image: url(../img/selector-search.gif);
-    background-repeat: no-repeat;
-    background-position: 0 3px;
-    vertical-align: middle;
-    margin-top: -4px;
+    background-image: url(../img/svg/search.svg);
 }
 
 form .related-widget-wrapper ul {
diff --git a/django/contrib/admin/static/admin/css/rtl.css b/django/contrib/admin/static/admin/css/rtl.css
index a2c9b1d0f1..3af780ca16 100644
--- a/django/contrib/admin/static/admin/css/rtl.css
+++ b/django/contrib/admin/static/admin/css/rtl.css
@@ -31,15 +31,15 @@ th {
 }
 
 .addlink, .changelink {
-    padding-left: 0px;
-    padding-right: 12px;
-    background-position: 100% 0.2em;
+    padding-left: 0;
+    padding-right: 16px;
+    background-position: 100% 1px;
 }
 
 .deletelink {
-    padding-left: 0px;
-    padding-right: 12px;
-    background-position: 100% 0.25em;
+    padding-left: 0;
+    padding-right: 16px;
+    background-position: 100% 1px;
 }
 
 .object-tools {
@@ -69,7 +69,7 @@ div.breadcrumbs {
 
 #content-related {
     float: left;
-    margin-left: -19em;
+    margin-left: -300px;
     margin-right: auto;
 }
 
@@ -93,7 +93,7 @@ thead th.sorted .text {
 
 .dashboard .module table td a {
     padding-left: .6em;
-    padding-right: 12px;
+    padding-right: 16px;
 }
 
 /* changelists styles */
@@ -155,11 +155,6 @@ thead th.sorted .text {
     float: right;
 }
 
-.submit-row .deletelink {
-    background: url(../img/icon_deletelink.gif) 0 50% no-repeat;
-    padding-right: 14px;
-}
-
 .submit-row input.default {
     margin-left: 0;
 }
diff --git a/django/contrib/admin/static/admin/css/widgets.css b/django/contrib/admin/static/admin/css/widgets.css
index 245fe57607..1e694f6b02 100644
--- a/django/contrib/admin/static/admin/css/widgets.css
+++ b/django/contrib/admin/static/admin/css/widgets.css
@@ -50,9 +50,11 @@
 .selector .selector-filter label,
 .inline-group .aligned .selector .selector-filter label {
     float: left;
-    margin: 0;
-    width: 16px;
-    padding: 0 2px;
+    margin: 7px 0 0;
+    width: 18px;
+    height: 18px;
+    padding: 0;
+    overflow: hidden;
     line-height: 1;
 }
 
@@ -91,64 +93,65 @@
 }
 
 .selector-add {
-    background: url(../img/selector-icons.gif) 0 -161px no-repeat;
+    background: url(../img/svg/selector-icons.svg) 0 -96px no-repeat;
     cursor: default;
-    margin-bottom: 2px;
 }
 
 .active.selector-add {
-    background: url(../img/selector-icons.gif) 0 -187px no-repeat;
+    background-position: 0 -112px;
     cursor: pointer;
 }
 
 .selector-remove {
-    background: url(../img/selector-icons.gif) 0 -109px no-repeat;
+    background: url(../img/svg/selector-icons.svg) 0 -64px no-repeat;
     cursor: default;
 }
 
 .active.selector-remove {
-    background: url(../img/selector-icons.gif) 0 -135px no-repeat;
+    background-position: 0 -80px;
     cursor: pointer;
 }
 
 a.selector-chooseall, a.selector-clearall {
     display: inline-block;
+    height: 16px;
     text-align: left;
-    margin-left: auto;
-    margin-right: auto;
+    margin: 1px auto 3px;
+    overflow: hidden;
     font-weight: bold;
+    line-height: 16px;
     color: #666;
 }
 
 a.selector-chooseall {
-    padding: 1px 18px 3px 0;
+    padding: 0 18px 0 0;
 }
 
 a.selector-clearall {
-    padding: 1px 0 3px 18px;
+    padding: 0 0 0 18px;
 }
 
 a.active.selector-chooseall:hover, a.active.selector-clearall:hover {
-    color: #036;
+    color: #447e9b;
 }
 
 a.selector-chooseall {
-    background: url(../img/selector-icons.gif) right -263px no-repeat;
+    background: url(../img/svg/selector-icons.svg) right -160px no-repeat;
     cursor: default;
 }
 
 a.active.selector-chooseall {
-    background: url(../img/selector-icons.gif) right -289px no-repeat;
+    background-position: 100% -176px;
     cursor: pointer;
 }
 
 a.selector-clearall {
-    background: url(../img/selector-icons.gif) left -211px no-repeat;
+    background: url(../img/svg/selector-icons.svg) 0 -128px no-repeat;
     cursor: default;
 }
 
 a.active.selector-clearall {
-    background: url(../img/selector-icons.gif) left -237px no-repeat;
+    background-position: 0 -144px;
     cursor: pointer;
 }
 
@@ -194,35 +197,40 @@ a.active.selector-clearall {
 }
 
 .stacked .selector-add {
-    background: url(../img/selector-icons.gif) 0 -57px no-repeat;
+    background: url(../img/svg/selector-icons.svg) 0 0 no-repeat;
     cursor: default;
 }
 
 .stacked .active.selector-add {
-    background: url(../img/selector-icons.gif) 0 -83px no-repeat;
+    background-position: 0 -16px;
     cursor: pointer;
 }
 
 .stacked .selector-remove {
-    background: url(../img/selector-icons.gif) 0 -5px no-repeat;
+    background: url(../img/svg/selector-icons.svg) 0 -32px no-repeat;
     cursor: default;
 }
 
 .stacked .active.selector-remove {
-    background: url(../img/selector-icons.gif) 0 -31px no-repeat;
+    background-position: 0 -48px;
     cursor: pointer;
 }
 
 .selector .help-icon {
-    background: url(../img/icon-unknown.gif) no-repeat;
+    background: url(../img/svg/icon-unknown.svg) 0 0 no-repeat;
     display: inline-block;
-    height: 10px;
-    width: 10px;
     vertical-align: middle;
+    margin: -2px 0 0 2px;
+    width: 13px;
+    height: 13px;
+}
+
+.selector .selector-chosen .help-icon {
+    background: url(../img/svg/icon-unknown-alt.svg) 0 0 no-repeat;
 }
 
 .selector .search-label-icon {
-    background: url(../img/selector-search.gif) 0 2px no-repeat;
+    background: url(../img/svg/search.svg) 0 0 no-repeat;
     display: inline-block;
     height: 18px;
     width: 18px;
@@ -265,19 +273,34 @@ table p.datetime {
 }
 
 .datetimeshortcuts .clock-icon, .datetimeshortcuts .date-icon {
-    background: none no-repeat;
+    position: relative;
     display: inline-block;
+    vertical-align: middle;
     height: 16px;
     width: 16px;
-    vertical-align: middle;
+    overflow: hidden;
 }
 
 .datetimeshortcuts .clock-icon {
-    background-image: url(../img/icon_clock.gif);
+    background: url(../img/svg/icon-clock.svg) 0 0 no-repeat;
+}
+
+.datetimeshortcuts a:hover .clock-icon {
+    background-position: 0 -16px;
 }
 
 .datetimeshortcuts .date-icon {
-    background-image: url(../img/icon_calendar.gif);
+    background: url(../img/svg/icon-calendar.svg) 0 0 no-repeat;
+    top: -1px;
+}
+
+.datetimeshortcuts a:hover .date-icon {
+    background-position: 0 -16px;
+}
+
+.timezonewarning {
+    font-size: 11px;
+    color: #999;
 }
 
 /* URL */
@@ -402,7 +425,7 @@ span.clearable-file-input label {
 .calendar td a, .timelist a {
     display: block;
     font-weight: 400;
-    padding: 8px;
+    padding: 6px;
     text-decoration: none;
     color: #444;
 }
@@ -441,29 +464,29 @@ span.clearable-file-input label {
 .calendarbox .calendarnav-previous, .calendarbox .calendarnav-next {
     display: block;
     position: absolute;
-    top: 7px;
-    border: 1px solid #333;
-    border-radius: 50%;
-    background: #fff;
-    width: 18px;
-    height: 18px;
+    top: 8px;
+    width: 15px;
+    height: 15px;
+    text-indent: -9999px;
     padding: 0;
-    line-height: 16px;
-    font-size: 12px;
-    color: #333;
-}
-
-.calendarnav-previous:hover, .calendarnav-next:hover {
-    background: #333;
-    color: #fff;
 }
 
 .calendarnav-previous {
     left: 10px;
+    background: url(../img/svg/calendar-icons.svg) 0 0 no-repeat;
+}
+
+.calendarbox .calendarnav-previous:hover {
+    background-position: 0 -15px;
 }
 
 .calendarnav-next {
     right: 10px;
+    background: url(../img/svg/calendar-icons.svg) 0 -30px no-repeat;
+}
+
+.calendarbox .calendarnav-next:hover {
+    background-position: 0 -45px;
 }
 
 .calendar-cancel {
@@ -564,15 +587,14 @@ ul.orderer li.deleted:hover, ul.orderer li.deleted a.selector:hover {
 .inline-deletelink {
     float: right;
     text-indent: -9999px;
-    background: transparent url(../img/inline-delete.png) no-repeat;
-    width: 15px;
-    height: 15px;
+    background: url(../img/svg/inline-delete.svg) 0 0 no-repeat;
+    width: 16px;
+    height: 16px;
     border: 0px none;
     outline: 0; /* Remove dotted border around link */
 }
 
 .inline-deletelink:hover {
-    background-position: -15px 0;
     cursor: pointer;
 }
 
diff --git a/django/contrib/admin/static/admin/img/svg/LICENSE b/django/contrib/admin/static/admin/img/svg/LICENSE
new file mode 100644
index 0000000000..a4faaa1dfa
--- /dev/null
+++ b/django/contrib/admin/static/admin/img/svg/LICENSE
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Code Charm Ltd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/django/contrib/admin/static/admin/img/svg/README.txt b/django/contrib/admin/static/admin/img/svg/README.txt
new file mode 100644
index 0000000000..43373ad1c2
--- /dev/null
+++ b/django/contrib/admin/static/admin/img/svg/README.txt
@@ -0,0 +1,7 @@
+All icons are taken from Font Awesome (http://fontawesome.io/) project.
+The Font Awesome font is licensed under the SIL OFL 1.1:
+- http://scripts.sil.org/OFL
+
+SVG icons source: https://github.com/encharm/Font-Awesome-SVG-PNG
+Font-Awesome-SVG-PNG is licensed under the MIT license (see file license
+in current folder).
diff --git a/django/contrib/admin/static/admin/img/svg/calendar-icons.svg b/django/contrib/admin/static/admin/img/svg/calendar-icons.svg
new file mode 100644
index 0000000000..dbf21c39d2
--- /dev/null
+++ b/django/contrib/admin/static/admin/img/svg/calendar-icons.svg
@@ -0,0 +1,14 @@
+<svg width="15" height="60" viewBox="0 0 1792 7168" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <g id="previous">
+      <path d="M1037 1395l102-102q19-19 19-45t-19-45l-307-307 307-307q19-19 19-45t-19-45l-102-102q-19-19-45-19t-45 19l-454 454q-19 19-19 45t19 45l454 454q19 19 45 19t45-19zm627-499q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
+    </g>
+    <g id="next">
+      <path d="M845 1395l454-454q19-19 19-45t-19-45l-454-454q-19-19-45-19t-45 19l-102 102q-19 19-19 45t19 45l307 307-307 307q-19 19-19 45t19 45l102 102q19 19 45 19t45-19zm819-499q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
+    </g>
+  </defs>
+  <use xlink:href="#previous" x="0" y="0" fill="#333333" />
+  <use xlink:href="#previous" x="0" y="1792" fill="#000000" />
+  <use xlink:href="#next" x="0" y="3584" fill="#333333" />
+  <use xlink:href="#next" x="0" y="5376" fill="#000000" />
+</svg>
diff --git a/django/contrib/admin/static/admin/img/svg/icon-addlink.svg b/django/contrib/admin/static/admin/img/svg/icon-addlink.svg
new file mode 100644
index 0000000000..e004fb1626
--- /dev/null
+++ b/django/contrib/admin/static/admin/img/svg/icon-addlink.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#70bf2b" d="M1600 796v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z"/>
+</svg>
diff --git a/django/contrib/admin/static/admin/img/svg/icon-alert.svg b/django/contrib/admin/static/admin/img/svg/icon-alert.svg
new file mode 100644
index 0000000000..e51ea83f5b
--- /dev/null
+++ b/django/contrib/admin/static/admin/img/svg/icon-alert.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#efb80b" d="M1024 1375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 23.5v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17h-1536q-34 0-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31 47-49t65-18 65 18 47 49z"/>
+</svg>
diff --git a/django/contrib/admin/static/admin/img/svg/icon-calendar.svg b/django/contrib/admin/static/admin/img/svg/icon-calendar.svg
new file mode 100644
index 0000000000..97910a9949
--- /dev/null
+++ b/django/contrib/admin/static/admin/img/svg/icon-calendar.svg
@@ -0,0 +1,9 @@
+<svg width="16" height="32" viewBox="0 0 1792 3584" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <g id="icon">
+      <path d="M192 1664h288v-288h-288v288zm352 0h320v-288h-320v288zm-352-352h288v-320h-288v320zm352 0h320v-320h-320v320zm-352-384h288v-288h-288v288zm736 736h320v-288h-320v288zm-384-736h320v-288h-320v288zm768 736h288v-288h-288v288zm-384-352h320v-320h-320v320zm-352-864v-288q0-13-9.5-22.5t-22.5-9.5h-64q-13 0-22.5 9.5t-9.5 22.5v288q0 13 9.5 22.5t22.5 9.5h64q13 0 22.5-9.5t9.5-22.5zm736 864h288v-320h-288v320zm-384-384h320v-288h-320v288zm384 0h288v-288h-288v288zm32-480v-288q0-13-9.5-22.5t-22.5-9.5h-64q-13 0-22.5 9.5t-9.5 22.5v288q0 13 9.5 22.5t22.5 9.5h64q13 0 22.5-9.5t9.5-22.5zm384-64v1280q0 52-38 90t-90 38h-1408q-52 0-90-38t-38-90v-1280q0-52 38-90t90-38h128v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h384v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h128q52 0 90 38t38 90z"/>
+    </g>
+  </defs>
+  <use xlink:href="#icon" x="0" y="0" fill="#447e9b" />
+  <use xlink:href="#icon" x="0" y="1792" fill="#003366" />
+</svg>
diff --git a/django/contrib/admin/static/admin/img/svg/icon-changelink.svg b/django/contrib/admin/static/admin/img/svg/icon-changelink.svg
new file mode 100644
index 0000000000..bbb137aa08
--- /dev/null
+++ b/django/contrib/admin/static/admin/img/svg/icon-changelink.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#efb80b" d="M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z"/>
+</svg>
diff --git a/django/contrib/admin/static/admin/img/svg/icon-clock.svg b/django/contrib/admin/static/admin/img/svg/icon-clock.svg
new file mode 100644
index 0000000000..bf9985d3f4
--- /dev/null
+++ b/django/contrib/admin/static/admin/img/svg/icon-clock.svg
@@ -0,0 +1,9 @@
+<svg width="16" height="32" viewBox="0 0 1792 3584" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <g id="icon">
+      <path d="M1024 544v448q0 14-9 23t-23 9h-320q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h224v-352q0-14 9-23t23-9h64q14 0 23 9t9 23zm416 352q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
+    </g>
+  </defs>
+  <use xlink:href="#icon" x="0" y="0" fill="#447e9b" />
+  <use xlink:href="#icon" x="0" y="1792" fill="#003366" />
+</svg>
diff --git a/django/contrib/admin/static/admin/img/svg/icon-deletelink.svg b/django/contrib/admin/static/admin/img/svg/icon-deletelink.svg
new file mode 100644
index 0000000000..4059b15544
--- /dev/null
+++ b/django/contrib/admin/static/admin/img/svg/icon-deletelink.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#dd4646" d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/>
+</svg>
diff --git a/django/contrib/admin/static/admin/img/svg/icon-no.svg b/django/contrib/admin/static/admin/img/svg/icon-no.svg
new file mode 100644
index 0000000000..2e0d3832c9
--- /dev/null
+++ b/django/contrib/admin/static/admin/img/svg/icon-no.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#dd4646" d="M1277 1122q0-26-19-45l-181-181 181-181q19-19 19-45 0-27-19-46l-90-90q-19-19-46-19-26 0-45 19l-181 181-181-181q-19-19-45-19-27 0-46 19l-90 90q-19 19-19 46 0 26 19 45l181 181-181 181q-19 19-19 45 0 27 19 46l90 90q19 19 46 19 26 0 45-19l181-181 181 181q19 19 45 19 27 0 46-19l90-90q19-19 19-46zm387-226q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
+</svg>
diff --git a/django/contrib/admin/static/admin/img/svg/icon-unknown-alt.svg b/django/contrib/admin/static/admin/img/svg/icon-unknown-alt.svg
new file mode 100644
index 0000000000..1c6b99fc09
--- /dev/null
+++ b/django/contrib/admin/static/admin/img/svg/icon-unknown-alt.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#ffffff" d="M1024 1376v-192q0-14-9-23t-23-9h-192q-14 0-23 9t-9 23v192q0 14 9 23t23 9h192q14 0 23-9t9-23zm256-672q0-88-55.5-163t-138.5-116-170-41q-243 0-371 213-15 24 8 42l132 100q7 6 19 6 16 0 25-12 53-68 86-92 34-24 86-24 48 0 85.5 26t37.5 59q0 38-20 61t-68 45q-63 28-115.5 86.5t-52.5 125.5v36q0 14 9 23t23 9h192q14 0 23-9t9-23q0-19 21.5-49.5t54.5-49.5q32-18 49-28.5t46-35 44.5-48 28-60.5 12.5-81zm384 192q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
+</svg>
diff --git a/django/contrib/admin/static/admin/img/svg/icon-unknown.svg b/django/contrib/admin/static/admin/img/svg/icon-unknown.svg
new file mode 100644
index 0000000000..50b4f97276
--- /dev/null
+++ b/django/contrib/admin/static/admin/img/svg/icon-unknown.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#666666" d="M1024 1376v-192q0-14-9-23t-23-9h-192q-14 0-23 9t-9 23v192q0 14 9 23t23 9h192q14 0 23-9t9-23zm256-672q0-88-55.5-163t-138.5-116-170-41q-243 0-371 213-15 24 8 42l132 100q7 6 19 6 16 0 25-12 53-68 86-92 34-24 86-24 48 0 85.5 26t37.5 59q0 38-20 61t-68 45q-63 28-115.5 86.5t-52.5 125.5v36q0 14 9 23t23 9h192q14 0 23-9t9-23q0-19 21.5-49.5t54.5-49.5q32-18 49-28.5t46-35 44.5-48 28-60.5 12.5-81zm384 192q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
+</svg>
diff --git a/django/contrib/admin/static/admin/img/svg/icon-yes.svg b/django/contrib/admin/static/admin/img/svg/icon-yes.svg
new file mode 100644
index 0000000000..5883d877e8
--- /dev/null
+++ b/django/contrib/admin/static/admin/img/svg/icon-yes.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#70bf2b" d="M1412 734q0-28-18-46l-91-90q-19-19-45-19t-45 19l-408 407-226-226q-19-19-45-19t-45 19l-91 90q-18 18-18 46 0 27 18 45l362 362q19 19 45 19 27 0 46-19l543-543q18-18 18-45zm252 162q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
+</svg>
diff --git a/django/contrib/admin/static/admin/img/svg/inline-delete.svg b/django/contrib/admin/static/admin/img/svg/inline-delete.svg
new file mode 100644
index 0000000000..17d1ad67cd
--- /dev/null
+++ b/django/contrib/admin/static/admin/img/svg/inline-delete.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#999999" d="M1277 1122q0-26-19-45l-181-181 181-181q19-19 19-45 0-27-19-46l-90-90q-19-19-46-19-26 0-45 19l-181 181-181-181q-19-19-45-19-27 0-46 19l-90 90q-19 19-19 46 0 26 19 45l181 181-181 181q-19 19-19 45 0 27 19 46l90 90q19 19 46 19 26 0 45-19l181-181 181 181q19 19 45 19 27 0 46-19l90-90q19-19 19-46zm387-226q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
+</svg>
diff --git a/django/contrib/admin/static/admin/img/svg/search.svg b/django/contrib/admin/static/admin/img/svg/search.svg
new file mode 100644
index 0000000000..c8c69b2acc
--- /dev/null
+++ b/django/contrib/admin/static/admin/img/svg/search.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#555555" d="M1216 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z"/>
+</svg>
diff --git a/django/contrib/admin/static/admin/img/svg/selector-icons.svg b/django/contrib/admin/static/admin/img/svg/selector-icons.svg
new file mode 100644
index 0000000000..926b8e21b5
--- /dev/null
+++ b/django/contrib/admin/static/admin/img/svg/selector-icons.svg
@@ -0,0 +1,34 @@
+<svg width="16" height="192" viewBox="0 0 1792 21504" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <g id="up">
+      <path d="M1412 895q0-27-18-45l-362-362-91-91q-18-18-45-18t-45 18l-91 91-362 362q-18 18-18 45t18 45l91 91q18 18 45 18t45-18l189-189v502q0 26 19 45t45 19h128q26 0 45-19t19-45v-502l189 189q19 19 45 19t45-19l91-91q18-18 18-45zm252 1q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
+    </g>
+    <g id="down">
+      <path d="M1412 897q0-27-18-45l-91-91q-18-18-45-18t-45 18l-189 189v-502q0-26-19-45t-45-19h-128q-26 0-45 19t-19 45v502l-189-189q-19-19-45-19t-45 19l-91 91q-18 18-18 45t18 45l362 362 91 91q18 18 45 18t45-18l91-91 362-362q18-18 18-45zm252-1q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
+    </g>
+    <g id="left">
+      <path d="M1408 960v-128q0-26-19-45t-45-19h-502l189-189q19-19 19-45t-19-45l-91-91q-18-18-45-18t-45 18l-362 362-91 91q-18 18-18 45t18 45l91 91 362 362q18 18 45 18t45-18l91-91q18-18 18-45t-18-45l-189-189h502q26 0 45-19t19-45zm256-64q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
+    </g>
+    <g id="right">
+      <path d="M1413 896q0-27-18-45l-91-91-362-362q-18-18-45-18t-45 18l-91 91q-18 18-18 45t18 45l189 189h-502q-26 0-45 19t-19 45v128q0 26 19 45t45 19h502l-189 189q-19 19-19 45t19 45l91 91q18 18 45 18t45-18l362-362 91-91q18-18 18-45zm251 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
+    </g>
+    <g id="clearall">
+      <path transform="translate(336, 336) scale(0.75)" d="M1037 1395l102-102q19-19 19-45t-19-45l-307-307 307-307q19-19 19-45t-19-45l-102-102q-19-19-45-19t-45 19l-454 454q-19 19-19 45t19 45l454 454q19 19 45 19t45-19zm627-499q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
+    </g>
+    <g id="chooseall">
+      <path transform="translate(336, 336) scale(0.75)" d="M845 1395l454-454q19-19 19-45t-19-45l-454-454q-19-19-45-19t-45 19l-102 102q-19 19-19 45t19 45l307 307-307 307q-19 19-19 45t19 45l102 102q19 19 45 19t45-19zm819-499q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
+    </g>
+  </defs>
+  <use xlink:href="#up" x="0" y="0" fill="#666666" />
+  <use xlink:href="#up" x="0" y="1792" fill="#447e9b" />
+  <use xlink:href="#down" x="0" y="3584" fill="#666666" />
+  <use xlink:href="#down" x="0" y="5376" fill="#447e9b" />
+  <use xlink:href="#left" x="0" y="7168" fill="#666666" />
+  <use xlink:href="#left" x="0" y="8960" fill="#447e9b" />
+  <use xlink:href="#right" x="0" y="10752" fill="#666666" />
+  <use xlink:href="#right" x="0" y="12544" fill="#447e9b" />
+  <use xlink:href="#clearall" x="0" y="14336" fill="#666666" />
+  <use xlink:href="#clearall" x="0" y="16128" fill="#447e9b" />
+  <use xlink:href="#chooseall" x="0" y="17920" fill="#666666" />
+  <use xlink:href="#chooseall" x="0" y="19712" fill="#447e9b" />
+</svg>
diff --git a/django/contrib/admin/static/admin/img/svg/sorting-icons.svg b/django/contrib/admin/static/admin/img/svg/sorting-icons.svg
new file mode 100644
index 0000000000..7c31ec9114
--- /dev/null
+++ b/django/contrib/admin/static/admin/img/svg/sorting-icons.svg
@@ -0,0 +1,19 @@
+<svg width="14" height="84" viewBox="0 0 1792 10752" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <g id="sort">
+      <path d="M1408 1088q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45zm0-384q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z"/>
+    </g>
+    <g id="ascending">
+      <path d="M1408 1216q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z"/>
+    </g>
+    <g id="descending">
+      <path d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
+    </g>
+  </defs>
+  <use xlink:href="#sort" x="0" y="0" fill="#999999" />
+  <use xlink:href="#sort" x="0" y="1792" fill="#447e9b" />
+  <use xlink:href="#ascending" x="0" y="3584" fill="#999999" />
+  <use xlink:href="#ascending" x="0" y="5376" fill="#447e9b" />
+  <use xlink:href="#descending" x="0" y="7168" fill="#999999" />
+  <use xlink:href="#descending" x="0" y="8960" fill="#447e9b" />
+</svg>
diff --git a/django/contrib/admin/static/admin/img/svg/tooltag-add.svg b/django/contrib/admin/static/admin/img/svg/tooltag-add.svg
new file mode 100644
index 0000000000..1ca64ae5b0
--- /dev/null
+++ b/django/contrib/admin/static/admin/img/svg/tooltag-add.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#ffffff" d="M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z"/>
+</svg>
diff --git a/django/contrib/admin/static/admin/img/svg/tooltag-arrowright.svg b/django/contrib/admin/static/admin/img/svg/tooltag-arrowright.svg
new file mode 100644
index 0000000000..b664d61937
--- /dev/null
+++ b/django/contrib/admin/static/admin/img/svg/tooltag-arrowright.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#ffffff" d="M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z"/>
+</svg>
diff --git a/django/contrib/admin/templates/admin/edit_inline/tabular.html b/django/contrib/admin/templates/admin/edit_inline/tabular.html
index a890cc334d..4d83c25939 100644
--- a/django/contrib/admin/templates/admin/edit_inline/tabular.html
+++ b/django/contrib/admin/templates/admin/edit_inline/tabular.html
@@ -10,7 +10,7 @@
      {% for field in inline_admin_formset.fields %}
        {% if not field.widget.is_hidden %}
          <th{% if forloop.first %} colspan="2"{% endif %}{% if field.required %} class="required"{% endif %}>{{ field.label|capfirst }}
-         {% if field.help_text %}&nbsp;<img src="{% static "admin/img/icon-unknown.gif" %}" class="help help-tooltip" width="10" height="10" alt="({{ field.help_text|striptags }})" title="{{ field.help_text|striptags }}" />{% endif %}
+         {% if field.help_text %}&nbsp;<img src="{% static "admin/img/svg/icon-unknown.svg" %}" class="help help-tooltip" width="10" height="10" alt="({{ field.help_text|striptags }})" title="{{ field.help_text|striptags }}" />{% endif %}
          </th>
        {% endif %}
      {% endfor %}
diff --git a/django/contrib/admin/templates/admin/related_widget_wrapper.html b/django/contrib/admin/templates/admin/related_widget_wrapper.html
index 51c56e723e..54e43f8e99 100644
--- a/django/contrib/admin/templates/admin/related_widget_wrapper.html
+++ b/django/contrib/admin/templates/admin/related_widget_wrapper.html
@@ -6,24 +6,21 @@
         <a class="related-widget-wrapper-link change-related" id="change_id_{{ name }}"
             data-href-template="{{ change_related_template_url }}?{{ url_params }}"
             title="{% blocktrans %}Change selected {{ model }}{% endblocktrans %}">
-            <img src="{% static 'admin/img/icon_changelink.gif' %}" width="10" height="10"
-                alt="{% trans 'Change' %}"/>
+            <img src="{% static 'admin/img/svg/icon-changelink.svg' %}" alt="{% trans 'Change' %}"/>
         </a>
         {% endif %}
         {% if can_add_related %}
         <a class="related-widget-wrapper-link add-related" id="add_id_{{ name }}"
             href="{{ add_related_url }}?{{ url_params }}"
             title="{% blocktrans %}Add another {{ model }}{% endblocktrans %}">
-            <img src="{% static 'admin/img/icon_addlink.gif' %}" width="10" height="10"
-                alt="{% trans 'Add' %}"/>
+            <img src="{% static 'admin/img/svg/icon-addlink.svg' %}" alt="{% trans 'Add' %}"/>
         </a>
         {% endif %}
         {% if can_delete_related %}
         <a class="related-widget-wrapper-link delete-related" id="delete_id_{{ name }}"
             data-href-template="{{ delete_related_template_url }}?{{ url_params }}"
             title="{% blocktrans %}Delete selected {{ model }}{% endblocktrans %}">
-            <img src="{% static 'admin/img/icon_deletelink.gif' %}" width="10" height="10"
-                alt="{% trans 'Delete' %}"/>
+            <img src="{% static 'admin/img/svg/icon-deletelink.svg' %}" alt="{% trans 'Delete' %}"/>
         </a>
         {% endif %}
     {% endblock %}
diff --git a/django/contrib/admin/templates/admin/search_form.html b/django/contrib/admin/templates/admin/search_form.html
index a9bb014748..59d5fc12da 100644
--- a/django/contrib/admin/templates/admin/search_form.html
+++ b/django/contrib/admin/templates/admin/search_form.html
@@ -2,7 +2,7 @@
 {% if cl.search_fields %}
 <div id="toolbar"><form id="changelist-search" action="" method="get">
 <div><!-- DIV needed for valid HTML -->
-<label for="searchbar"><img src="{% static "admin/img/icon_searchbox.png" %}" alt="Search" /></label>
+<label for="searchbar"><img src="{% static "admin/img/svg/search.svg" %}" alt="Search" /></label>
 <input type="text" size="40" name="{{ search_var }}" value="{{ cl.query }}" id="searchbar" />
 <input type="submit" value="{% trans 'Search' %}" />
 {% if show_result_count %}
diff --git a/django/contrib/admin/templatetags/admin_list.py b/django/contrib/admin/templatetags/admin_list.py
index f3fbaa7ac1..ca161b41c4 100644
--- a/django/contrib/admin/templatetags/admin_list.py
+++ b/django/contrib/admin/templatetags/admin_list.py
@@ -174,7 +174,7 @@ def result_headers(cl):
 
 
 def _boolean_icon(field_val):
-    icon_url = static('admin/img/icon-%s.gif' %
+    icon_url = static('admin/img/svg/icon-%s.svg' %
                       {True: 'yes', False: 'no', None: 'unknown'}[field_val])
     return format_html('<img src="{}" alt="{}" />', icon_url, field_val)
 
diff --git a/docs/releases/1.9.txt b/docs/releases/1.9.txt
index 35b45ead43..fa17e9d770 100644
--- a/docs/releases/1.9.txt
+++ b/docs/releases/1.9.txt
@@ -118,9 +118,10 @@ though:
 New styling for ``contrib.admin``
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-The admin sports a modern, flat design. It still provides a fully-functional
-experience to `YUI's A-grade`_ browsers. Older browser may experience varying
-levels of graceful degradation.
+The admin sports a modern, flat design with new SVG icons which look perfect
+on hi-dpi screens. It still provides a fully-functional experience to
+`YUI's A-grade`_ browsers. Older browser may experience varying levels of
+graceful degradation.
 
 .. _YUI's A-grade: https://github.com/yui/yui3/wiki/Graded-Browser-Support
 
diff --git a/tests/admin_inlines/tests.py b/tests/admin_inlines/tests.py
index d5807ba278..4ecee471c8 100644
--- a/tests/admin_inlines/tests.py
+++ b/tests/admin_inlines/tests.py
@@ -143,10 +143,10 @@ class TestInline(TestDataMixin, TestCase):
         """
         response = self.client.get(reverse('admin:admin_inlines_holder4_add'))
         self.assertContains(response, '<p class="help">Awesome stacked help text is awesome.</p>', 4)
-        self.assertContains(response, '<img src="/static/admin/img/icon-unknown.gif" class="help help-tooltip" width="10" height="10" alt="(Awesome tabular help text is awesome.)" title="Awesome tabular help text is awesome." />', 1)
+        self.assertContains(response, '<img src="/static/admin/img/svg/icon-unknown.svg" class="help help-tooltip" width="10" height="10" alt="(Awesome tabular help text is awesome.)" title="Awesome tabular help text is awesome." />', 1)
         # ReadOnly fields
         response = self.client.get(reverse('admin:admin_inlines_capofamiglia_add'))
-        self.assertContains(response, '<img src="/static/admin/img/icon-unknown.gif" class="help help-tooltip" width="10" height="10" alt="(Help text for ReadOnlyInline)" title="Help text for ReadOnlyInline" />', 1)
+        self.assertContains(response, '<img src="/static/admin/img/svg/icon-unknown.svg" class="help help-tooltip" width="10" height="10" alt="(Help text for ReadOnlyInline)" title="Help text for ReadOnlyInline" />', 1)
 
     def test_inline_hidden_field_no_column(self):
         """#18263 -- Make sure hidden fields don't get a column in tabular inlines"""
diff --git a/tests/admin_utils/tests.py b/tests/admin_utils/tests.py
index 12254a983f..c38141c897 100644
--- a/tests/admin_utils/tests.py
+++ b/tests/admin_utils/tests.py
@@ -166,7 +166,7 @@ class UtilsTests(SimpleTestCase):
         # Regression test for #13071: NullBooleanField has special
         # handling.
         display_value = display_for_field(None, models.NullBooleanField(), self.empty_value)
-        expected = '<img src="%sadmin/img/icon-unknown.gif" alt="None" />' % settings.STATIC_URL
+        expected = '<img src="%sadmin/img/svg/icon-unknown.svg" alt="None" />' % settings.STATIC_URL
         self.assertHTMLEqual(display_value, expected)
 
         display_value = display_for_field(None, models.DecimalField(), self.empty_value)
diff --git a/tests/admin_views/tests.py b/tests/admin_views/tests.py
index 9e6c349a36..928186c6d7 100644
--- a/tests/admin_views/tests.py
+++ b/tests/admin_views/tests.py
@@ -619,7 +619,7 @@ class AdminViewBasicTest(AdminViewBasicTestCase):
     def test_change_list_null_boolean_display(self):
         Post.objects.create(public=None)
         response = self.client.get(reverse('admin:admin_views_post_changelist'))
-        self.assertContains(response, 'icon-unknown.gif')
+        self.assertContains(response, 'icon-unknown.svg')
 
     def test_i18n_language_non_english_default(self):
         """