diff --git a/ghc.mk b/ghc.mk
index fc4a4632c37577ae69c56e0a67501961c8b70b41..46462246e90d30a0e020d8b38945f524117971a1 100644
--- a/ghc.mk
+++ b/ghc.mk
@@ -44,9 +44,7 @@ utils/haddock_dist_DATA_FILES += html/Ocean.theme/hslogo-16.png
 utils/haddock_dist_DATA_FILES += html/Ocean.theme/minus.gif
 utils/haddock_dist_DATA_FILES += html/Ocean.theme/ocean.css
 utils/haddock_dist_DATA_FILES += html/Ocean.theme/plus.gif
-utils/haddock_dist_DATA_FILES += html/Ocean.theme/synopsis.png
 utils/haddock_dist_DATA_FILES += html/Linuwial.std-theme/linuwial.css
-utils/haddock_dist_DATA_FILES += html/Linuwial.std-theme/synopsis.png
 utils/haddock_dist_DATA_FILES += html/solarized.css
 utils/haddock_dist_DATA_FILES += html/highlight.js
 utils/haddock_dist_DATA_FILES += latex/haddock.sty
diff --git a/haddock-api/haddock-api.cabal b/haddock-api/haddock-api.cabal
index 3a881cac89e005b51baf15c60b24f2063c1d8c4f..036f44d46218af3c53a42230d14ef1f048d0cf4b 100644
--- a/haddock-api/haddock-api.cabal
+++ b/haddock-api/haddock-api.cabal
@@ -34,9 +34,7 @@ data-files:
   html/Ocean.theme/minus.gif
   html/Ocean.theme/ocean.css
   html/Ocean.theme/plus.gif
-  html/Ocean.theme/synopsis.png
   html/Linuwial.std-theme/linuwial.css
-  html/Linuwial.std-theme/synopsis.png
   latex/haddock.sty
 
 library
diff --git a/haddock-api/resources/html/Linuwial.std-theme/linuwial.css b/haddock-api/resources/html/Linuwial.std-theme/linuwial.css
index 4164b849fb85c513912c566e9408ce1ac1d595d8..439b98d77c3be65a916b5ee77c9847e0e8203ba4 100644
--- a/haddock-api/resources/html/Linuwial.std-theme/linuwial.css
+++ b/haddock-api/resources/html/Linuwial.std-theme/linuwial.css
@@ -531,17 +531,21 @@ table.info {
 #synopsis summary {
   display: block;
   float: right;
-  width: 29px;
-  color: rgba(255,255,255,0);
-  height: 110px;
+  color: #536371;
   margin: 0;
-  font-size: 1px;
-  padding: 0;
-  background: url(synopsis.png) no-repeat 0px -8px;
+  padding: 5px;
+  writing-mode: vertical-rl;
+  background: rgb(250,247,224);
+  rotate: 180deg;
+}
+#synopsis summary::after {
+  content: "\2A20";
+  rotate: -90deg;
+  color: #b0b0af;
+  display: inline-block;
 }
-
-#synopsis details[open] > summary {
-  background: url(synopsis.png) no-repeat -75px -8px;
+#synopsis details[open] > summary::after {
+  rotate: 90deg;
 }
 
 #synopsis details:not([open]) > ul {
diff --git a/haddock-api/resources/html/Linuwial.std-theme/synopsis.png b/haddock-api/resources/html/Linuwial.std-theme/synopsis.png
deleted file mode 100644
index 85fb86ec84907bcc86531dc82871948ff4d471fa..0000000000000000000000000000000000000000
Binary files a/haddock-api/resources/html/Linuwial.std-theme/synopsis.png and /dev/null differ
diff --git a/haddock-api/resources/html/Ocean.theme/ocean.css b/haddock-api/resources/html/Ocean.theme/ocean.css
index 32c689275b4b39c61ccbd708bb69a409512a83d0..7017f6e86edc931680c4c366e9e5b1aab253c60a 100644
--- a/haddock-api/resources/html/Ocean.theme/ocean.css
+++ b/haddock-api/resources/html/Ocean.theme/ocean.css
@@ -358,18 +358,22 @@ div#style-menu-holder {
 
 #synopsis summary {
   display: block;
-  float: left;
-  width: 29px;
-  color: rgba(255,255,255,0);
-  height: 110px;
+  float: right;
+  color: #536371;
   margin: 0;
-  font-size: 1px;
-  padding: 0;
-  background: url(synopsis.png) no-repeat 0px -8px;
-}
-
-#synopsis details[open] > summary {
-  background: url(synopsis.png) no-repeat -64px -8px;
+  padding: 5px;
+  writing-mode: vertical-rl;
+  background: rgb(250,247,224);
+  rotate: 180deg;
+}
+#synopsis summary::after {
+  content: "\2A20";
+  rotate: -90deg;
+  color: #b0b0af;
+  display: inline-block;
+}
+#synopsis details[open] > summary::after {
+  rotate: 90deg;
 }
 
 #synopsis ul {
diff --git a/haddock-api/resources/html/Ocean.theme/synopsis.png b/haddock-api/resources/html/Ocean.theme/synopsis.png
deleted file mode 100644
index 85fb86ec84907bcc86531dc82871948ff4d471fa..0000000000000000000000000000000000000000
Binary files a/haddock-api/resources/html/Ocean.theme/synopsis.png and /dev/null differ