<div class="badge badge-themes dashicons dashicons-admin-appearance"></div>

<div class="badge badge-plugins dashicons dashicons-admin-plugins"></div>

<div class="badge badge-community dashicons dashicons-groups"></div>

<div class="badge badge-meta dashicons dashicons-networking"></div>

<div class="badge badge-code dashicons dashicons-editor-code"></div>

<div class="badge badge-support dashicons dashicons-admin-post"></div>

<div class="badge badge-wctv dashicons dashicons-video-alt2"></div>

<div class="badge badge-props dashicons dashicons-awards"></div>

<div class="badge badge-organizer dashicons dashicons-businessman"></div>

<div class="badge badge-speaker dashicons dashicons-star-filled"></div>

@import url(https://wordpress.github.io/dashicons/css/dashicons.css);
body {
  padding: 60px;
}

@mixin badge-color($color){
  background: $color;
  box-shadow: 0 0 0 4px $color;
}

.badge {
  margin: 4px;
  margin-right: 20px;
  width: 69px;
  height: 69px;
  border: 2px solid white;
  border-radius: 50%;
  box-sizing: border-box;
}

.badge-themes {
    @include badge-color(#5C3D99);
}

.badge-plugins {
  @include badge-color(#2EBC74);
}

.badge-community {
  @include badge-color(#2FBAAC);
}

.badge-meta {
  @include badge-color(#999);
}

.badge-code {
  @include badge-color(#2fa2cc);
}

.badge-support {
  @include badge-color(#b4cc2f);
}

.badge-wctv {
  @include badge-color(#cc492f);

}

.badge-props {
  @include badge-color(#e9c917);
}

.badge-organizer {
  @include badge-color(#2f84cc);
}

.badge-speaker {
  @include badge-color(#cc2f54);
}

.dashicons:before {
  position: relative;
  top: 13px;
  left: 1px;
  font-size: 40px;
  color: white;
}

.dashicons-networking:before {
  top: 11px;
  left: 0;
}