diff --git a/docs/components/menu.html b/docs/components/menu.html
index dd19f7f..e9c253b 100644
--- a/docs/components/menu.html
+++ b/docs/components/menu.html
@@ -86,9 +86,7 @@
                 modal-header="true"
                 modal-x=""
                 modal-y="">
-                <i
-                    class="height:20px fill:#505050"
-                    src="/assets/svg/search.svg"></i>
+                <i src="/assets/svg/search.svg"></i>
             </a>
         </span>
     </form>
diff --git a/docs/components/navbar.html b/docs/components/navbar.html
index c405c10..1f12749 100644
--- a/docs/components/navbar.html
+++ b/docs/components/navbar.html
@@ -76,33 +76,25 @@
                     href="https://github.com/CoCreate-app/CoCreateJS"
                     target="_blank"
                     class="margin-right:15px"
-                    ><i
-                        class="height:20px fill:#505050"
-                        src="/assets/svg/github.svg"></i
+                    ><i src="/assets/svg/github.svg"></i
                 ></a>
                 <a
                     href="https://twitter.com/CoCreate_App"
                     target="_blank"
                     class="margin-right:15px"
-                    ><i
-                        class="height:20px fill:#505050"
-                        src="/assets/svg/twitter.svg"></i
+                    ><i src="/assets/svg/twitter.svg"></i
                 ></a>
                 <a
                     href="https://www.facebook.com/CoCreate.apps"
                     target="_blank"
                     class="margin-right:15px"
-                    ><i
-                        class="height:20px fill:#505050"
-                        src="/assets/svg/facebook.svg"></i
+                    ><i src="/assets/svg/facebook.svg"></i
                 ></a>
                 <a
                     href="https://www.instagram.com/cocreate_app/"
                     target="_blank"
                     class="margin-right:15px"
-                    ><i
-                        class="height:20px fill:#505050"
-                        src="/assets/svg/instagram.svg"></i
+                    ><i src="/assets/svg/instagram.svg"></i
                 ></a>
             </div>
 
@@ -122,9 +114,7 @@
                     object="$user_id"
                     key="name"
                     class="avatar-name">
-                    <i
-                        class="height:20px fill:#505050"
-                        src="/assets/svg/sign-in-alt.svg"></i>
+                    <i src="/assets/svg/sign-in-alt.svg"></i>
                 </span>
                 <span class="avatar-image">
                     <img
diff --git a/docs/elements.html b/docs/elements.html
index 083f7d7..62be793 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -95,43 +95,33 @@ <h2>CoCreateJS</h2>
                                     class="margin-right:15px"
                                     share-network="twitter"
                                     title="Share on twitter"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/twitter.svg"></i
+                                    ><i src="/assets/svg/twitter.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:15px"
                                     share-network="facebook"
                                     title="Share on Facebook"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/facebook.svg"></i
+                                    ><i src="/assets/svg/facebook.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:15px"
                                     share-network="instagram"
                                     title="Share on instagram"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/instagram.svg"></i
+                                    ><i src="/assets/svg/instagram.svg"></i
                                 ></a>
                             </div>
                             <a
                                 class="margin-right:15px"
                                 share-network="share"
                                 title="Share on share"
-                                ><i
-                                    class="height:20px fill:#505050"
-                                    src="/assets/svg/share-alt.svg"></i
+                                ><i src="/assets/svg/share-alt.svg"></i
                             ></a>
                         </div>
                         <a
                             href="https://github.com/CoCreate-app/CoCreateJS"
                             target="_blank"
                             class=""
-                            ><i
-                                class="height:20px fill:#505050"
-                                src="/assets/svg/github.svg"></i
+                            ><i src="/assets/svg/github.svg"></i
                         ></a>
                     </div>
                 </div>
@@ -234,7 +224,7 @@ <h3 class="padding-top:20px">Input</h3>
                                     toggle="code-height"
                                     toggle-selector="#input-demo-code"
                                     ><i
-                                        class="height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/eye.svg"></i
                                 ></a>
                                 <a
@@ -245,18 +235,14 @@ <h3 class="padding-top:20px">Input</h3>
                                     hide="#input-eye-slash"
                                     toggle="code-height"
                                     toggle-selector="#input-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/eye-slash.svg"></i
+                                    ><i src="/assets/svg/eye-slash.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
                                     id="input-code"
                                     show="#input-code-slash"
                                     hide="#input-code, #input-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/code.svg"></i
+                                    ><i src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
@@ -265,7 +251,7 @@ <h3 class="padding-top:20px">Input</h3>
                                     show="#input-code, #input-demo-code"
                                     hide="#input-code-slash"
                                     ><i
-                                        class="display:flex height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
@@ -326,7 +312,7 @@ <h3 class="padding-top:20px">Textarea</h3>
                                     toggle="code-height"
                                     toggle-selector="#textarea-demo-code"
                                     ><i
-                                        class="height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/eye.svg"></i
                                 ></a>
                                 <a
@@ -337,18 +323,14 @@ <h3 class="padding-top:20px">Textarea</h3>
                                     hide="#textarea-eye-slash"
                                     toggle="code-height"
                                     toggle-selector="#textarea-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/eye-slash.svg"></i
+                                    ><i src="/assets/svg/eye-slash.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
                                     id="textarea-code"
                                     show="#textarea-code-slash"
                                     hide="#textarea-code, #textarea-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/code.svg"></i
+                                    ><i src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
@@ -357,7 +339,7 @@ <h3 class="padding-top:20px">Textarea</h3>
                                     show="#textarea-code, #textarea-demo-code"
                                     hide="#textarea-code-slash"
                                     ><i
-                                        class="display:flex height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
@@ -425,7 +407,7 @@ <h3 class="padding-top:20px">Contenteditable</h3>
                                     toggle="code-height"
                                     toggle-selector="#contenteditable-demo-code"
                                     ><i
-                                        class="height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/eye.svg"></i
                                 ></a>
                                 <a
@@ -436,18 +418,14 @@ <h3 class="padding-top:20px">Contenteditable</h3>
                                     hide="#contenteditable-eye-slash"
                                     toggle="code-height"
                                     toggle-selector="#contenteditable-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/eye-slash.svg"></i
+                                    ><i src="/assets/svg/eye-slash.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
                                     id="contenteditable-code"
                                     show="#contenteditable-code-slash"
                                     hide="#contenteditable-code, #contenteditable-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/code.svg"></i
+                                    ><i src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
@@ -456,7 +434,7 @@ <h3 class="padding-top:20px">Contenteditable</h3>
                                     show="#contenteditable-code, #contenteditable-demo-code"
                                     hide="#contenteditable-code-slash"
                                     ><i
-                                        class="display:flex height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
@@ -519,7 +497,7 @@ <h3 class="padding-top:20px">Radio</h3>
                                     toggle="code-height"
                                     toggle-selector="#radio-demo-code"
                                     ><i
-                                        class="height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/eye.svg"></i
                                 ></a>
                                 <a
@@ -530,18 +508,14 @@ <h3 class="padding-top:20px">Radio</h3>
                                     hide="#radio-eye-slash"
                                     toggle="code-height"
                                     toggle-selector="#radio-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/eye-slash.svg"></i
+                                    ><i src="/assets/svg/eye-slash.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
                                     id="radio-code"
                                     show="#radio-code-slash"
                                     hide="#radio-code, #radio-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/code.svg"></i
+                                    ><i src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
@@ -550,7 +524,7 @@ <h3 class="padding-top:20px">Radio</h3>
                                     show="#radio-code, #radio-demo-code"
                                     hide="#radio-code-slash"
                                     ><i
-                                        class="display:flex height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
@@ -612,7 +586,7 @@ <h3 class="padding-top:20px">Checkbox</h3>
                                     toggle="code-height"
                                     toggle-selector="#checkbox-demo-code"
                                     ><i
-                                        class="height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/eye.svg"></i
                                 ></a>
                                 <a
@@ -623,18 +597,14 @@ <h3 class="padding-top:20px">Checkbox</h3>
                                     hide="#checkbox-eye-slash"
                                     toggle="code-height"
                                     toggle-selector="#checkbox-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/eye-slash.svg"></i
+                                    ><i src="/assets/svg/eye-slash.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
                                     id="checkbox-code"
                                     show="#checkbox-code-slash"
                                     hide="#checkbox-code, #checkbox-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/code.svg"></i
+                                    ><i src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
@@ -643,7 +613,7 @@ <h3 class="padding-top:20px">Checkbox</h3>
                                     show="#checkbox-code, #checkbox-demo-code"
                                     hide="#checkbox-code-slash"
                                     ><i
-                                        class="display:flex height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
@@ -704,7 +674,7 @@ <h3 class="padding-top:20px">Select</h3>
                                     toggle="code-height"
                                     toggle-selector="#select-demo-code"
                                     ><i
-                                        class="height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/eye.svg"></i
                                 ></a>
                                 <a
@@ -715,18 +685,14 @@ <h3 class="padding-top:20px">Select</h3>
                                     hide="#select-eye-slash"
                                     toggle="code-height"
                                     toggle-selector="#select-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/eye-slash.svg"></i
+                                    ><i src="/assets/svg/eye-slash.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
                                     id="select-code"
                                     show="#select-code-slash"
                                     hide="#select-code, #select-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/code.svg"></i
+                                    ><i src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
@@ -735,7 +701,7 @@ <h3 class="padding-top:20px">Select</h3>
                                     show="#select-code, #select-demo-code"
                                     hide="#select-code-slash"
                                     ><i
-                                        class="display:flex height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
@@ -802,7 +768,7 @@ <h3 class="padding-top:20px">Form</h3>
                                     toggle="code-height"
                                     toggle-selector="#form-demo-code"
                                     ><i
-                                        class="height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/eye.svg"></i
                                 ></a>
                                 <a
@@ -813,18 +779,14 @@ <h3 class="padding-top:20px">Form</h3>
                                     hide="#form-eye-slash"
                                     toggle="code-height"
                                     toggle-selector="#form-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/eye-slash.svg"></i
+                                    ><i src="/assets/svg/eye-slash.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
                                     id="form-code"
                                     show="#form-code-slash"
                                     hide="#form-code, #form-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/code.svg"></i
+                                    ><i src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
@@ -833,7 +795,7 @@ <h3 class="padding-top:20px">Form</h3>
                                     show="#form-code, #form-demo-code"
                                     hide="#form-code-slash"
                                     ><i
-                                        class="display:flex height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
@@ -917,7 +879,7 @@ <h3 class="padding-top:20px">Actions</h3>
                                     toggle="code-height"
                                     toggle-selector="#actions-demo-code"
                                     ><i
-                                        class="height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/eye.svg"></i
                                 ></a>
                                 <a
@@ -928,18 +890,14 @@ <h3 class="padding-top:20px">Actions</h3>
                                     hide="#actions-eye-slash"
                                     toggle="code-height"
                                     toggle-selector="#actions-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/eye-slash.svg"></i
+                                    ><i src="/assets/svg/eye-slash.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
                                     id="actions-code"
                                     show="#actions-code-slash"
                                     hide="#actions-code, #actions-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/code.svg"></i
+                                    ><i src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
@@ -948,7 +906,7 @@ <h3 class="padding-top:20px">Actions</h3>
                                     show="#actions-code, #actions-demo-code"
                                     hide="#actions-code-slash"
                                     ><i
-                                        class="display:flex height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
diff --git a/docs/index.html b/docs/index.html
index 2358d88..41897bf 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -86,9 +86,7 @@ <h2 class="padding:5px_0px">Introduction</h2>
                         <a
                             class="margin-left:10px display:none"
                             href="#introduction"
-                            ><i
-                                class="height:20px fill:#505050"
-                                src="/assets/svg/link.svg"></i
+                            ><i src="/assets/svg/link.svg"></i
                         ></a>
                     </span>
                 </div>
@@ -133,9 +131,7 @@ <h2 class="padding:5px_0px">Getting Started</h2>
                         <a
                             class="margin-left:10px display:none"
                             href="#getting-started"
-                            ><i
-                                class="height:20px fill:#505050"
-                                src="/assets/svg/link.svg"></i
+                            ><i src="/assets/svg/link.svg"></i
                         ></a>
                     </span>
                 </div>
diff --git a/docs/logic.html b/docs/logic.html
index 92e640f..9573912 100644
--- a/docs/logic.html
+++ b/docs/logic.html
@@ -87,43 +87,33 @@ <h2>Logic</h2>
                                     class="margin-right:15px"
                                     share-network="twitter"
                                     title="Share on twitter"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/twitter.svg"></i
+                                    ><i src="/assets/svg/twitter.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:15px"
                                     share-network="facebook"
                                     title="Share on Facebook"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/facebook.svg"></i
+                                    ><i src="/assets/svg/facebook.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:15px"
                                     share-network="instagram"
                                     title="Share on instagram"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/instagram.svg"></i
+                                    ><i src="/assets/svg/instagram.svg"></i
                                 ></a>
                             </div>
                             <a
                                 class="margin-right:15px"
                                 share-network="share"
                                 title="Share on share"
-                                ><i
-                                    class="height:20px fill:#505050"
-                                    src="/assets/svg/share-alt.svg"></i
+                                ><i src="/assets/svg/share-alt.svg"></i
                             ></a>
                         </div>
                         <a
                             href="https://github.com/CoCreate-app/CoCreateJS"
                             target="_blank"
                             class=""
-                            ><i
-                                class="height:20px fill:#505050"
-                                src="/assets/svg/github.svg"></i
+                            ><i src="/assets/svg/github.svg"></i
                         ></a>
                     </div>
                 </div>
@@ -196,7 +186,7 @@ <h2>Logic</h2>
                                     toggle="code-height"
                                     toggle-selector="#state-attributes-demo-code"
                                     ><i
-                                        class="height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/eye.svg"></i
                                 ></a>
                                 <a
@@ -207,18 +197,14 @@ <h2>Logic</h2>
                                     hide="#state-attributes-eye-slash"
                                     toggle="code-height"
                                     toggle-selector="#state-attributes-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/eye-slash.svg"></i
+                                    ><i src="/assets/svg/eye-slash.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
                                     id="state-attributes-code"
                                     show="#state-attributes-code-slash"
                                     hide="#state-attributes-code, #state-attributes-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/code.svg"></i
+                                    ><i src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
@@ -227,7 +213,7 @@ <h2>Logic</h2>
                                     show="#state-attributes-code, #state-attributes-demo-code"
                                     hide="#state-attributes-code-slash"
                                     ><i
-                                        class="display:flex height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
@@ -292,7 +278,7 @@ <h3 id="state-values" class="padding-top:20px">
                                     toggle="code-height"
                                     toggle-selector="#state-values-demo-code"
                                     ><i
-                                        class="height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/eye.svg"></i
                                 ></a>
                                 <a
@@ -303,18 +289,14 @@ <h3 id="state-values" class="padding-top:20px">
                                     hide="#state-values-eye-slash"
                                     toggle="code-height"
                                     toggle-selector="#state-values-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/eye-slash.svg"></i
+                                    ><i src="/assets/svg/eye-slash.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
                                     id="state-values-code"
                                     show="#state-values-code-slash"
                                     hide="#state-values-code, #state-values-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/code.svg"></i
+                                    ><i src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
@@ -323,7 +305,7 @@ <h3 id="state-values" class="padding-top:20px">
                                     show="#state-values-code, #state-values-demo-code"
                                     hide="#state-values-code-slash"
                                     ><i
-                                        class="display:flex height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
@@ -392,7 +374,7 @@ <h3 id="conditional-logic" class="padding-top:20px">
                                     toggle="code-height"
                                     toggle-selector="#conditional-logic-demo-code"
                                     ><i
-                                        class="height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/eye.svg"></i
                                 ></a>
                                 <a
@@ -403,18 +385,14 @@ <h3 id="conditional-logic" class="padding-top:20px">
                                     hide="#conditional-logic-eye-slash"
                                     toggle="code-height"
                                     toggle-selector="#conditional-logic-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/eye-slash.svg"></i
+                                    ><i src="/assets/svg/eye-slash.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
                                     id="conditional-logic-code"
                                     show="#conditional-logic-code-slash"
                                     hide="#conditional-logic-code, #conditional-logic-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/code.svg"></i
+                                    ><i src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
@@ -423,7 +401,7 @@ <h3 id="conditional-logic" class="padding-top:20px">
                                     show="#conditional-logic-code, #conditional-logic-demo-code"
                                     hide="#conditional-logic-code-slash"
                                     ><i
-                                        class="display:flex height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
diff --git a/docs/objects.html b/docs/objects.html
index cf596be..efcdf14 100644
--- a/docs/objects.html
+++ b/docs/objects.html
@@ -80,43 +80,33 @@ <h2>CoCreateJS</h2>
                                 class="margin-right:15px"
                                 share-network="twitter"
                                 title="Share on twitter"
-                                ><i
-                                    class="height:20px fill:#505050"
-                                    src="/assets/svg/twitter.svg"></i
+                                ><i src="/assets/svg/twitter.svg"></i
                             ></a>
                             <a
                                 class="margin-right:15px"
                                 share-network="facebook"
                                 title="Share on Facebook"
-                                ><i
-                                    class="height:20px fill:#505050"
-                                    src="/assets/svg/facebook.svg"></i
+                                ><i src="/assets/svg/facebook.svg"></i
                             ></a>
                             <a
                                 class="margin-right:15px"
                                 share-network="instagram"
                                 title="Share on instagram"
-                                ><i
-                                    class="height:20px fill:#505050"
-                                    src="/assets/svg/instagram.svg"></i
+                                ><i src="/assets/svg/instagram.svg"></i
                             ></a>
                         </div>
                         <a
                             class="margin-right:15px"
                             share-network="share"
                             title="Share on share"
-                            ><i
-                                class="height:20px fill:#505050"
-                                src="/assets/svg/share-alt.svg"></i
+                            ><i src="/assets/svg/share-alt.svg"></i
                         ></a>
                     </div>
                     <a
                         href="https://github.com/CoCreate-app/CoCreateJS"
                         target="_blank"
                         class="margin-right:15px"
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="/assets/svg/github.svg"></i
+                        ><i src="/assets/svg/github.svg"></i
                     ></a>
                 </div>
             </div>
@@ -144,12 +134,12 @@ <h1>CRUD Objects</h1>
                         class="padding:15px_0px border-top border-bottom:1px_solid_lightgrey">
                         <span class="create crudplusicon" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="/assets/svg/plus.svg"></i
                         ></span>
                         <span class="create crud"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="/assets/svg/minus.svg"></i
                         ></span>
                         <span>Create Document Parameters</span>
@@ -276,12 +266,12 @@ <h4>
                         class="padding:15px_0px border-bottom:1px_solid_lightgrey">
                         <span class="read crudplusicon"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="/assets/svg/plus.svg"></i
                         ></span>
                         <span class="read crud" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="/assets/svg/minus.svg"></i
                         ></span>
                         <span>Read Document Parameters</span>
@@ -383,12 +373,12 @@ <h4>
                         class="padding:15px_0px border-bottom:1px_solid_lightgrey">
                         <span class="update crudplusicon"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="/assets/svg/plus.svg"></i
                         ></span>
                         <span class="update crud" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="/assets/svg/minus.svg"></i
                         ></span>
                         <span>Update Document Parameters</span>
@@ -531,12 +521,12 @@ <h4>
                         class="padding:15px_0px border-bottom:1px_solid_lightgrey">
                         <span class="delete crudplusicon"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="/assets/svg/plus.svg"></i
                         ></span>
                         <span class="delete crud" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="/assets/svg/minus.svg"></i
                         ></span>
                         <span>Delete Document Parameters</span>
@@ -673,12 +663,12 @@ <h4>
                         class="padding:15px_0px border-bottom:1px_solid_lightgrey">
                         <span class="readlist crudplusicon"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="/assets/svg/plus.svg"></i
                         ></span>
                         <span class="readlist crud" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="/assets/svg/minus.svg"></i
                         ></span>
                         <span>Read Document Filter Parameters</span>
@@ -765,14 +755,14 @@ <h4>
                                         <span
                                             class="readlist-operator crudplusicon"
                                             ><i
-                                                class="height:16px fill:#505050"
+                                                class="height:16px"
                                                 src="/assets/svg/plus.svg"></i
                                         ></span>
                                         <span
                                             class="readlist-operator crud"
                                             hidden
                                             ><i
-                                                class="height:16px fill:#505050"
+                                                class="height:16px"
                                                 src="/assets/svg/minus.svg"></i
                                         ></span>
                                         <span>operator</span>
@@ -1091,12 +1081,12 @@ <h1>CRDT Objects</h1>
                         class="padding:15px_0px border-top border-bottom:1px_solid_lightgrey">
                         <span class="init-crdt crdtplusicon" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="/assets/svg/plus.svg"></i
                         ></span>
                         <span class="init-crdt crdt"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="/assets/svg/minus.svg"></i
                         ></span>
                         <span>Init CRDT Parameters</span>
@@ -1218,12 +1208,12 @@ <h4>
                         class="padding:15px_0px border-bottom:1px_solid_lightgrey">
                         <span class="get-crdt crdtplusicon"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="/assets/svg/plus.svg"></i
                         ></span>
                         <span class="get-crdt crdt" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="/assets/svg/minus.svg"></i
                         ></span>
                         <span>Get Data CRDT Parameters</span>
@@ -1323,12 +1313,12 @@ <h4>
                         class="padding:15px_0px border-bottom:1px_solid_lightgrey">
                         <span class="update-crdt crdtplusicon"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="/assets/svg/plus.svg"></i
                         ></span>
                         <span class="update-crdt crdt" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="/assets/svg/minus.svg"></i
                         ></span>
                         <span>Update Data CRDT Parameters</span>
@@ -1481,12 +1471,12 @@ <h4>
                         class="padding:15px_0px border-bottom:1px_solid_lightgrey">
                         <span class="replace-crdt crdtplusicon"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="/assets/svg/plus.svg"></i
                         ></span>
                         <span class="replace-crdt crdt" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="/assets/svg/minus.svg"></i
                         ></span>
                         <span>Replace Data CRDT Parameters</span>
@@ -1624,8 +1614,8 @@ <h1>Cursor Objects</h1>
 			    
 		        <a href="#send-cursor" id="send-cursor" show=".send-cursor,.cursorplusicon" hide=".send-cursor,.cursors">
 		            <h3 class="padding:15px_0px border-top border-bottom:1px_solid_lightgrey">
-		            	<span class="send-cursor cursorplusicon" hidden><i class="height:16px fill:#505050" src="/assets/svg/plus.svg"></i></span>
-		            	<span class="send-cursor cursors"><i class="height:16px fill:#505050" src="/assets/svg/minus.svg"></i></span>
+		            	<span class="send-cursor cursorplusicon" hidden><i class="height:16px" src="/assets/svg/plus.svg"></i></span>
+		            	<span class="send-cursor cursors"><i class="height:16px" src="/assets/svg/minus.svg"></i></span>
 		            	<span> Send Cursor position Parameters</span>
 		            </h3>
 		        </a>
@@ -1673,8 +1663,8 @@ <h4><span>endPositon</span> <span class="cocreate-badge success">string</span> <
 
 		        <a href="#get-cursor" id="get-cursor" show=".get-cursor,.cursorplusicon" hide=".get-cursor,.cursors">
 		            <h3 class="padding:15px_0px border-bottom:1px_solid_lightgrey">
-		            	<span class="get-cursor cursorplusicon"><i class="height:16px fill:#505050" src="/assets/svg/plus.svg"></i></span>
-		            	<span class="get-cursor cursors" hidden><i class="height:16px fill:#505050" src="/assets/svg/minus.svg"></i></span> 
+		            	<span class="get-cursor cursorplusicon"><i class="height:16px" src="/assets/svg/plus.svg"></i></span>
+		            	<span class="get-cursor cursors" hidden><i class="height:16px" src="/assets/svg/minus.svg"></i></span> 
 		            	<span>Get Cursor position Parameters</span>
 		            </h3>
 		        </a>
@@ -1712,8 +1702,8 @@ <h4><span>data</span> <span class="cocreate-badge success">object</span> <span c
 
             <!--	        <a href="#component-registry" id="component-registry" show=".component-registry" hide=".component-registry">-->
             <!--	            <h3 class="padding:15px_0px border-top border-bottom:1px_solid_lightgrey">-->
-            <!--	            	<span class="component-registry" hidden><i class="height:16px fill:#505050" src="/assets/svg/plus.svg"></i></span>-->
-            <!--	            	<span class="component-registry"><i class="height:16px fill:#505050" src="/assets/svg/minus.svg"></i></span>-->
+            <!--	            	<span class="component-registry" hidden><i class="height:16px" src="/assets/svg/plus.svg"></i></span>-->
+            <!--	            	<span class="component-registry"><i class="height:16px" src="/assets/svg/minus.svg"></i></span>-->
             <!--	            	<span> Register Component Parameters</span>-->
             <!--	            </h3>-->
             <!--	        </a>-->
@@ -1780,12 +1770,12 @@ <h1>WebSocket Objects</h1>
                         class="padding:15px_0px border-top border-bottom:1px_solid_lightgrey">
                         <span class="websocket-create socketplusicon" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="/assets/svg/plus.svg"></i
                         ></span>
                         <span class="websocket-create socket"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="/assets/svg/minus.svg"></i
                         ></span>
                         <span>Create Socket Parameters</span>
@@ -1898,12 +1888,12 @@ <h4>
                         class="padding:15px_0px border-top border-bottom:1px_solid_lightgrey">
                         <span class="websocket-send socketplusicon"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="/assets/svg/plus.svg"></i
                         ></span>
                         <span class="websocket-send socket" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="/assets/svg/minus.svg"></i
                         ></span>
                         <span> Send Message Parameters</span>
@@ -2024,12 +2014,12 @@ <h4>
                         class="padding:15px_0px border-bottom:1px_solid_lightgrey">
                         <span class="websocket-listen socketplusicon"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="/assets/svg/plus.svg"></i
                         ></span>
                         <span class="websocket-listen socket" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="/assets/svg/minus.svg"></i
                         ></span>
                         <span>Listen Message Parameters</span>
diff --git a/docs/templating.html b/docs/templating.html
index a37f4ef..f458877 100644
--- a/docs/templating.html
+++ b/docs/templating.html
@@ -87,43 +87,33 @@ <h2>Templating</h2>
                                     class="margin-right:15px"
                                     share-network="twitter"
                                     title="Share on twitter"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/twitter.svg"></i
+                                    ><i src="/assets/svg/twitter.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:15px"
                                     share-network="facebook"
                                     title="Share on Facebook"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/facebook.svg"></i
+                                    ><i src="/assets/svg/facebook.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:15px"
                                     share-network="instagram"
                                     title="Share on instagram"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/instagram.svg"></i
+                                    ><i src="/assets/svg/instagram.svg"></i
                                 ></a>
                             </div>
                             <a
                                 class="margin-right:15px"
                                 share-network="share"
                                 title="Share on share"
-                                ><i
-                                    class="height:20px fill:#505050"
-                                    src="/assets/svg/share-alt.svg"></i
+                                ><i src="/assets/svg/share-alt.svg"></i
                             ></a>
                         </div>
                         <a
                             href="https://github.com/CoCreate-app/CoCreateJS"
                             target="_blank"
                             class=""
-                            ><i
-                                class="height:20px fill:#505050"
-                                src="/assets/svg/github.svg"></i
+                            ><i src="/assets/svg/github.svg"></i
                         ></a>
                     </div>
                 </div>
@@ -195,7 +185,7 @@ <h2>Templating</h2>
                                     toggle="code-height"
                                     toggle-selector="#fetch-demo-code"
                                     ><i
-                                        class="height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/eye.svg"></i
                                 ></a>
                                 <a
@@ -206,18 +196,14 @@ <h2>Templating</h2>
                                     hide="#fetch-eye-slash"
                                     toggle="code-height"
                                     toggle-selector="#fetch-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/eye-slash.svg"></i
+                                    ><i src="/assets/svg/eye-slash.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
                                     id="fetch-code"
                                     show="#fetch-code-slash"
                                     hide="#fetch-code, #fetch-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/code.svg"></i
+                                    ><i src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
@@ -226,7 +212,7 @@ <h2>Templating</h2>
                                     show="#fetch-code, #fetch-demo-code"
                                     hide="#fetch-code-slash"
                                     ><i
-                                        class="display:flex height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
@@ -290,7 +276,7 @@ <h3 id="filter" class="padding-top:20px">Filter</h3>
                                     toggle="code-height"
                                     toggle-selector="#filter-demo-code"
                                     ><i
-                                        class="height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/eye.svg"></i
                                 ></a>
                                 <a
@@ -301,18 +287,14 @@ <h3 id="filter" class="padding-top:20px">Filter</h3>
                                     hide="#filter-eye-slash"
                                     toggle="code-height"
                                     toggle-selector="#filter-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/eye-slash.svg"></i
+                                    ><i src="/assets/svg/eye-slash.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
                                     id="filter-code"
                                     show="#filter-code-slash"
                                     hide="#filter-code, #filter-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/code.svg"></i
+                                    ><i src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
@@ -321,7 +303,7 @@ <h3 id="filter" class="padding-top:20px">Filter</h3>
                                     show="#filter-code, #filter-demo-code"
                                     hide="#filter-code-slash"
                                     ><i
-                                        class="display:flex height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
diff --git a/docs/user-management.html b/docs/user-management.html
index 20ae534..49bde74 100644
--- a/docs/user-management.html
+++ b/docs/user-management.html
@@ -87,43 +87,33 @@ <h2>User Management</h2>
                                     class="margin-right:15px"
                                     share-network="twitter"
                                     title="Share on twitter"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/twitter.svg"></i
+                                    ><i src="/assets/svg/twitter.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:15px"
                                     share-network="facebook"
                                     title="Share on Facebook"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/facebook.svg"></i
+                                    ><i src="/assets/svg/facebook.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:15px"
                                     share-network="instagram"
                                     title="Share on instagram"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/instagram.svg"></i
+                                    ><i src="/assets/svg/instagram.svg"></i
                                 ></a>
                             </div>
                             <a
                                 class="margin-right:15px"
                                 share-network="share"
                                 title="Share on share"
-                                ><i
-                                    class="height:20px fill:#505050"
-                                    src="/assets/svg/share-alt.svg"></i
+                                ><i src="/assets/svg/share-alt.svg"></i
                             ></a>
                         </div>
                         <a
                             href="https://github.com/CoCreate-app/CoCreateJS"
                             target="_blank"
                             class=""
-                            ><i
-                                class="height:20px fill:#505050"
-                                src="/assets/svg/github.svg"></i
+                            ><i src="/assets/svg/github.svg"></i
                         ></a>
                     </div>
                 </div>
@@ -193,7 +183,7 @@ <h2>User Management</h2>
                                     toggle="code-height"
                                     toggle-selector="#signup-demo-code"
                                     ><i
-                                        class="height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/eye.svg"></i
                                 ></a>
                                 <a
@@ -204,18 +194,14 @@ <h2>User Management</h2>
                                     hide="#signup-eye-slash"
                                     toggle="code-height"
                                     toggle-selector="#signup-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/eye-slash.svg"></i
+                                    ><i src="/assets/svg/eye-slash.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
                                     id="signup-code"
                                     show="#signup-code-slash"
                                     hide="#signup-code, #signup-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/code.svg"></i
+                                    ><i src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
@@ -224,7 +210,7 @@ <h2>User Management</h2>
                                     show="#signup-code, #signup-demo-code"
                                     hide="#signup-code-slash"
                                     ><i
-                                        class="display:flex height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
@@ -290,7 +276,7 @@ <h3 id="signIn" class="padding-top:20px">Sign In</h3>
                                     toggle="code-height"
                                     toggle-selector="#signin-demo-code"
                                     ><i
-                                        class="height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/eye.svg"></i
                                 ></a>
                                 <a
@@ -301,18 +287,14 @@ <h3 id="signIn" class="padding-top:20px">Sign In</h3>
                                     hide="#signin-eye-slash"
                                     toggle="code-height"
                                     toggle-selector="#signin-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/eye-slash.svg"></i
+                                    ><i src="/assets/svg/eye-slash.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
                                     id="signin-code"
                                     show="#signin-code-slash"
                                     hide="#signin-code, #signin-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/code.svg"></i
+                                    ><i src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
@@ -321,7 +303,7 @@ <h3 id="signIn" class="padding-top:20px">Sign In</h3>
                                     show="#signin-code, #signin-demo-code"
                                     hide="#signin-code-slash"
                                     ><i
-                                        class="display:flex height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
@@ -387,7 +369,7 @@ <h3 id="signOut" class="padding-top:20px">Sign Out</h3>
                                     toggle="code-height"
                                     toggle-selector="#signout-demo-code"
                                     ><i
-                                        class="height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/eye.svg"></i
                                 ></a>
                                 <a
@@ -398,18 +380,14 @@ <h3 id="signOut" class="padding-top:20px">Sign Out</h3>
                                     hide="#signout-eye-slash"
                                     toggle="code-height"
                                     toggle-selector="#signout-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/eye-slash.svg"></i
+                                    ><i src="/assets/svg/eye-slash.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
                                     id="signout-code"
                                     show="#signout-code-slash"
                                     hide="#signout-code, #signout-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/code.svg"></i
+                                    ><i src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
@@ -418,7 +396,7 @@ <h3 id="signOut" class="padding-top:20px">Sign Out</h3>
                                     show="#signout-code, #signout-demo-code"
                                     hide="#signout-code-slash"
                                     ><i
-                                        class="display:flex height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
@@ -487,7 +465,7 @@ <h3 id="permissions" class="padding-top:20px">
                                     toggle="code-height"
                                     toggle-selector="#permissions-demo-code"
                                     ><i
-                                        class="height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/eye.svg"></i
                                 ></a>
                                 <a
@@ -498,18 +476,14 @@ <h3 id="permissions" class="padding-top:20px">
                                     hide="#permissions-eye-slash"
                                     toggle="code-height"
                                     toggle-selector="#permissions-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/eye-slash.svg"></i
+                                    ><i src="/assets/svg/eye-slash.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
                                     id="permissions-code"
                                     show="#permissions-code-slash"
                                     hide="#permissions-code, #permissions-demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/code.svg"></i
+                                    ><i src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
@@ -518,7 +492,7 @@ <h3 id="permissions" class="padding-top:20px">
                                     show="#permissions-code, #permissions-demo-code"
                                     hide="#permissions-code-slash"
                                     ><i
-                                        class="display:flex height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a