diff --git a/src/scss/cdb-components/shapes.scss b/src/scss/cdb-components/shapes.scss
index 0a4d5ae..771435e 100644
--- a/src/scss/cdb-components/shapes.scss
+++ b/src/scss/cdb-components/shapes.scss
@@ -7,9 +7,246 @@
 You may resize and change the colors of the icons with the `glyph-`-classes. Available sizes and colors listed:
 
 ```
-<div class="CDB-Shape-tick is-black"></div>
-<div class="CDB-Shape-tick is-blue"></div>
+<button class="CDB-Shape-dot CDB-Widget-dot--navigation is-selected" data-page="3"></button>
+<button class="CDB-Shape-dot CDB-Widget-dot--navigation" data-page="3"></button>
 ```
 */
 
 @import '../cdb-utilities/mixins';
+
+
+.CDB-Shape-dot {
+  display: inline-block;
+  width: 8px;
+  min-width: 8px;
+  height: 8px;
+  border-radius: 8px;
+}
+
+/* SG
+# Shapes/threePoints
+
+Description
+
+```
+<div></div>
+```
+*/
+
+.CDB-Shape-threePoints {
+  display: inline-block;
+  position: relative;
+  width: 3px;
+  height: 16px;
+  margin-right: -7px;
+  margin-left: 6px;
+  padding: 0 7px 0 10px;
+  text-align: center;
+  vertical-align: middle;
+
+  &:after,
+  &:before {
+    display: inline-block;
+    position: absolute;
+    width: 3px;
+    height: 3px;
+    border-radius: 50%;
+    content: '';
+    z-index: 1;
+  }
+
+  &:before {
+    top: 0;
+    right: 7px;
+  }
+
+  &:after {
+    right: 7px;
+    bottom: 1px;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.CDB-Shape-threePointsItem {
+  display: block;
+  position: absolute;
+  top: 6px;
+  left: 7px;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+}
+
+/* SG
+# Shapes/lens
+
+Description
+
+```
+<div></div>
+```
+*/
+
+.CDB-Shape-lens {
+  display: inline-block;
+  position: relative;
+  width: 16px;
+  height: 16px;
+
+  &:after,
+  &:before {
+    position: absolute;
+    content: '';
+  }
+  &:after {
+    top: 0;
+    left: 0;
+    width: 8px;
+    height: 8px;
+    border: 1px solid transparent;
+    border-radius: 10px;
+  }
+  &:before {
+    @include css3-prefix(transform, rotate(45deg));
+    right: 3px;
+    bottom: 5px;
+    width: 6px;
+    height: 1px;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+/* SG
+# Shapes/hamburguer
+
+Description
+
+```
+<div></div>
+```
+*/
+
+.CDB-Shape-hamburguer {
+  display: inline-block;
+  position: relative;
+  width: 16px;
+  height: 2px;
+  border: 0;
+  background: #FFF;
+  vertical-align: middle;
+
+  &:before,
+  &:after {
+    display: block;
+    position: absolute;
+    width: 16px;
+    height: 2px;
+    background: #FFF;
+    content: '';
+  }
+  &:before {
+    top: -6px;
+  }
+  &:after {
+    bottom: -6px;
+  }
+}
+
+/* SG
+# Shapes/magnify
+
+Description
+
+```
+<div></div>
+```
+*/
+
+.CDB-Shape-magnify {
+  display: block;
+  position: relative;
+  width: 32px;
+  height: 32px;
+  &:before {
+    display: block;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    width: 7px;
+    height: 7px;
+    border: 1px solid #636D72;
+    border-radius: 50%;
+    content: '';
+  }
+  &:after {
+    display: block;
+    position: absolute;
+    top: 17px;
+    left: 19px;
+    width: 1px;
+    height: 6px;
+    transform: rotate(314deg);
+    background: #636D72;
+    content: '';
+  }
+}
+
+/* SG
+# Shapes/arrow
+
+Description
+
+```
+<div></div>
+```
+*/
+
+.CDB-Shape-Arrow {
+  display: block;
+  position: absolute;
+  width: 1px;
+  height: 8px;
+  background: #32A8E6;
+
+  &:before {
+    display: block;
+    position: absolute;
+    top: 2px;
+    left: 0;
+    width: 5px;
+    height: 1px;
+    transform: rotate(45deg);
+    background: #32A8E6;
+    content: '';
+  }
+
+  &:after {
+    display: block;
+    position: absolute;
+    top: 2px;
+    left: -4px;
+    width: 5px;
+    height: 1px;
+    transform: rotate(-45deg);
+    background: #32A8E6;
+    content: '';
+  }
+}
+
+.CDB-Shape-Arrow--top {
+  top: 6px;
+  right: 9px;
+  transform: rotate(45deg);
+}
+
+.CDB-Shape-Arrow--bottom {
+  top: 13px;
+  left: 46px;
+  transform: rotate(-135deg);
+}