diff --git a/README.md b/README.md
index 6f1a97b..69cf2f0 100644
--- a/README.md
+++ b/README.md
@@ -102,7 +102,7 @@ The `<box-icon>` custom element supports the following attributes:
 -   `rotate`: one of the following values: `90`, `180`, `270`
 -   `flip`:  one of the following values: `horizontal`, `vertical`
 -   `border`: one of the following values: `square`, `circle`
--   `animation`: One of the following values: `spin`, `tada`, `flashing`, `burst`, `fade-left`, `fade-right`, `spin-hover`, `tada-hover`, `flashing-hover`, `burst-hover`, `fade-left-hover`, `fade-right-hover`
+-   `animation`: One of the following values: `spin`, `spin-reverse`, `tada`, `flashing`, `burst`, `fade-left`, `fade-right`, `spin-hover`, `spin-reverse-hover`,`tada-hover`, `flashing-hover`, `burst-hover`, `fade-left-hover`, `fade-right-hover`
 -   `pull`: one of the following values: `left`,`right`
 The Custom Element class (`BoxIconElement`) exposes the following static members:
 
diff --git a/css/animations.css b/css/animations.css
index 6225657..a654547 100644
--- a/css/animations.css
+++ b/css/animations.css
@@ -24,6 +24,32 @@
                 transform: rotate(359deg);
     }
 }
+@-webkit-keyframes spin-reverse
+{
+    0%
+    {
+        -webkit-transform: rotate(0);
+                transform: rotate(0);
+    }
+    100%
+    {
+        -webkit-transform: rotate(-359deg);
+                transform: rotate(-359deg);
+    }
+}
+@keyframes spin-reverse
+{
+    0%
+    {
+        -webkit-transform: rotate(0);
+                transform: rotate(0);
+    }
+    100%
+    {
+        -webkit-transform: rotate(-359deg);
+                transform: rotate(-359deg);
+    }
+}
 @-webkit-keyframes burst
 {
     0%
@@ -312,6 +338,17 @@
             animation: spin 2s linear infinite;
 }
 
+.bx-spin-reverse
+{
+    -webkit-animation: spin-reverse 2s linear infinite;
+            animation: spin-reverse 2s linear infinite;
+}
+.bx-spin-reverse-hover:hover
+{
+    -webkit-animation: spin-reverse 2s linear infinite;
+            animation: spin-reverse 2s linear infinite;
+}
+
 .bx-tada
 {
     -webkit-animation: tada 1.5s ease infinite;
diff --git a/css/boxicons.css b/css/boxicons.css
index db98f45..2215956 100644
--- a/css/boxicons.css
+++ b/css/boxicons.css
@@ -76,6 +76,32 @@
                 transform: rotate(359deg);
     }
 }
+@-webkit-keyframes spin-reverse
+{
+    0%
+    {
+        -webkit-transform: rotate(0);
+                transform: rotate(0);
+    }
+    100%
+    {
+        -webkit-transform: rotate(-359deg);
+                transform: rotate(-359deg);
+    }
+}
+@keyframes spin-reverse
+{
+    0%
+    {
+        -webkit-transform: rotate(0);
+                transform: rotate(0);
+    }
+    100%
+    {
+        -webkit-transform: rotate(-359deg);
+                transform: rotate(-359deg);
+    }
+}
 @-webkit-keyframes burst
 {
     0%
@@ -364,6 +390,17 @@
             animation: spin 2s linear infinite;
 }
 
+.bx-spin-reverse
+{
+    -webkit-animation: spin-reverse 2s linear infinite;
+            animation: spin-reverse 2s linear infinite;
+}
+.bx-spin-reverse-hover:hover
+{
+    -webkit-animation: spin-reverse 2s linear infinite;
+            animation: spin-reverse 2s linear infinite;
+}
+
 .bx-tada
 {
     -webkit-animation: tada 1.5s ease infinite;
diff --git a/dev.box-icon-element.html b/dev.box-icon-element.html
index b9ba0a8..818648a 100644
--- a/dev.box-icon-element.html
+++ b/dev.box-icon-element.html
@@ -61,12 +61,14 @@
         <select name="animation">
             <option value="" selected>(none)</option>
             <option value="spin">spin</option>
+            <option value="spin-reverse">spin-reverse</option>
             <option value="tada">tada</option>
             <option value="flashing">flashing</option>
             <option value="burst">burst</option>
             <option value="fade-left">fade-left</option>
             <option value="fade-right">fade-right</option>
             <option value="spin-hover">spin-hover</option>
+            <option value="spin-reverse-hover">spin-reverse-hover</option>
             <option value="tada-hover">tada-hover</option>
             <option value="flashing-hover">flashing-hover</option>
             <option value="burst-hover">burst-hover</option>