diff --git a/modules/svg/SvgIcon.jsx b/modules/svg/SvgIcon.jsx
index 7ebfd315..7ed550be 100644
--- a/modules/svg/SvgIcon.jsx
+++ b/modules/svg/SvgIcon.jsx
@@ -1,9 +1,11 @@
 import React, {useEffect, useMemo, useRef} from 'react';
 
-export function SvgIcon({content, ...props}) {
+export function SvgIcon({content, size, ...props}) {
 
   const divEl = useRef(null);
 
+  const className = size&&'icon-'+size;
+
   useEffect(() => {
     if (divEl.current) {
       divEl.current.innerHTML = content;
@@ -17,7 +19,7 @@ export function SvgIcon({content, ...props}) {
     };
   }, [props.style]);
 
-  return <div ref={divEl} {...props} style={style}/>
+  return <div className={className} ref={divEl} {...props} style={style}/>
 
 
 }
diff --git a/modules/ui/components/Columnizer.jsx b/modules/ui/components/Columnizer.jsx
new file mode 100644
index 00000000..4977e8bb
--- /dev/null
+++ b/modules/ui/components/Columnizer.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import _ from 'lodash';
+
+export function Columnizer({columns, children, spacing, ...props}) {
+
+  const items = React.Children.toArray(children);
+
+  const rows = Math.ceil(items.length / columns);
+  let itemsCounter = 0;
+  return <table {...props}>
+    <tbody>
+      {_.times(rows, () => {
+        let key = '';
+        for (let i = itemsCounter; i < columns; i++) {
+          key += items[i] ? items[i].key : '';
+          key += ':';
+        }
+        return <tr key={key}>
+          {
+            _.times(columns, () => {
+              const item = items[itemsCounter++];
+              return item && <td key={item.key} style={{padding: spacing}}>
+                {item}
+              </td>;
+            })
+          }
+        </tr>
+      })}
+    </tbody>
+  </table>
+}
\ No newline at end of file
diff --git a/modules/ui/styles/init/form.less b/modules/ui/styles/init/form.less
index 6ffd8692..ecfbdc68 100644
--- a/modules/ui/styles/init/form.less
+++ b/modules/ui/styles/init/form.less
@@ -9,8 +9,20 @@ button {
   background-color: darken(@color-neutral, 10%);
   color: @font-color;
   white-space: nowrap;
-  .button-behavior(@color-neutral)
-  //line-height: 1.5;
+  .button-behavior(@color-neutral);
+
+
+  &.icon-button {
+    display: inline-flex;
+
+    align-items: center;
+    justify-content: center;
+    svg {
+      width: 16px;
+      height: 16px;
+      margin: -4px 4px -4px -2px;
+    }
+  }
 }
 
 button.neutral {
diff --git a/modules/ui/styles/init/icons.less b/modules/ui/styles/init/icons.less
new file mode 100644
index 00000000..a6d56962
--- /dev/null
+++ b/modules/ui/styles/init/icons.less
@@ -0,0 +1,19 @@
+.icon-16 svg {
+  width: 16px;
+  height: 16px
+}
+
+.icon-32 svg {
+  width: 32px;
+  height: 32px
+}
+
+.icon-48 svg {
+  width: 48px;
+  height: 48px
+}
+
+.icon-64 svg {
+  width: 64px;
+  height: 64px
+}
\ No newline at end of file
diff --git a/modules/ui/styles/init/index.less b/modules/ui/styles/init/index.less
index 2ed5a073..e014cf37 100644
--- a/modules/ui/styles/init/index.less
+++ b/modules/ui/styles/init/index.less
@@ -5,4 +5,5 @@
 @import "./links.less";
 @import "./form.less";
 @import "./tables.less";
-@import "./svg.less";
\ No newline at end of file
+@import "./svg.less";
+@import "./icons.less";
\ No newline at end of file
diff --git a/web/app/sketcher/actions/constraintActions.js b/web/app/sketcher/actions/constraintActions.js
index c613de76..bf25e332 100644
--- a/web/app/sketcher/actions/constraintActions.js
+++ b/web/app/sketcher/actions/constraintActions.js
@@ -7,6 +7,25 @@ import {Arc} from "../shapes/arc";
 import {FilletTool} from "../tools/fillet";
 import {editConstraint as _editConstraint} from "../components/ConstraintEditor";
 import {BezierCurve} from "../shapes/bezier-curve";
+import {
+  AngleBetweenConstraintIcon,
+  AngleConstraintIcon,
+  CoincidentConstraintIcon,
+  DistanceConstraintIcon,
+  DistancePLConstraintIcon,
+  EqualConstraintIcon, FilletConstraintIcon,
+  HorizontalConstraintIcon,
+  LockConstraintIcon,
+  ParallelConstraintIcon,
+  PerpendicularConstraintIcon,
+  PointInMiddleConstraintIcon,
+  PointOnCurveConstraintIcon,
+  PointOnLineConstraintIcon,
+  RadiusConstraintIcon,
+  SymmetryConstraintIcon,
+  TangentConstraintIcon,
+  VerticalConstraintIcon
+} from "../icons/constraints/ConstraintIcons";
 
 export default [
 
@@ -16,6 +35,7 @@ export default [
     shortName: 'Coincident',
     kind: 'Constraint',
     description: 'Point Coincident',
+    icon: CoincidentConstraintIcon,
     selectionMatcher: {
       selector: 'matchAll',
       types: [EndPoint],
@@ -40,6 +60,7 @@ export default [
     shortName: 'Tangent',
     kind: 'Constraint',
     description: 'Tangent Between Line And Circle',
+    icon: TangentConstraintIcon,
     selectionMatcher: {
       selector: 'matchSequence',
       sequence: [
@@ -76,6 +97,7 @@ export default [
     shortName: 'Equal Radius',
     kind: 'Constraint',
     description: 'Equal Radius Between Two Circle',
+    icon: EqualConstraintIcon,
     selectionMatcher: {
       selector: 'matchAll',
       types: [Circle, Arc],
@@ -100,6 +122,7 @@ export default [
     shortName: 'Equal Length',
     kind: 'Constraint',
     description: 'Equal Length Between Two Segments',
+    icon: EqualConstraintIcon,
     selectionMatcher: {
       selector: 'matchAll',
       types: [Segment],
@@ -121,6 +144,7 @@ export default [
     shortName: 'Point On Line',
     kind: 'Constraint',
     description: 'Point On Line',
+    icon: PointOnLineConstraintIcon,
     selectionMatcher: {
       selector: 'matchSequence',
       sequence: [
@@ -148,6 +172,7 @@ export default [
     shortName: 'Point On Circle',
     kind: 'Constraint',
     description: 'Point On Circle',
+    icon: PointOnCurveConstraintIcon,
     selectionMatcher: {
       selector: 'matchSequence',
       sequence: [
@@ -175,6 +200,7 @@ export default [
     shortName: 'Point On Curve',
     kind: 'Constraint',
     description: 'Point On Curve',
+    icon: PointOnCurveConstraintIcon,
     selectionMatcher: {
       selector: 'matchSequence',
       sequence: [
@@ -202,6 +228,7 @@ export default [
     shortName: 'Middle Point',
     kind: 'Constraint',
     description: 'Point In The Middle',
+    icon: PointInMiddleConstraintIcon,
     selectionMatcher: {
       selector: 'matchSequence',
       sequence: [
@@ -227,6 +254,7 @@ export default [
     shortName: 'Symmetry',
     kind: 'Constraint',
     description: 'Symmetry of two points against middle point',
+    icon: SymmetryConstraintIcon,
     selectionMatcher: {
       selector: 'matchSequence',
       sequence: [
@@ -252,6 +280,7 @@ export default [
     shortName: 'Angle',
     kind: 'Constraint',
     description: 'Angle',
+    icon: AngleConstraintIcon,
     selectionMatcher: {
       selector: 'matchAll',
       types: [Segment],
@@ -281,6 +310,7 @@ export default [
     shortName: 'Vertical',
     kind: 'Constraint',
     description: 'Vertical',
+    icon: VerticalConstraintIcon,
 
     selectionMatcher: {
       selector: 'matchAll',
@@ -306,6 +336,7 @@ export default [
     shortName: 'Horizontal',
     kind: 'Constraint',
     description: 'Horizontal',
+    icon: HorizontalConstraintIcon,
 
     selectionMatcher: {
       selector: 'matchAll',
@@ -331,6 +362,7 @@ export default [
     shortName: 'Angle Between',
     kind: 'Constraint',
     description: 'Angle Between Lines',
+    icon: AngleBetweenConstraintIcon,
 
     selectionMatcher: {
       selector: 'matchAll',
@@ -363,6 +395,7 @@ export default [
     shortName: 'Perpendicular',
     kind: 'Constraint',
     description: 'Perpendicularity between two or more lines',
+    icon: PerpendicularConstraintIcon,
 
     selectionMatcher: {
       selector: 'matchAll',
@@ -389,6 +422,7 @@ export default [
     shortName: 'Parallel',
     kind: 'Constraint',
     description: 'Parallelism between two or more lines',
+    icon: ParallelConstraintIcon,
 
     selectionMatcher: {
       selector: 'matchAll',
@@ -415,6 +449,7 @@ export default [
     shortName: 'Length',
     kind: 'Constraint',
     description: 'Segment Length',
+    icon: DistanceConstraintIcon,
 
     selectionMatcher: {
       selector: 'matchAll',
@@ -446,6 +481,7 @@ export default [
     shortName: 'Radius Length',
     kind: 'Constraint',
     description: 'Radius Length',
+    icon: RadiusConstraintIcon,
 
     selectionMatcher: {
       selector: 'matchAll',
@@ -477,6 +513,7 @@ export default [
     shortName: 'Point to Line Distance',
     kind: 'Constraint',
     description: 'Distance between Point and Line',
+    icon: DistancePLConstraintIcon,
 
     selectionMatcher: {
       selector: 'matchSequence',
@@ -513,6 +550,7 @@ export default [
     shortName: 'Two Point Distance',
     kind: 'Constraint',
     description: 'Distance between two Points',
+    icon: DistanceConstraintIcon,
 
     selectionMatcher: {
       selector: 'matchSequence',
@@ -544,6 +582,8 @@ export default [
     shortName: 'Lock Point',
     kind: 'Constraint',
     description: 'Lock Point',
+    icon: LockConstraintIcon,
+
     selectionMatcher: {
       selector: 'matchSequence',
       sequence: [
@@ -570,6 +610,8 @@ export default [
     shortName: 'Fillet',
     kind: 'Tool',
     description: 'Make a Fillet',
+    icon: FilletConstraintIcon,
+
     selectionMatcher: {
       selector: 'function',
       match: (selection) => {
diff --git a/web/app/sketcher/actions/constraintGlobalActions.js b/web/app/sketcher/actions/constraintGlobalActions.js
index 332d4b82..0c02e0d7 100644
--- a/web/app/sketcher/actions/constraintGlobalActions.js
+++ b/web/app/sketcher/actions/constraintGlobalActions.js
@@ -18,7 +18,7 @@ export default [
     id: 'CoincidentGlobal',
     shortName: 'Coincident',
     kind: 'Constraint',
-    description: 'Point Coincident Constraint',
+    description: 'point coincident constraint',
     icon: CoincidentConstraintIcon,
 
     invoke: (ctx) => {
@@ -30,7 +30,7 @@ export default [
     id: 'VerticalGlobal',
     shortName: 'Vertical',
     kind: 'Constraint',
-    description: 'Vertical Constraint',
+    description: 'vertical constraint',
     icon: VerticalConstraintIcon,
 
     invoke: (ctx) => {
@@ -42,7 +42,7 @@ export default [
     id: 'HorizontalGlobal',
     shortName: 'Horizontal',
     kind: 'Constraint',
-    description: 'Horizontal Constraint',
+    description: 'horizontal constraint',
     icon: HorizontalConstraintIcon,
 
     invoke: (ctx) => {
@@ -54,7 +54,7 @@ export default [
     id: 'ParallelGlobal',
     shortName: 'Parallel',
     kind: 'Constraint',
-    description: 'Parallel Constraint',
+    description: 'parallel constraint',
     icon: ParallelConstraintIcon,
 
     invoke: (ctx) => {
@@ -66,7 +66,7 @@ export default [
     id: 'PerpendicularGlobal',
     shortName: 'Perpendicular',
     kind: 'Constraint',
-    description: 'Perpendicular Constraint',
+    description: 'perpendicular constraint',
     icon: PerpendicularConstraintIcon,
 
     invoke: (ctx) => {
@@ -78,7 +78,7 @@ export default [
     id: 'DistancePLGlobal',
     shortName: 'Point to Line Distance',
     kind: 'Constraint',
-    description: 'Distance Between Point and Line',
+    description: 'distance between point and line',
     icon: DistancePLConstraintIcon,
 
     invoke: (ctx) => {
@@ -90,7 +90,7 @@ export default [
     id: 'DistanceGlobal',
     shortName: 'Point to Point Distance',
     kind: 'Constraint',
-    description: 'Distance Between Two Points',
+    description: 'distance between two points',
     icon: DistanceConstraintIcon,
 
     invoke: (ctx) => {
@@ -102,7 +102,7 @@ export default [
     id: 'EntityEqualityGlobal',
     shortName: 'Entity Equality',
     kind: 'Constraint',
-    description: 'Equal Length or Equal Radius',
+    description: 'equal length or equal radius',
     icon: EqualConstraintIcon,
 
     invoke: (ctx) => {
@@ -118,7 +118,7 @@ export default [
     id: 'PointOnLineGlobal',
     shortName: 'Point On Line',
     kind: 'Constraint',
-    description: 'Point On Line',
+    description: 'point on line',
     icon: PointOnLineConstraintIcon,
 
     invoke: (ctx) => {
@@ -130,7 +130,7 @@ export default [
     id: 'TangentGlobal',
     shortName: 'Tangent',
     kind: 'Constraint',
-    description: 'Tangent Between Different Curves',
+    description: 'tangent between different curves',
     icon: TangentConstraintIcon,
 
     invoke: (ctx) => {
@@ -142,7 +142,7 @@ export default [
     id: 'RadiusGlobal',
     shortName: 'Radius',
     kind: 'Constraint',
-    description: 'Radius of a Circle or Arc',
+    description: 'radius of a circle or arc',
     icon: RadiusConstraintIcon,
 
     invoke: (ctx) => {
@@ -154,7 +154,7 @@ export default [
     id: 'PointOnCurveGlobal',
     shortName: 'Point On Curve',
     kind: 'Constraint',
-    description: 'Point On Curve',
+    description: 'point on curve',
     icon: PointOnCurveConstraintIcon,
 
     invoke: (ctx) => {
@@ -166,7 +166,7 @@ export default [
     id: 'PointInMiddleGlobal',
     shortName: 'Point In Middle',
     kind: 'Constraint',
-    description: 'Point In Middle',
+    description: 'point in middle',
     icon: PointInMiddleConstraintIcon,
 
     invoke: (ctx) => {
@@ -178,7 +178,7 @@ export default [
     id: 'SymmetryGlobal',
     shortName: 'Symmetry',
     kind: 'Constraint',
-    description: 'Symmetry',
+    description: 'symmetry',
     icon: SymmetryConstraintIcon,
 
     invoke: (ctx) => {
@@ -190,7 +190,7 @@ export default [
     id: 'AngleBetweenGlobal',
     shortName: 'Angle Between',
     kind: 'Constraint',
-    description: 'Angle Between',
+    description: 'angle between',
     icon: AngleBetweenConstraintIcon,
 
     invoke: (ctx) => {
@@ -202,7 +202,7 @@ export default [
     id: 'AngleGlobal',
     shortName: 'Angle',
     kind: 'Constraint',
-    description: 'Angle of a Line',
+    description: 'angle of a line',
     icon: AngleConstraintIcon,
 
     invoke: (ctx) => {
@@ -214,7 +214,7 @@ export default [
     id: 'LockGlobal',
     shortName: 'Lock',
     kind: 'Constraint',
-    description: 'Locks a point',
+    description: 'locks a point',
     icon: LockConstraintIcon,
 
     invoke: (ctx) => {
@@ -226,7 +226,7 @@ export default [
     id: 'FilletGlobal',
     shortName: 'Fillet',
     kind: 'Constraint',
-    description: 'Make a Fillet',
+    description: 'make a fillet',
     icon: FilletConstraintIcon,
 
     invoke: (ctx) => {
@@ -235,10 +235,10 @@ export default [
   },
 
   {
-    id: 'Mirror',
+    id: 'MirrorStart',
     shortName: 'Mirror',
     kind: 'Constraint',
-    description: 'Make a Fillet',
+    description: 'adds mirror generator',
     icon: MirrorGeneratorIcon,
 
     invoke: (ctx) => {
diff --git a/web/app/sketcher/actions/operationActions.js b/web/app/sketcher/actions/operationActions.js
index 98d41c07..70d0295a 100644
--- a/web/app/sketcher/actions/operationActions.js
+++ b/web/app/sketcher/actions/operationActions.js
@@ -1,6 +1,7 @@
 import {Generator} from "../id-generator";
 import {SketchGenerator} from "../generators/sketchGenerator";
 import {MirrorGeneratorSchema} from "../generators/mirrorGenerator";
+import {MirrorGeneratorIcon} from "../icons/generators/GeneratorIcons";
 
 export default [
 
@@ -9,6 +10,7 @@ export default [
     shortName: 'Mirror',
     kind: 'Generator',
     description: 'Mirror Objects',
+    icon: MirrorGeneratorIcon,
 
     wizard: MirrorGeneratorSchema.params ,
 
diff --git a/web/app/sketcher/components/ConstraintExplorer.jsx b/web/app/sketcher/components/ConstraintExplorer.jsx
index e67329ce..1e061962 100644
--- a/web/app/sketcher/components/ConstraintExplorer.jsx
+++ b/web/app/sketcher/components/ConstraintExplorer.jsx
@@ -5,6 +5,7 @@ import {useStream} from "ui/effects";
 import {SketcherAppContext} from "./SketcherApp";
 import cx from 'classnames';
 import {editConstraint} from "./ConstraintEditor";
+import {NoIcon} from "../icons/NoIcon";
 
 
 export function ConstraintExplorer(props) {
@@ -73,12 +74,14 @@ export function ConstraintButton({prefix='', constraint: c, ...props}) {
   const conflicting = c.stage.algNumSystem.conflicting.has(c);
   const redundant = c.stage.algNumSystem.redundant.has(c);
 
+  const Icon = c.schema.icon || NoIcon;
+
   return <div key={c.id} className={cx(ls.objectItem, conflicting&&ls.conflicting, redundant&&ls.redundant)}
               onClick={() => c.schema.constants && edit(c)}
               onMouseEnter={() => highlight(c)}
               onMouseLeave={() => withdraw(c)}
               {...props}>
-    <span className={ls.objectIcon}><img width="15px" src='img/vec/pointOnArc.svg'/></span>
+    <span className={ls.objectIcon}><Icon size={16} /></span>
     <span className={ls.objectTag}>
         {prefix} {c.schema.name}
       </span>
@@ -107,6 +110,8 @@ export function GeneratorButton({prefix='', generator: c, ...props}) {
     viewer.refresh();
   };
 
+  const Icon = c.schema.icon || NoIcon;
+
   useEffect(() => withdraw, [c]);
 
   return <div key={c.id} className={cx(ls.objectItem)}
@@ -114,7 +119,7 @@ export function GeneratorButton({prefix='', generator: c, ...props}) {
               onMouseEnter={() => highlight(c)}
               onMouseLeave={() => withdraw(c)}
               {...props}>
-    <span className={ls.objectIcon}><img width="15px" src='img/vec/pointOnArc.svg'/></span>
+    <span className={ls.objectIcon}><Icon size={16} /></span>
     <span className={ls.objectTag}>
         {prefix} {c.schema.title}
       </span>
diff --git a/web/app/sketcher/components/ConstraintExplorer.less b/web/app/sketcher/components/ConstraintExplorer.less
index acecc930..4b9f78b7 100644
--- a/web/app/sketcher/components/ConstraintExplorer.less
+++ b/web/app/sketcher/components/ConstraintExplorer.less
@@ -20,7 +20,7 @@
   .objectIcon {
     border-radius: @itemRadius 0 0 @itemRadius;
     padding: 3px 3px;
-    background-color: @alt-color;
+    background-color: #606060;
   }
 
   .removeButton {
diff --git a/web/app/sketcher/components/ContextualControls.jsx b/web/app/sketcher/components/ContextualControls.jsx
index 3064e8d8..4e7d045f 100644
--- a/web/app/sketcher/components/ContextualControls.jsx
+++ b/web/app/sketcher/components/ContextualControls.jsx
@@ -5,6 +5,8 @@ import {useStream} from "../../../../modules/ui/effects";
 import {SketcherAppContext} from "./SketcherApp";
 import {MatchIndex, matchSelection} from "../selectionMatcher";
 import {ConstraintButton, GeneratorButton} from "./ConstraintExplorer";
+import {Columnizer} from "../../../../modules/ui/components/Columnizer";
+import {NoIcon} from "../icons/NoIcon";
 
 export function ContextualControls() {
 
@@ -32,19 +34,23 @@ export function ContextualControls() {
     <div className={ls.hr}>AVAILABLE ACTIONS:</div>
 
     <div style={{
-      display: 'flex',
-      maxWidth: 200,
-      flexWrap: 'wrap',
     }}>
-      {
-        availableActions.map(a => <button
-          key={a.id}
-          style={{
-            margin: 3
-          }}
-          onClick={() => a.invoke(ctx, matchSelection(a.selectionMatcher, new MatchIndex(selection), false))}
-          title={a.description}>{a.shortName}</button>)
-      }
+      <Columnizer columns={3} spacing={3}>
+        {
+          availableActions.map(a => {
+            const Icon = a.icon || NoIcon;
+
+            return <button
+              className='icon-button'
+              key={a.id}
+              style={{
+                width: '100%'
+              }}
+              onClick={() => a.invoke(ctx, matchSelection(a.selectionMatcher, new MatchIndex(selection), false))}
+              title={a.description}><Icon size={16}/>{a.shortName}</button>
+          })
+        }
+      </Columnizer>
     </div>
     {
       nonInternalConstraints && nonInternalConstraints.length !== 0 && <>
diff --git a/web/app/sketcher/constr/ANConstraints.js b/web/app/sketcher/constr/ANConstraints.js
index c5e627f0..3bc4e61d 100644
--- a/web/app/sketcher/constr/ANConstraints.js
+++ b/web/app/sketcher/constr/ANConstraints.js
@@ -1,21 +1,36 @@
 import {Param} from '../shapes/param';
-import {R_DistancePP, R_Equal, R_PointOnLine} from "./residuals";
-import {indexById} from "../../../../modules/gems/iterables";
 import {_270, _90, DEG_RAD, distanceAB, makeAngle0_360} from "../../math/math";
 import {COS_FN, Polynomial, POW_1_FN, POW_2_FN, POW_3_FN, SIN_FN} from "./polynomial";
-import {Types} from "../io";
 
-import Vector from "math/vector";
 import {cubicBezierDer1, cubicBezierDer2, cubicBezierPoint} from "../../brep/geom/curves/bezierCubic";
 import {greaterThanConstraint, lessThanConstraint} from "./barriers";
 import {genericCurveStep} from "../../brep/geom/impl/nurbs-ext";
 import {_normalize} from "../../math/vec";
+import {
+  AngleBetweenConstraintIcon,
+  AngleConstraintIcon,
+  CoincidentConstraintIcon,
+  DistanceConstraintIcon,
+  DistancePLConstraintIcon,
+  EqualConstraintIcon, FilletConstraintIcon, GenericConstraintIcon,
+  HorizontalConstraintIcon, LockConstraintIcon,
+  ParallelConstraintIcon,
+  PerpendicularConstraintIcon,
+  PointInMiddleConstraintIcon,
+  PointOnCurveConstraintIcon,
+  PointOnLineConstraintIcon,
+  RadiusConstraintIcon,
+  SymmetryConstraintIcon,
+  TangentConstraintIcon,
+  VerticalConstraintIcon
+} from "../icons/constraints/ConstraintIcons";
 
 export const ConstraintDefinitions = {
 
   PCoincident : {
     id: 'PCoincident',
     name: 'Two Points Coincidence',
+    icon: CoincidentConstraintIcon,
 
     defineParamsScope: ([p1, p2], callback) => {
       p1.visitParams(callback);
@@ -43,6 +58,8 @@ export const ConstraintDefinitions = {
   TangentLC: {
     id: 'TangentLC',
     name: 'Line & Circle Tangency',
+    icon: TangentConstraintIcon,
+
     constants: {
       inverted: {
         type: 'boolean',
@@ -69,6 +86,7 @@ export const ConstraintDefinitions = {
   PointOnLine: {
     id: 'PointOnLine',
     name: 'Point On Line',
+    icon: PointOnLineConstraintIcon,
 
     defineParamsScope: ([pt, segment], callback) => {
       pt.visitParams(callback);
@@ -98,6 +116,7 @@ export const ConstraintDefinitions = {
   PointOnCircle: {
     id: 'PointOnCircle',
     name: 'Point On Circle',
+    icon: PointOnCurveConstraintIcon,
 
     defineParamsScope: ([pt, circle], callback) => {
       pt.visitParams(callback);
@@ -133,6 +152,7 @@ export const ConstraintDefinitions = {
   PointOnBezier: {
     id: 'PointOnBezier',
     name: 'Point On Bezier Curve',
+    icon: PointOnCurveConstraintIcon,
 
     initialGuess: ([p0x,p0y, p3x,p3y, p1x,p1y, p2x,p2y, t, px, py]) => {
       const _t = t.get();
@@ -162,6 +182,7 @@ export const ConstraintDefinitions = {
   TangentLineBezier: {
     id: 'TangentLineBezier',
     name: 'Line & Bezier Tangency',
+    icon: TangentConstraintIcon,
 
     initialGuess([p0x,p0y, p3x,p3y, p1x,p1y, p2x,p2y, _t, px,py, nx,ny, _ang, ax,ay]) {
       const ang = _ang.get();
@@ -295,6 +316,7 @@ export const ConstraintDefinitions = {
   PointOnEllipse: {
     id: 'PointOnEllipse',
     name: 'Point On Ellipse',
+    icon: PointOnCurveConstraintIcon,
 
     defineParamsScope: ([pt, ellipse], callback) => {
       ellipse.visitParams(callback);
@@ -316,6 +338,7 @@ export const ConstraintDefinitions = {
   PointInMiddle: {
     id: 'PointInMiddle',
     name: 'Middle Point',
+    icon: PointInMiddleConstraintIcon,
 
     defineParamsScope: ([pt, segment], callback) => {
       segment.a.visitParams(callback);
@@ -357,6 +380,7 @@ export const ConstraintDefinitions = {
   Symmetry: {
     id: 'Symmetry',
     name: 'Symmetry',
+    icon: SymmetryConstraintIcon,
 
     defineParamsScope: ([pt, segment], callback) => {
       segment.a.visitParams(callback);
@@ -374,6 +398,8 @@ export const ConstraintDefinitions = {
   DistancePP: {
     id: 'DistancePP',
     name: 'Distance Between Two Point',
+    icon: DistanceConstraintIcon,
+
     constants: {
       distance: {
         type: 'number',
@@ -415,6 +441,8 @@ export const ConstraintDefinitions = {
   DistancePL: {
     id: 'DistancePL',
     name: 'Distance Between Point And Line',
+    icon: DistancePLConstraintIcon,
+
     constants: {
       distance: {
         type: 'number',
@@ -460,6 +488,8 @@ export const ConstraintDefinitions = {
   Angle: {
     id: 'Angle',
     name: 'Absolute Line Angle',
+    icon: AngleConstraintIcon,
+
     constants: {
       angle: {
         type: 'number',
@@ -485,6 +515,8 @@ export const ConstraintDefinitions = {
   Vertical: {
     id: 'Vertical',
     name: 'Line Verticality',
+    icon: VerticalConstraintIcon,
+
     constants: {
       angle: {
         readOnly: true,
@@ -510,6 +542,8 @@ export const ConstraintDefinitions = {
   Horizontal: {
     id: 'Horizontal',
     name: 'Line Horizontality',
+    icon: HorizontalConstraintIcon,
+
     constants: {
       angle: {
         readOnly: true,
@@ -535,6 +569,8 @@ export const ConstraintDefinitions = {
   AngleBetween: {
     id: 'AngleBetween',
     name: 'Angle Between Two Lines',
+    icon: AngleBetweenConstraintIcon,
+
     constants: {
       angle: {
         type: 'number',
@@ -562,6 +598,7 @@ export const ConstraintDefinitions = {
   Perpendicular: {
     id: 'Perpendicular',
     name: 'Perpendicular',
+    icon: PerpendicularConstraintIcon,
 
     constants: {
       angle: {
@@ -591,6 +628,7 @@ export const ConstraintDefinitions = {
   Parallel: {
     id: 'Parallel',
     name: 'Parallel',
+    icon: ParallelConstraintIcon,
 
     constants: {
       angle: {
@@ -621,6 +659,8 @@ export const ConstraintDefinitions = {
   SegmentLength: {
     id: 'SegmentLength',
     name: 'Segment Length',
+    icon: DistanceConstraintIcon,
+
     constants: {
       length: {
         type: 'number',
@@ -654,6 +694,8 @@ export const ConstraintDefinitions = {
   RadiusLength: {
     id: 'RaduisLength',
     name: 'Raduis Length',
+    icon: RadiusConstraintIcon,
+
     constants: {
       length: {
         type: 'number',
@@ -693,6 +735,7 @@ export const ConstraintDefinitions = {
   EqualRadius: {
     id: 'EqualRadius',
     name: 'Equal Radius',
+    icon: EqualConstraintIcon,
 
     defineParamsScope: ([c1, c2], callback) => {
       callback(c1.r);
@@ -707,6 +750,7 @@ export const ConstraintDefinitions = {
   EqualLength: {
     id: 'EqualLength',
     name: 'Equal Length',
+    icon: EqualConstraintIcon,
 
     defineParamsScope: ([s1, s2], callback) => {
       callback(s1.params.t);
@@ -721,6 +765,8 @@ export const ConstraintDefinitions = {
   LockPoint: {
     id: 'LockPoint',
     name: 'Lock Point',
+    icon: LockConstraintIcon,
+
     constants: {
       x: {
         type: 'number',
@@ -752,6 +798,7 @@ export const ConstraintDefinitions = {
   ArcConsistency: {
     id: 'ArcConsistency',
     name: 'Arc Consistency',
+    icon: GenericConstraintIcon,
 
     defineParamsScope: ([arc], callback) => {
       arc.visitParams(callback);
@@ -777,6 +824,7 @@ export const ConstraintDefinitions = {
   Fillet: {
     id: 'Fillet',
     name: 'Fillet Between Two Lines',
+    icon: FilletConstraintIcon,
 
     constants: {
       inverted1: {
diff --git a/web/app/sketcher/generators/mirrorGenerator.js b/web/app/sketcher/generators/mirrorGenerator.js
index 572dfd3f..a2eada18 100644
--- a/web/app/sketcher/generators/mirrorGenerator.js
+++ b/web/app/sketcher/generators/mirrorGenerator.js
@@ -1,11 +1,13 @@
 import Vector from "math/vector";
 import {Segment} from "../shapes/segment";
+import {MirrorGeneratorIcon} from "../icons/generators/GeneratorIcons";
 
 export const MirrorGeneratorSchema = {
 
   id: 'Mirror',
   title: 'Mirror',
-  description: 'Reflects objects against a given line',
+  description: 'Reflects objects off of a given line',
+  icon: MirrorGeneratorIcon,
 
   params: [
     {
diff --git a/web/app/sketcher/icons/NoIcon.jsx b/web/app/sketcher/icons/NoIcon.jsx
new file mode 100644
index 00000000..cb2fea92
--- /dev/null
+++ b/web/app/sketcher/icons/NoIcon.jsx
@@ -0,0 +1,3 @@
+import {GenericConstraintIcon} from "./constraints/ConstraintIcons";
+
+export const NoIcon = GenericConstraintIcon;
\ No newline at end of file
diff --git a/web/app/sketcher/icons/constraints/ConstraintIcons.jsx b/web/app/sketcher/icons/constraints/ConstraintIcons.jsx
index 5eac6a6d..63026d9b 100644
--- a/web/app/sketcher/icons/constraints/ConstraintIcons.jsx
+++ b/web/app/sketcher/icons/constraints/ConstraintIcons.jsx
@@ -1,110 +1,116 @@
 import React from 'react';
 import {SvgIcon} from 'svg/SvgIcon';
 import coincidentContent from './coincident-constraint.svg';
-import distanceplContent from "./distancepl-constraint.svg";
-import horizontalContent from "./horizontal-constraint.svg";
-import parallelContent from "./parallel-constraint.svg";
-import perpendicularContent from "./perpendicular-constraint.svg";
-import polContent from "./point-on-line-constraint.svg";
-import verticalContent from "./vertical-constraint.svg";
-import distanceContent from "./distance-constraint.svg";
-import equalContent from "./equal-constraint.svg";
-import tangentContent from "./tangent-constraint.svg";
-import radiusContent from "./radius-constraint.svg";
-import pointOnCurveContent from "./point-on-curve-constraint.svg";
-import pointInMiddleContent from "./point-in-middle-constraint.svg";
-import symmetryContent from "./symmetry-constraint.svg";
-import angleBetweenContent from "./angle-between-constraint.svg";
-import angleContent from "./angle-constraint.svg";
-import lockContent from "./lock-constraint.svg";
-import filletContent from "./fillet-constraint.svg";
+import distanceplContent from './distancepl-constraint.svg';
+import horizontalContent from './horizontal-constraint.svg';
+import parallelContent from './parallel-constraint.svg';
+import perpendicularContent from './perpendicular-constraint.svg';
+import polContent from './point-on-line-constraint.svg';
+import verticalContent from './vertical-constraint.svg';
+import distanceContent from './distance-constraint.svg';
+import equalContent from './equal-constraint.svg';
+import tangentContent from './tangent-constraint.svg';
+import radiusContent from './radius-constraint.svg';
+import pointOnCurveContent from './point-on-curve-constraint.svg';
+import pointInMiddleContent from './point-in-middle-constraint.svg';
+import symmetryContent from './symmetry-constraint.svg';
+import angleBetweenContent from './angle-between-constraint.svg';
+import angleContent from './angle-constraint.svg';
+import lockContent from './lock-constraint.svg';
+import filletContent from './fillet-constraint.svg';
+import genericContent from './generic-constraint.svg';
 
-export function CoincidentConstraintIcon() {
+export function CoincidentConstraintIcon(props) {
 
-  return <SvgIcon content={coincidentContent} />
+  return <SvgIcon content={coincidentContent} {...props} />
 }
 
-export function DistancePLConstraintIcon() {
+export function DistancePLConstraintIcon(props) {
 
-  return <SvgIcon content={distanceplContent} />
+  return <SvgIcon content={distanceplContent} {...props} />
 }
 
-export function HorizontalConstraintIcon() {
+export function HorizontalConstraintIcon(props) {
 
-  return <SvgIcon content={horizontalContent} />
+  return <SvgIcon content={horizontalContent} {...props} />
 }
 
-export function ParallelConstraintIcon() {
+export function ParallelConstraintIcon(props) {
 
-  return <SvgIcon content={parallelContent} />
+  return <SvgIcon content={parallelContent} {...props} />
 }
 
-export function PerpendicularConstraintIcon() {
+export function PerpendicularConstraintIcon(props) {
 
-  return <SvgIcon content={perpendicularContent} />
+  return <SvgIcon content={perpendicularContent} {...props} />
 }
 
-export function PointOnLineConstraintIcon() {
+export function PointOnLineConstraintIcon(props) {
 
-  return <SvgIcon content={polContent} />
+  return <SvgIcon content={polContent} {...props} />
 }
 
-export function VerticalConstraintIcon() {
+export function VerticalConstraintIcon(props) {
 
-  return <SvgIcon content={verticalContent} />
+  return <SvgIcon content={verticalContent} {...props} />
 }
 
-export function DistanceConstraintIcon() {
+export function DistanceConstraintIcon(props) {
 
-  return <SvgIcon content={distanceContent} />
+  return <SvgIcon content={distanceContent} {...props} />
 }
 
-export function EqualConstraintIcon() {
+export function EqualConstraintIcon(props) {
 
-  return <SvgIcon content={equalContent} />
+  return <SvgIcon content={equalContent} {...props} />
 }
 
-export function TangentConstraintIcon() {
+export function TangentConstraintIcon(props) {
 
-  return <SvgIcon content={tangentContent} />
+  return <SvgIcon content={tangentContent} {...props} />
 }
 
-export function RadiusConstraintIcon() {
+export function RadiusConstraintIcon(props) {
 
-  return <SvgIcon content={radiusContent} />
+  return <SvgIcon content={radiusContent} {...props} />
 }
 
-export function PointOnCurveConstraintIcon() {
+export function PointOnCurveConstraintIcon(props) {
 
-  return <SvgIcon content={pointOnCurveContent} />
+  return <SvgIcon content={pointOnCurveContent} {...props} />
 }
 
-export function PointInMiddleConstraintIcon() {
+export function PointInMiddleConstraintIcon(props) {
 
-  return <SvgIcon content={pointInMiddleContent} />
+  return <SvgIcon content={pointInMiddleContent} {...props} />
 }
 
-export function SymmetryConstraintIcon() {
+export function SymmetryConstraintIcon(props) {
 
-  return <SvgIcon content={symmetryContent} />
+  return <SvgIcon content={symmetryContent} {...props} />
 }
 
-export function AngleBetweenConstraintIcon() {
+export function AngleBetweenConstraintIcon(props) {
 
-  return <SvgIcon content={angleBetweenContent} />
+  return <SvgIcon content={angleBetweenContent} {...props} />
 }
 
-export function AngleConstraintIcon() {
+export function AngleConstraintIcon(props) {
 
-  return <SvgIcon content={angleContent} />
+  return <SvgIcon content={angleContent} {...props} />
 }
 
-export function LockConstraintIcon() {
+export function LockConstraintIcon(props) {
 
-  return <SvgIcon content={lockContent} />
+  return <SvgIcon content={lockContent} {...props} />
 }
 
-export function FilletConstraintIcon() {
+export function FilletConstraintIcon(props) {
 
-  return <SvgIcon content={filletContent} />
+  return <SvgIcon content={filletContent} {...props} />
+}
+
+export function GenericConstraintIcon(props) {
+
+  return <SvgIcon content={genericContent} {...props} />
 }
\ No newline at end of file
diff --git a/web/app/sketcher/icons/constraints/generic-constraint.svg b/web/app/sketcher/icons/constraints/generic-constraint.svg
new file mode 100644
index 00000000..498830d6
--- /dev/null
+++ b/web/app/sketcher/icons/constraints/generic-constraint.svg
@@ -0,0 +1,20 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="64"
+  height="64"
+  viewBox="0 0 64 64"
+  stroke="black"
+  fill="gray">
+
+  <g>
+    <path class="line" d="M 10 10 L 54 54" />
+    <circle class="point" cx="10" cy="10" r="5" />
+    <circle class="point" cx="54" cy="54" r="5" />
+
+    <path class="line" d="M 10 54 L 54 10" />
+    <circle class="point" cx="10" cy="54" r="5" />
+    <circle class="point" cx="54" cy="10" r="5" />
+
+    <circle class="point" cx="32" cy="32" r="5" />
+  </g>
+</svg>
diff --git a/web/app/sketcher/icons/generators/GeneratorIcons.jsx b/web/app/sketcher/icons/generators/GeneratorIcons.jsx
index e2a04449..1cb39852 100644
--- a/web/app/sketcher/icons/generators/GeneratorIcons.jsx
+++ b/web/app/sketcher/icons/generators/GeneratorIcons.jsx
@@ -2,8 +2,8 @@ import React from 'react';
 import {SvgIcon} from 'svg/SvgIcon';
 import mirrorContent from './mirror-generator.svg';
 
-export function MirrorGeneratorIcon() {
+export function MirrorGeneratorIcon(props) {
 
-  return <SvgIcon content={mirrorContent} />
+  return <SvgIcon content={mirrorContent} {...props}/>
 }
 
diff --git a/web/app/sketcher/io.js b/web/app/sketcher/io.js
index b2d96e42..b458060b 100644
--- a/web/app/sketcher/io.js
+++ b/web/app/sketcher/io.js
@@ -8,32 +8,17 @@ import {Circle} from './shapes/circle'
 import {Ellipse} from './shapes/ellipse'
 import {EllipticalArc} from './shapes/elliptical-arc'
 import {BezierCurve} from './shapes/bezier-curve'
-import {HDimension, VDimension, Dimension, DiameterDimension} from './shapes/dim'
+import {DiameterDimension, Dimension, HDimension, VDimension} from './shapes/dim'
 import {Constraints} from './parametric'
-import {HashTable} from '../utils/hashmap'
 import Vector from 'math/vector';
 import exportTextData from 'gems/exportTextData';
 import NurbsCurve from '../brep/geom/curves/nurbsCurve';
 import {NurbsObject} from './shapes/nurbsObject';
-import {System} from './system';
 import {AlgNumConstraint} from "./constr/ANConstraints";
 import {SketchGenerator} from "./generators/sketchGenerator";
-import {getUIState} from "./uiState";
+import {SketchTypes} from "./shapes/sketch-types";
 
-const Types = {
-  POINT     : 'TCAD.TWO.EndPoint',
-  SEGMENT   : 'TCAD.TWO.Segment',
-  ARC       : 'TCAD.TWO.Arc',
-  CIRCLE    : 'TCAD.TWO.Circle',
-  ELLIPSE   : 'TCAD.TWO.Ellipse',
-  ELL_ARC   : 'TCAD.TWO.EllipticalArc',
-  BEZIER    : 'TCAD.TWO.BezierCurve',
-  NURBS     : 'TCAD.TWO.NurbsObject',
-  DIM       : 'TCAD.TWO.Dimension',
-  HDIM      : 'TCAD.TWO.HDimension',
-  VDIM      : 'TCAD.TWO.VDimension',
-  DDIM      : 'TCAD.TWO.DiameterDimension'
-};
+const Types = SketchTypes;
 
 IO.BOUNDARY_LAYER_NAME = "__bounds__";
 
@@ -790,4 +775,4 @@ IO.prototype.dxfExport = function () {
 
 IO.exportTextData = exportTextData;
 
-export {IO, BBox, Types};
\ No newline at end of file
+export {IO, BBox};
\ No newline at end of file
diff --git a/web/app/sketcher/shapes/sketch-object.js b/web/app/sketcher/shapes/sketch-object.js
index 6cc4b825..41f7005a 100644
--- a/web/app/sketcher/shapes/sketch-object.js
+++ b/web/app/sketcher/shapes/sketch-object.js
@@ -1,9 +1,7 @@
 import {Generator} from '../id-generator'
 import {Shape} from './shape'
-import {Types} from '../io';
 import {Styles} from "../styles";
-import {dfs} from 'gems/traverse';
-import {ConstraintDefinitions} from "../constr/ANConstraints";
+import {SketchTypes} from "./sketch-types";
 
 export class SketchObject extends Shape {
 
@@ -239,7 +237,7 @@ export class SketchObject extends Shape {
 
 export function pointIterator(shape, func) {
   shape.accept(o => {
-    if (o._class === Types.POINT) {
+    if (o._class === SketchTypes.POINT) {
       func(o);
     }
     return true;
diff --git a/web/app/sketcher/shapes/sketch-types.js b/web/app/sketcher/shapes/sketch-types.js
new file mode 100644
index 00000000..3b129fea
--- /dev/null
+++ b/web/app/sketcher/shapes/sketch-types.js
@@ -0,0 +1,14 @@
+export const SketchTypes = {
+  POINT     : 'TCAD.TWO.EndPoint',
+  SEGMENT   : 'TCAD.TWO.Segment',
+  ARC       : 'TCAD.TWO.Arc',
+  CIRCLE    : 'TCAD.TWO.Circle',
+  ELLIPSE   : 'TCAD.TWO.Ellipse',
+  ELL_ARC   : 'TCAD.TWO.EllipticalArc',
+  BEZIER    : 'TCAD.TWO.BezierCurve',
+  NURBS     : 'TCAD.TWO.NurbsObject',
+  DIM       : 'TCAD.TWO.Dimension',
+  HDIM      : 'TCAD.TWO.HDimension',
+  VDIM      : 'TCAD.TWO.VDimension',
+  DDIM      : 'TCAD.TWO.DiameterDimension'
+};
\ No newline at end of file