diff --git a/packages/mindplot/src/@types/custom.d.ts b/packages/mindplot/src/@types/custom.d.ts
new file mode 100644
index 00000000..e2013b53
--- /dev/null
+++ b/packages/mindplot/src/@types/custom.d.ts
@@ -0,0 +1,4 @@
+declare module "*.svg" {
+    const content: any;
+    export default content;
+}
\ No newline at end of file
diff --git a/packages/mindplot/src/components/Icon.js b/packages/mindplot/src/components/Icon.ts
similarity index 73%
rename from packages/mindplot/src/components/Icon.js
rename to packages/mindplot/src/components/Icon.ts
index a95a6ba1..b1b5a65d 100644
--- a/packages/mindplot/src/components/Icon.js
+++ b/packages/mindplot/src/components/Icon.ts
@@ -17,36 +17,43 @@
  */
 import { $assert } from '@wisemapping/core-js';
 import { Image } from '@wisemapping/web2d';
+import IconGroup from './IconGroup';
+import { Point } from '@wisemapping/web2d';
+import SizeType from './SizeType';
+import FeatureModel from './model/FeatureModel';
 
-class Icon {
-  constructor(url) {
+abstract class Icon {
+  protected _image: Image;
+  protected _group: IconGroup;
+
+  constructor(url: string) {
     $assert(url, 'topic can not be null');
     this._image = new Image();
     this._image.setHref(url);
     this._image.setSize(Icon.SIZE, Icon.SIZE);
   }
 
-  getImage() {
+  getImage(): Image {
     return this._image;
   }
 
-  setGroup(group) {
+  setGroup(group: IconGroup) {
     this._group = group;
   }
 
-  getGroup() {
+  getGroup(): IconGroup {
     return this._group;
   }
 
-  getSize() {
+  getSize(): SizeType {
     return this._image.getSize();
   }
 
-  getPosition() {
+  getPosition(): Point {
     return this._image.getPosition();
   }
 
-  addEvent(type, fnc) {
+  addEvent(type: string, fnc): void {
     this._image.addEvent(type, fnc);
   }
 
@@ -54,8 +61,10 @@ class Icon {
   remove() {
     throw new Error('Unsupported operation');
   }
+
+  abstract getModel(): FeatureModel;
+
+  static SIZE = 90;
 }
 
-Icon.SIZE = 90;
-
 export default Icon;
diff --git a/packages/mindplot/src/components/IconGroup.js b/packages/mindplot/src/components/IconGroup.ts
similarity index 79%
rename from packages/mindplot/src/components/IconGroup.js
rename to packages/mindplot/src/components/IconGroup.ts
index 46a84ab7..b4ac5691 100644
--- a/packages/mindplot/src/components/IconGroup.js
+++ b/packages/mindplot/src/components/IconGroup.ts
@@ -22,21 +22,31 @@ import {
 } from '@wisemapping/core-js';
 import {
   Group,
+  ElementClass,
 } from '@wisemapping/web2d';
 import IconGroupRemoveTip from './IconGroupRemoveTip';
-
+import { Point } from '@wisemapping/web2d';
 import Icon from './Icon';
+import SizeType from './SizeType';
+import IconModel from './model/IconModel';
+import FeatureModel from './model/FeatureModel';
 
-const ORDER_BY_TYPE = new Map();
+const ORDER_BY_TYPE = new Map<string, number>();
 ORDER_BY_TYPE.set('icon', 0);
 ORDER_BY_TYPE.set('note', 1);
 ORDER_BY_TYPE.set('link', 2);
 
 class IconGroup {
-  constructor(topicId, iconSize) {
+  private _icons: Icon[];
+  private _group: any;
+  private _removeTip: IconGroupRemoveTip;
+  private _iconSize: SizeType;
+  private _topicId: number;
+  constructor(topicId: number, iconSize: number) {
     $assert($defined(topicId), 'topicId can not be null');
     $assert($defined(iconSize), 'iconSize can not be null');
 
+    this._topicId = topicId;
     this._icons = [];
     this._group = new Group({
       width: 0,
@@ -46,34 +56,31 @@ class IconGroup {
       coordSizeWidth: 0,
       coordSizeHeight: 100,
     });
-    this._removeTip = new IconGroupRemoveTip(this._group, topicId);
+    this._removeTip = new IconGroupRemoveTip(this._group);
     this.seIconSize(iconSize, iconSize);
-
     this._registerListeners();
+
   }
 
-  /** */
-  setPosition(x, y) {
+  setPosition(x: number, y: number): void {
     this._group.setPosition(x, y);
   }
 
-  /** */
-  getPosition() {
+  getPosition(): Point {
     return this._group.getPosition();
   }
 
-  /** */
-  getNativeElement() {
+  getNativeElement(): ElementClass {
     return this._group;
   }
 
   /** */
-  getSize() {
+  getSize(): SizeType {
     return this._group.getSize();
   }
 
   /** */
-  seIconSize(width, height) {
+  seIconSize(width: number, height: number) {
     this._iconSize = {
       width,
       height,
@@ -81,12 +88,7 @@ class IconGroup {
     this._resize(this._icons.length);
   }
 
-  /**
-   * @param icon the icon to be added to the icon group
-   * @param {Boolean} remove
-   * @throws will throw an error if icon is not defined
-   */
-  addIcon(icon, remove) {
+  addIcon(icon: Icon, remove: boolean) {
     $defined(icon, 'icon is not defined');
 
     // Order could have change, need to re-add all.
@@ -113,7 +115,7 @@ class IconGroup {
     }
   }
 
-  _findIconFromModel(iconModel) {
+  private _findIconFromModel(iconModel: FeatureModel) {
     let result = null;
 
     this._icons.forEach((icon) => {
@@ -132,14 +134,14 @@ class IconGroup {
   }
 
   /** */
-  removeIconByModel(featureModel) {
+  removeIconByModel(featureModel: FeatureModel) {
     $assert(featureModel, 'featureModel can not be null');
 
     const icon = this._findIconFromModel(featureModel);
     this._removeIcon(icon);
   }
 
-  _removeIcon(icon) {
+  private _removeIcon(icon: Icon) {
     $assert(icon, 'icon can not be null');
 
     this._removeTip.close(0);
@@ -156,11 +158,11 @@ class IconGroup {
   }
 
   /** */
-  moveToFront() {
+  moveToFront(): void {
     this._group.moveToFront();
   }
 
-  _registerListeners() {
+  private _registerListeners() {
     this._group.addEvent('click', (event) => {
       // Avoid node creation ...
       event.stopPropagation();
@@ -171,21 +173,23 @@ class IconGroup {
     });
   }
 
-  _resize(iconsLength) {
+  private _resize(iconsLength: number) {
     this._group.setSize(iconsLength * this._iconSize.width, this._iconSize.height);
 
     const iconSize = Icon.SIZE + IconGroup.ICON_PADDING * 2;
     this._group.setCoordSize(iconsLength * iconSize, iconSize);
   }
 
-  _positionIcon(icon, order) {
+  private _positionIcon(icon: Icon, order: number) {
     const iconSize = Icon.SIZE + IconGroup.ICON_PADDING * 2;
     icon.getImage().setPosition(
       iconSize * order + IconGroup.ICON_PADDING,
       IconGroup.ICON_PADDING,
     );
   }
+
+  static ICON_PADDING = 5;
+
 }
 
-IconGroup.ICON_PADDING = 5;
 export default IconGroup;
diff --git a/packages/mindplot/src/components/LinkIcon.js b/packages/mindplot/src/components/LinkIcon.ts
similarity index 83%
rename from packages/mindplot/src/components/LinkIcon.js
rename to packages/mindplot/src/components/LinkIcon.ts
index 640a7e47..f49df66b 100644
--- a/packages/mindplot/src/components/LinkIcon.js
+++ b/packages/mindplot/src/components/LinkIcon.ts
@@ -20,9 +20,17 @@ import $ from 'jquery';
 import Icon from './Icon';
 import LinkIconTooltip from './widget/LinkIconTooltip';
 import LinksImage from '../../assets/icons/links.svg';
+import LinkModel from './model/LinkModel';
+import Topic from './Topic';
+import FeatureModel from './model/FeatureModel';
 
 class LinkIcon extends Icon {
-  constructor(topic, linkModel, readOnly) {
+  private _linksModel: FeatureModel;
+  private _topic: Topic;
+  private _readOnly: boolean;
+  private _tip: LinkIconTooltip;
+
+  constructor(topic: Topic, linkModel: LinkModel, readOnly: boolean) {
     $assert(topic, 'topic can not be null');
     $assert(linkModel, 'linkModel can not be null');
 
@@ -34,7 +42,7 @@ class LinkIcon extends Icon {
     this._registerEvents();
   }
 
-  _registerEvents() {
+  private _registerEvents() {
     this._image.setCursor('pointer');
     this._tip = new LinkIconTooltip(this);
 
@@ -62,10 +70,11 @@ class LinkIcon extends Icon {
     });
   }
 
-  getModel() {
+  getModel(): FeatureModel {
     return this._linksModel;
   }
+  static IMAGE_URL = LinksImage;
+
 }
-LinkIcon.IMAGE_URL = LinksImage;
 
 export default LinkIcon;
diff --git a/packages/mindplot/src/components/NoteIcon.js b/packages/mindplot/src/components/NoteIcon.ts
similarity index 83%
rename from packages/mindplot/src/components/NoteIcon.js
rename to packages/mindplot/src/components/NoteIcon.ts
index 7511a674..144b6edc 100644
--- a/packages/mindplot/src/components/NoteIcon.js
+++ b/packages/mindplot/src/components/NoteIcon.ts
@@ -21,9 +21,17 @@ import { $msg } from './Messages';
 import Icon from './Icon';
 import FloatingTip from './widget/FloatingTip';
 import NotesImage from '../../assets/icons/notes.svg';
+import Topic from './Topic';
+import NoteModel from './model/NoteModel';
+import FeatureModel from './model/FeatureModel';
 
 class NoteIcon extends Icon {
-  constructor(topic, noteModel, readOnly) {
+  private _linksModel: NoteModel;
+  private _topic: Topic;
+  private _readOnly: boolean;
+  private _tip: FloatingTip;
+
+  constructor(topic: Topic, noteModel: NoteModel, readOnly: boolean) {
     $assert(topic, 'topic can not be null');
 
     super(NoteIcon.IMAGE_URL);
@@ -34,7 +42,7 @@ class NoteIcon extends Icon {
     this._registerEvents();
   }
 
-  _registerEvents() {
+  private _registerEvents(): void {
     this._image.setCursor('pointer');
     const me = this;
 
@@ -58,7 +66,7 @@ class NoteIcon extends Icon {
     });
   }
 
-  _buildTooltipContent() {
+  private _buildTooltipContent(): JQuery {
     if ($('body').find('#textPopoverNote').length === 1) {
       const text = $('body').find('#textPopoverNote');
       text.text(this._linksModel.getText());
@@ -75,11 +83,12 @@ class NoteIcon extends Icon {
     return result;
   }
 
-  getModel() {
+  getModel(): FeatureModel {
     return this._linksModel;
   }
+
+  static IMAGE_URL = NotesImage;
+
 }
 
-NoteIcon.IMAGE_URL = NotesImage;
-
 export default NoteIcon;
diff --git a/packages/mindplot/src/components/ScreenManager.ts b/packages/mindplot/src/components/ScreenManager.ts
index 286ec05c..88e80d0c 100644
--- a/packages/mindplot/src/components/ScreenManager.ts
+++ b/packages/mindplot/src/components/ScreenManager.ts
@@ -17,8 +17,6 @@
  */
 import { $assert } from '@wisemapping/core-js';
 import { Point } from '@wisemapping/web2d';
-import Icon from './Icon';
-import Topic from './Topic';
 
 class ScreenManager {
   private _divContainer: JQuery;
@@ -84,59 +82,6 @@ class ScreenManager {
     }
   }
 
-  private _getElementPosition(elem: Topic) {
-    // Retrieve current element position.
-    const elementPosition = elem.getPosition();
-    let { x } = elementPosition;
-    let { y } = elementPosition;
-
-    // Add workspace offset.
-    x -= this._padding.x;
-    y -= this._padding.y;
-
-    // Scale coordinate in order to be relative to the workspace. That's coord/size;
-    x /= this._scale;
-    y /= this._scale;
-
-    // Remove decimal part..
-    return { x, y };
-  }
-
-  getWorkspaceIconPosition(e: Icon) {
-    // Retrieve current icon position.
-    const image = e.getImage();
-    const elementPosition = image.getPosition();
-    const imageSize = e.getSize();
-
-    // Add group offset
-    const iconGroup = e.getGroup();
-    const group = iconGroup.getNativeElement();
-    const coordOrigin = group.getCoordOrigin();
-    const groupSize = group.getSize();
-    const coordSize = group.getCoordSize();
-
-    const scale = {
-      x: coordSize.width / parseInt(groupSize.width, 10),
-      y: coordSize.height / parseInt(groupSize.height, 10),
-    };
-
-    let x = (elementPosition.x - coordOrigin.x - parseInt(imageSize.width, 10) / 2) / scale.x;
-    let y = (elementPosition.y - coordOrigin.y - parseInt(imageSize.height, 10) / 2) / scale.y;
-
-    // Retrieve iconGroup Position
-    const groupPosition = iconGroup.getPosition();
-    x += groupPosition.x;
-    y += groupPosition.y;
-
-    // Retrieve topic Position
-    const topic = iconGroup.getTopic();
-    const topicPosition = this._getElementPosition(topic);
-    topicPosition.x -= parseInt(topic.getSize().width, 10) / 2;
-
-    // Remove decimal part..
-    return { x: x + topicPosition.x, y: y + topicPosition.y };
-  }
-
   getWorkspaceMousePosition(event: MouseEvent) {
     // Retrieve current mouse position.
     let x = event.clientX;