diff --git a/preview-src/samples/edge-cases/index.adoc b/preview-src/samples/edge-cases/index.adoc
index 10f84fb..2371845 100644
--- a/preview-src/samples/edge-cases/index.adoc
+++ b/preview-src/samples/edge-cases/index.adoc
@@ -122,3 +122,11 @@ Content-Length: 121
   } ]
 }
 ----
+
+== Icon coloring
+
+icon:heart[2x,role=red]
+icon:heart[2x,role=blue]
+icon:heart[2x,role=green]
+icon:heart[2x,role=orange]
+icon:heart[2x,role=yellow]
\ No newline at end of file
diff --git a/src/css/main.css b/src/css/main.css
index 4ca9407..e6b7327 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -327,3 +327,21 @@ html.dark-theme #modal-versions .modal-versions-close .cls-1h {
 html.dark-theme .invert-dark img {
   filter: invert(1);
 }
+
+.icon.red {
+  color: red;
+}
+.icon.blue {
+  color: blue;
+}
+.icon.yellow {
+  color: yellow;
+}
+.icon.orange {
+  color: orange;
+}
+.icon.green {
+  color: green;
+}
+
+