diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot
index 60e5afa..355a86b 100644
Binary files a/src/fonts/cartoIcon.eot and b/src/fonts/cartoIcon.eot differ
diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf
index 4279ce3..53a07ce 100644
Binary files a/src/fonts/cartoIcon.ttf and b/src/fonts/cartoIcon.ttf differ
diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff
index cf2d67c..cd45a0d 100644
Binary files a/src/fonts/cartoIcon.woff and b/src/fonts/cartoIcon.woff differ
diff --git a/src/scss/cdb-components/shapes/add.scss b/src/scss/cdb-components/shapes/add.scss
index a6b78ec..6fa4b2b 100644
--- a/src/scss/cdb-components/shapes/add.scss
+++ b/src/scss/cdb-components/shapes/add.scss
@@ -49,10 +49,15 @@ Description
   width: 16px;
   height: 16px;
   text-align: center;
-  &:hover {
-    cursor: pointer;
-  }
 }
+.CDB-Shape--medium {
+  width: 24px;
+  height: 24px;
+}
+.CDB-Shape:hover {
+  cursor: pointer;
+}
+
 
 .CDB-Shape-add {
   position: relative;
diff --git a/src/scss/cdb-components/shapes/threePoints.scss b/src/scss/cdb-components/shapes/threePoints.scss
index a184921..bcafc2b 100644
--- a/src/scss/cdb-components/shapes/threePoints.scss
+++ b/src/scss/cdb-components/shapes/threePoints.scss
@@ -4,6 +4,41 @@
 Description
 
 ```
+<h2>24px</h2>
+<div style="padding: 20px;">
+  <button class="CDB-Shape CDB-Shape--medium" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-threePoints is-horizontal is-medium">
+      <div class="CDB-Shape-threePointsItem is-round"></div>
+      <div class="CDB-Shape-threePointsItem is-round"></div>
+      <div class="CDB-Shape-threePointsItem is-round"></div>
+    </div>
+  </button>
+</div>
+<div style="padding: 20px;">
+  <button class="CDB-Shape CDB-Shape--medium" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-threePoints is-horizontal is-blue is-medium">
+      <div class="CDB-Shape-threePointsItem is-round"></div>
+      <div class="CDB-Shape-threePointsItem is-round"></div>
+      <div class="CDB-Shape-threePointsItem is-round"></div>
+    </div>
+  </button>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <button class="CDB-Shape CDB-Shape--medium" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-threePoints is-horizontal is-white is-medium">
+      <div class="CDB-Shape-threePointsItem is-round"></div>
+      <div class="CDB-Shape-threePointsItem is-round"></div>
+      <div class="CDB-Shape-threePointsItem is-round"></div>
+    </div>
+  </button>
+</div>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
 <h2>16px</h2>
 <div style="padding: 20px;">
   <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
@@ -39,7 +74,7 @@ Description
 <h2>12px</h2>
 <div style="padding: 20px;">
   <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
-    <div class="CDB-Shape-threePoints is-small">
+    <div class="CDB-Shape-threePoints">
       <div class="CDB-Shape-threePointsItem"></div>
       <div class="CDB-Shape-threePointsItem"></div>
       <div class="CDB-Shape-threePointsItem"></div>
@@ -48,7 +83,7 @@ Description
 </div>
 <div style="padding: 20px;">
   <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
-    <div class="CDB-Shape-threePoints is-blue is-small js-actions">
+    <div class="CDB-Shape-threePoints is-blue is-small">
       <div class="CDB-Shape-threePointsItem"></div>
       <div class="CDB-Shape-threePointsItem"></div>
       <div class="CDB-Shape-threePointsItem"></div>
@@ -57,7 +92,7 @@ Description
 </div>
 <div style="padding: 20px; background: #2E3C43;">
   <button class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
-    <div class="CDB-Shape-threePoints is-white is-small js-actions">
+    <div class="CDB-Shape-threePoints is-white is-small">
       <div class="CDB-Shape-threePointsItem"></div>
       <div class="CDB-Shape-threePointsItem"></div>
       <div class="CDB-Shape-threePointsItem"></div>
@@ -72,35 +107,45 @@ Description
 .CDB-Shape-threePoints {
   display: inline-block;
 }
+.CDB-Shape-threePoints.is-horizontal {
+  transform: rotate(90deg);
+}
 
 .CDB-Shape-threePointsItem {
   width: 2px;
   height: 2px;
   margin-bottom: 5px;
-  background: $cMainBg;
-  &:last-child {
-    margin-bottom: 0;
-  }
+  background: $cMainDark;
+}
+.CDB-Shape-threePointsItem.is-round {
+  border-radius: 50%;
+}
+.CDB-Shape-threePointsItem:last-child {
+  margin-bottom: 0;
 }
 
 .CDB-Shape-threePoints.is-small {
   padding-top: 2px;
-
-  .CDB-Shape-threePointsItem {
-    width: 2px;
-    height: 2px;
-    margin-bottom: 3px;
-  }
+}
+.CDB-Shape-threePoints.is-small .CDB-Shape-threePointsItem {
+  width: 2px;
+  height: 2px;
+  margin-bottom: 3px;
 }
 
-.CDB-Shape-threePoints.is-blue {
-  .CDB-Shape-threePointsItem {
-    background: $cBlue;
-  }
+.CDB-Shape-threePoints.is-medium {
+  padding-top: 2px;
+}
+.CDB-Shape-threePoints.is-medium .CDB-Shape-threePointsItem {
+  width: 4px;
+  height: 4px;
+  margin-bottom: 3px;
 }
 
-.CDB-Shape-threePoints.is-white {
-  .CDB-Shape-threePointsItem {
-    background: $cWhite;
-  }
+.CDB-Shape-threePoints.is-blue .CDB-Shape-threePointsItem {
+  background: $cBlue;
+}
+
+.CDB-Shape-threePoints.is-white .CDB-Shape-threePointsItem {
+  background: $cWhite;
 }