diff --git a/pages/css/components/toasts.md b/pages/css/components/toasts.md
index fc67375f..35b28521 100644
--- a/pages/css/components/toasts.md
+++ b/pages/css/components/toasts.md
@@ -82,7 +82,7 @@ Use `.Toast-dismissButton` to allow a user to explicitly dismiss a Toast.
   </span>
   <span class="Toast-content">This toast is dismissable.</span>
   <button class="Toast-dismissButton">
-    <svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" role="img"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg>
+    <svg class="octicon octicon-x" style="fill:currentcolor" viewBox="0 0 12 16" version="1.1" width="12" height="16" role="img"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg>
   </button>
 </div>
 ```
diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss
index d5cb9864..081578b3 100644
--- a/src/toasts/toasts.scss
+++ b/src/toasts/toasts.scss
@@ -22,7 +22,6 @@
   width: $spacer-3 * 3;
   flex-shrink: 0;
   color: $text-white;
-  fill: $text-white;
   background-color: $blue-500;
   border-top-left-radius: inherit;
   border-bottom-left-radius: inherit;
@@ -40,12 +39,12 @@
 
   &:focus,
   &:hover {
-    fill: $text-gray;
+    color: $text-gray;
     outline: none;
   }
 
   &:active {
-    fill: $gray-400;
+    color: $gray-400;
   }
 }