diff --git a/src/modules/Sticker.js b/src/modules/Sticker.js
index 33d5458..28bee27 100644
--- a/src/modules/Sticker.js
+++ b/src/modules/Sticker.js
@@ -3,6 +3,8 @@ import 'leaflet-editable';
 
 import { DomMarker } from '$utils/DomMarker';
 
+import stickers from '$sprites/stickers.svg';
+
 export class Sticker {
   constructor({
     latlng, deleteSticker, map, lockMapClicks
@@ -24,6 +26,8 @@ export class Sticker {
     this.stickerArrow.className = 'sticker-arrow';
     this.stickerDelete.className = 'sticker-delete';
 
+    this.stickerImage.innerHTML = this.generateStickerSVG('green-sm');
+
     this.element.appendChild(this.stickerArrow);
     this.element.appendChild(this.stickerImage);
     this.element.appendChild(this.stickerDelete);
@@ -95,8 +99,8 @@ export class Sticker {
   setAngle = angle => {
     // $(active_sticker.container).css('left',6+x-parseInt(active_sticker.ctrl.css('left'))).css('top',6+y-parseInt(active_sticker.ctrl.css('top')));
     //
-    const rad = 30;
-    const mrad = 48;
+    const rad = 44;
+    const mrad = 76;
     const x = ((Math.cos(angle + 3.14) * rad) - 30);
     const y = ((Math.sin(angle + 3.14) * rad) - 30);
 
@@ -111,4 +115,12 @@ export class Sticker {
 
     this.stickerArrow.style.transform = `rotate(${angle + 3.14}rad)`;
   }
+
+  generateStickerSVG = sticker => (
+    `
+    <svg width="64" height="64">
+       <use xlink:href="${stickers}#sticker-${sticker}" x="0" y="0" width="64" height="64" />
+    </svg>
+    `
+  )
 }
diff --git a/src/styles/stickers.less b/src/styles/stickers.less
index 2201b9f..8fb9caf 100644
--- a/src/styles/stickers.less
+++ b/src/styles/stickers.less
@@ -34,38 +34,44 @@
   width: 48px;
   height: 48px;
   position: absolute;
-  background: white;
-  border-radius: 32px;
+  //background: white;
+  //border-radius: 32px;
   left: 0;
   top: 0;
   outline: none;
 
-  &:after {
-    content: ' ';
-    box-shadow: 0 0 0 1px #ff3344;
-    width: 80px;
-    height: 80px;
-    left: -16px;
-    top: -16px;
-    position: absolute;
-    border-radius: 40px;
-    pointer-events: none;
-    opacity: 0;
+  //&:after {
+  //  content: ' ';
+  //  box-shadow: 0 0 0 1px #ff3344;
+  //  width: 80px;
+  //  height: 80px;
+  //  left: -16px;
+  //  top: -16px;
+  //  position: absolute;
+  //  border-radius: 40px;
+  //  pointer-events: none;
+  //  opacity: 0;
+  //}
+
+  svg {
+    left: -8px;
+    top: -8px;
+    position: relative;
+    z-index: 0;
   }
 }
 
 .sticker-arrow {
   position: absolute;
-  background: red;
   transform-origin: 0 0;
   left: 0;
   top: 0;
 
   &:after {
     content: ' ';
-    background: #ff3344;
-    width: 24px;
-    height: 24px;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 38,20 38,38 20,38' style='fill:%23ff4433;' /%3E%3C/svg%3E") no-repeat;
+    width: 50px;
+    height: 50px;
     transform-origin: 0 0;
     transform: rotate(-45deg);
     left: 0;