diff --git a/src/css/admonitions.css b/src/css/admonitions.css
index 0865ed4..b597cc7 100644
--- a/src/css/admonitions.css
+++ b/src/css/admonitions.css
@@ -1,11 +1,31 @@
 .doc .admonitionblock .icon {
   border-radius: 0.15rem !important;
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.2)) no-repeat 0/2.075em 100%;
+}
+
+.doc .admonitionblock .icon i {
+  background-position-x: 0.5em;
+  width: auto;
+  padding-left: 2em;
+}
+
+.doc i.fa {
+  background: no-repeat 50%/1em 1em;
+}
+
+.doc .admonitionblock .icon i::after {
+  padding: 0 0.5em;
+  margin: 0.05em;
 }
 
 .doc .admonitionblock.note .icon {
   background-color: #217ee7 !important;
 }
 
+.doc .admonitionblock.note td.icon i {
+  background-image: url(/_/img/octicons-16.svg#view-clippy);
+}
+
 .admonitionblock.note .content {
   background-color: #217ee736 !important;
 }
@@ -18,6 +38,10 @@
   background-color: #41af4636 !important;
 }
 
+.doc .admonitionblock.tip td.icon i {
+  background-image: url(/_/img/octicons-16.svg#view-light-bulb);
+}
+
 .doc .admonitionblock.important .icon {
   background-color: #b94a48 !important;
 }
@@ -26,6 +50,10 @@
   background-color: #b94a4836 !important;
 }
 
+.doc .admonitionblock.important td.icon i {
+  background-image: url(/_/img/octicons-16.svg#view-info);
+}
+
 .doc .admonitionblock.caution .icon {
   background-color: #c09853 !important;
 }
@@ -34,6 +62,10 @@
   background-color: #c0985336 !important;
 }
 
+.doc .admonitionblock.caution td.icon i {
+  background-image: url(/_/img/octicons-16.svg#view-alert);
+}
+
 .doc .admonitionblock.warning .icon {
   background-color: #d32f2f !important;
   color: #000 !important;
@@ -42,3 +74,7 @@
 .admonitionblock.warning .content {
   background-color: #d32f2f36 !important;
 }
+
+.doc .admonitionblock.warning td.icon i {
+  background-image: url(/_/img/octicons-16.svg#view-stop);
+}