diff --git a/layouts/partials/blog_single.html b/layouts/partials/blog_single.html
index a2ca07f..91238be 100644
--- a/layouts/partials/blog_single.html
+++ b/layouts/partials/blog_single.html
@@ -23,7 +23,11 @@
                     {{ if not .Site.Params.noreadingtime }}
                     <div class="reading-time middot">{{ .ReadingTime }} minute read</div>
                     {{ end }}
-                    <div class="tags">
+                    {{ if .Site.Params.tagicons }}
+                      <div class="tags tag-icons">
+                    {{ else }}
+                      <div class="tags">
+                    {{ end }}
                         <ul>
                           {{ range .Params.tags }}
                             <li class="middot"><a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a> </li>
diff --git a/layouts/partials/css/main.css b/layouts/partials/css/main.css
index 5c4990b..2d2a7ca 100644
--- a/layouts/partials/css/main.css
+++ b/layouts/partials/css/main.css
@@ -359,6 +359,26 @@ div.main .content .front-matter .tags ul li:hover {
 div.main .content .front-matter .tags ul li a {
   color: #666666;
 }
+{{ if .Site.Params.tagicons }}
+div.main .content .front-matter .tags.tag-icons .middot {
+  margin-left: 8px;
+}
+div.main .content .front-matter .tags.tag-icons .middot a {
+  display: inline-block;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 0 5px 5px 0;
+  position: relative;
+}
+div.main .content .front-matter .tags.tag-icons .middot a:after {
+  content: " ";
+  position: absolute;
+  right: 100%;
+  border-top: 11.2px solid transparent;
+  border-right: 11.2px solid #eee;
+  border-bottom: 11.2px solid transparent;
+}
+{{ end }}
 div.main .container.f04 {
   -webkit-justify-content: center;
   -moz-justify-content: center;