diff --git a/pages/_docs/badges.md b/pages/_docs/badges.md
index e4249c72e..44623a40e 100644
--- a/pages/_docs/badges.md
+++ b/pages/_docs/badges.md
@@ -56,3 +56,25 @@ If you don't want your badge to contain any text you can do it by leaving the ht
 <a href="#" class="badge bg-{{ color[0] }}"></a>
 {% endfor %}
 {% endexample %}
+
+### Badge addons
+
+You can add badge addon by adding `.badge-addon` class.
+
+{% example %}
+{% include ui/badge.html text="task" color="green" addon="finished" %}
+{% include ui/badge.html text="bundle" color="purple" addon="passing" %}
+{% include ui/badge.html text="CSS gzip size" color="red-lt" addon="20.9kB" addon-color="red" %}
+{% endexample %}
+
+### Badge avatars
+
+If you want to add an avatar to your badge just create `.badge-avatar` class.
+
+{% example %}
+{% include ui/badge.html person-id=1 color="blue" %}
+{% include ui/badge.html person-id=2 color="blue" %}
+{% include ui/badge.html person-id=3 color="blue" %}
+{% include ui/badge.html person-id=4 color="blue" %}
+{% include ui/badge.html person-id=5 color="blue" %}
+{% endexample %}
\ No newline at end of file
diff --git a/pages/_includes/ui/badge.html b/pages/_includes/ui/badge.html
index dd95f023b..beb5a5a9c 100644
--- a/pages/_includes/ui/badge.html
+++ b/pages/_includes/ui/badge.html
@@ -1 +1,18 @@
-<span class="badge bg-{{ include.color | default: 'primary' }}{% if include.class %} {{ include.class }}{% endif %}">{{ include.text }}</span>
+{% assign el = 'span' %}
+<{{ el }} class="badge bg-{{ include.color | default: 'primary' }}{% if include.class %} {{ include.class }}{% endif %}">
+{% if include.person-id %}
+    {% assign person-id = include.person-id | minus: 1 %}
+    {% assign person = site.data.people[person-id] %}
+    {% assign src = person.photo %}
+    {% unless src %}
+        {% assign placeholder = person.full_name | first_letters %}
+    {% endunless %}
+    <{{ el }} class="badge-avatar" style="background-image: url({{ site.base }}/{{ src }})">{% unless src %}{{ person.full_name | first_letters }}{% endunless %}</{{ el }}>
+ {% endif %}
+{% if include.text %}
+    {{ include.text }}
+{% else %}
+    {{ person.full_name }}
+{% endif %}
+{% if include.addon %}<{{ el }} class="badge-addon {% if include.addon-color%}bg-{{ include.addon-color }}{% endif %}">{{ include.addon }}</{{ el }}>{% endif %}
+</{{ el }}>
diff --git a/scss/ui/_badges.scss b/scss/ui/_badges.scss
index 8c3cfa30b..f1b7193a3 100644
--- a/scss/ui/_badges.scss
+++ b/scss/ui/_badges.scss
@@ -1,9 +1,13 @@
-
-
 .badge {
   @include subheader(false);
-  background: $gray-200;
-
+  display: inline-flex;
+  justify-content: center;
+  padding: 0 .5em;
+  line-height: 1.75em;
+  background: $gray-500;
+  overflow: hidden;
+  vertical-align: text-bottom;
+  
   @at-root a#{&} {
     color: $white;
   }
@@ -23,8 +27,8 @@
   position: absolute;
   top: 25%;
   right: 0;
-  min-width: 1rem;
-  min-height: 1rem;
+  min-width: 1.75em;
+  min-height: 1.75em;
   padding: 0 .25rem;
   line-height: 1rem;
   background-clip: padding-box;
@@ -39,4 +43,24 @@
 
 .badge-pill {
   border-radius: 100px;
+  min-width: 1.75em;
 }
+
+.badge-avatar {
+  box-sizing: content-box;
+  width: 1.75em;
+  margin: 0 .5em 0 -.5em;
+  color: $light-white;
+  background: $light-black no-repeat center/cover;
+  vertical-align: text-bottom;
+}
+
+.badge-addon {
+  padding: 0 .5rem;
+  margin: 0 -.5em 0 .5em;
+  min-width: 1.75em;
+  background: $light-black;
+  text-align: center;
+  color: $white;
+  text-decoration: none;
+}
\ No newline at end of file