diff -u b/core/themes/claro/css/components/icon-link.css b/core/themes/claro/css/components/icon-link.css
--- b/core/themes/claro/css/components/icon-link.css
+++ b/core/themes/claro/css/components/icon-link.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
diff -u b/core/themes/claro/css/theme/media-library.css b/core/themes/claro/css/theme/media-library.css
--- b/core/themes/claro/css/theme/media-library.css
+++ b/core/themes/claro/css/theme/media-library.css
@@ -31,7 +31,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -483,7 +483,7 @@
 
 .media-library-wrapper .views-display-link-widget {
   margin-right: 15px;
-  background: url(../../../../misc/icons/333333/grid.svg) left 0 no-repeat; /* LTR */
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23333333' d='M10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3A1.5 1.5 0 0 1 10.5 9zm-8 0h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3A1.5 1.5 0 0 1 2.5 9zm8-8h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3A1.5 1.5 0 0 1 10.5 1zm-8 0h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3A1.5 1.5 0 0 1 2.5 1z'/%3e%3c/svg%3e") left 0 no-repeat; /* LTR */
 }
 
 [dir="rtl"] .media-library-wrapper .views-display-link-widget {
@@ -491,7 +491,7 @@
 }
 
 .media-library-wrapper .views-display-link-widget_table {
-  background: url(../../../../misc/icons/333333/table.svg) left 0 no-repeat; /* LTR */
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23333333' d='M7 15a1.5 1.5 0 0 1 0-3h7a1.5 1.5 0 0 1 0 3H7zm-4.5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM7 9.5a1.5 1.5 0 0 1 0-3h7a1.5 1.5 0 0 1 0 3H7zm-4.5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM7 4a1.5 1.5 0 0 1 0-3h7a1.5 1.5 0 0 1 0 3H7zM2.5 4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3e%3c/svg%3e") left 0 no-repeat; /* LTR */
 }
 
 [dir="rtl"] .media-library-wrapper .views-display-link-widget_table {
@@ -556,10 +556,6 @@
   background: #fff;
 }
 
-.media-library-item--grid:focus {
-  box-shadow: none;
-}
-
 .media-library-item--grid:before {
   position: absolute;
   top: 7px;
@@ -579,2 +575,24 @@
 
+.media-library-item--grid:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.media-library-item--grid:focus > article {
+  outline: 2px
+dotted
+transparent;
+  box-shadow: 0
+0
+0
+2px
+#fff
+,
+0
+0
+0
+5px
+#26a769;
+}
+
 /* Media library widget weight field styles. */
@@ -691,7 +709,12 @@
 }
 
 .media-library-item--grid.checked:before {
-  border-color: #003cc5;
+  border-color: #5a8bed;
+}
+
+.media-library-item--grid .form-boolean--type-checkbox:checked {
+  border-color: #5a8bed;
+  background-color: #5a8bed;
 }
 
 .media-library-item__click-to-select-checkbox {
@@ -895,14 +918,14 @@
 .media-library-item__edit {
   /* !important to override button class border. */
   border: 1px solid #d4d4d8 !important;
-  background-image: url("../../../../misc/icons/545560/pencil.svg");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23545560' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23545560' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23545560' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 12px;
 }
 
 .media-library-item__edit:active {
-  background-image: url("../../../../misc/icons/ffffff/pencil.svg");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23ffffff' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23ffffff' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23ffffff' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
 }
 
 .media-library-item__remove,
@@ -914,7 +937,7 @@
 .media-library-item__remove.button:focus {
   /* !important to override button class border. */
   border: 1px solid #d4d4d8 !important;
-  background-image: url("../../../../misc/icons/545560/ex.svg");
+  background-image: url("data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.34351 2.34283L13.6572 13.6565' stroke='%2355565B' stroke-width='3'/%3e%3cpath d='M2.34351 13.6572L13.6572 2.34349' stroke='%2355565B' stroke-width='3'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 12px;
@@ -925,7 +948,7 @@
 .media-library-item__remove.button:disabled:active {
   /* !important to override button class border. */
   border-color: #003cc5 !important;
-  background-image: url("../../../../misc/icons/ffffff/ex.svg");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23ffffff' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e");
 }
 
 /**
@@ -971,7 +994,7 @@
 .media-library-add-form__remove-button {
   position: absolute;
   right: 0;
-  background-image: url("../../../../misc/icons/000000/ex.svg");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23000000' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: 0.5rem center;
   background-size: 0.75rem;
diff -u b/core/themes/claro/css/theme/media-library.pcss.css b/core/themes/claro/css/theme/media-library.pcss.css
--- b/core/themes/claro/css/theme/media-library.pcss.css
+++ b/core/themes/claro/css/theme/media-library.pcss.css
@@ -451,10 +451,6 @@
   background: #fff;
 }
 
-.media-library-item--grid:focus {
-  box-shadow: none;
-}
-
 .media-library-item--grid:before {
   position: absolute;
   top: 7px;
@@ -471,2 +467,12 @@
 
+.media-library-item--grid:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.media-library-item--grid:focus > article {
+  outline: var(--focus-outline);
+  box-shadow: var(--focus-box-shadow);
+}
+
 /* Media library widget weight field styles. */
@@ -577,7 +583,12 @@
 }
 
 .media-library-item--grid.checked:before {
-  border-color: var(--color-absolutezero);
+  border-color: var(--button--focus-border-color);
+}
+
+.media-library-item--grid .form-boolean--type-checkbox:checked {
+  border-color: var(--button--focus-border-color);
+  background-color: var(--button--focus-border-color);
 }
 
 .media-library-item__click-to-select-checkbox {