diff --git a/packages/component-submit/src/components/Validot.js b/packages/component-submit/src/components/Validot.js
index 77a16f28d399b619a10df719470d30bc3842b0be..6049d57593a2ba9d386c1d3a58cf279e15f5ac3b 100644
--- a/packages/component-submit/src/components/Validot.js
+++ b/packages/component-submit/src/components/Validot.js
@@ -7,16 +7,13 @@ import classes from './Validot.local.css'
 const scrollIntoView = id => document.getElementById(id).scrollIntoView()
 
 const Validot = ({ input, meta }) => (
-  <svg
+  <div
     className={classnames(classes.root, {
       [classes.valid]: meta.valid,
       [classes.error]: meta.error,
       [classes.warning]: meta.warning,
     })}
-    onClick={() => scrollIntoView(input.name)}
-    viewBox="0 0 40 40">
-    <circle cx="20" cy="20" r="20"/>
-  </svg>
+    onClick={() => scrollIntoView(input.name)}/>
 )
 
 export default Validot
diff --git a/packages/component-submit/src/components/Validot.local.css b/packages/component-submit/src/components/Validot.local.css
index 3c7da3dcafc5d3cb3804ec5ca7161c5ded8a2ea3..ae5d850c7e7f731799ae249ed7ab5161fa6115ae 100644
--- a/packages/component-submit/src/components/Validot.local.css
+++ b/packages/component-submit/src/components/Validot.local.css
@@ -4,22 +4,22 @@
   height: 25px;
   margin: 5px 10px;
   cursor: pointer;
-  border: 3px solid transparent;
+  border: 3px solid cornflowerblue;
   border-radius: 100%;
 }
 
 .root:hover {
-  border-color: black;
+  border-color: #aaa;
 }
 
 .valid {
-  fill: lightgreen;
+  background: cornflowerblue;
 }
 
 .warning {
-  fill: orange;
+  border-color: orange;
 }
 
 .error {
-  fill: red;
+  border-color: red;
 }