diff --git a/docs/form.html b/docs/form.html
index c79170c..c739c58 100644
--- a/docs/form.html
+++ b/docs/form.html
@@ -32,13 +32,13 @@ <h2>CoCreate-api form</h2>
 					<div class="display:flex align-items:center transition:0.3s padding-left:10px" share-network="true" share-text="An api helper component in vanilla javascript to setup thirdparty api intergrations. Apis can be accessible using HTML5 attributes and/or JavaScript API"
 					 share-title="CoCreate API form" share-height="600" share-width="700" share-media="https://cdn.cocreate.app/docs/api.png" hover="display:block!important" hover-selector=".social-networks">
 						<div class="display:none social-networks">
-							<a class="margin-right:15px" share-network="twitter" title="Share on twitter"><i class="height:20px fill:#505050" 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></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></a>
+							<a class="margin-right:15px" share-network="twitter" title="Share on twitter"><i  src="/assets/svg/twitter.svg"></i></a>
+							<a class="margin-right:15px" share-network="facebook" title="Share on Facebook"><i  src="/assets/svg/facebook.svg"></i></a>
+							<a class="margin-right:15px" share-network="instagram" title="Share on instagram"><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></a>
+						<a class="margin-right:15px" share-network="share" title="Share on share"><i  src="/assets/svg/share-alt.svg"></i></a>
 					</div>
-					<a href="https://github.com/CoCreate-app/CoCreate-dnd" target="_blank" class=""><i class="height:20px fill:#505050" src="/assets/svg/github.svg"></i></a>
+					<a href="https://github.com/CoCreate-app/CoCreate-dnd" target="_blank" class=""><i  src="/assets/svg/github.svg"></i></a>
 				</div>
 			</div>
 			<h1 class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">CoCreate-api is a simple api helper component in vanilla javascript used by JavaScript developers to create thirdparty api intergrations. Thirdparty apis can be accessible using HTML5 attributes and/or JavaScript API. CoCreate-api includes the
@@ -50,7 +50,7 @@ <h1 class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-
 					<div id="api-install" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-selector="#api-install-section">
 						<span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-selector="[href='#api-install']">
 		                            <h2 class="padding:5px_0px">Install</h2>
-		                            <a class="margin-left:10px display:none" href="#api-install"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
+		                            <a class="margin-left:10px display:none" href="#api-install"><i  src="/assets/svg/link.svg"></i></a>
 		                        </span>
 					</div>
 	
@@ -62,13 +62,13 @@ <h2 class="padding:5px_0px">Install</h2>
 	
 					<div>
 						<h2 id="api-server-run" hover="display:block" hover-selector="" class="border-bottom:1px_solid_lightgrey padding:5px_0px">Server run</h2>
-						<a class="display:none" href="#api-server-run"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
+						<a class="display:none" href="#api-server-run"><i  src="/assets/svg/link.svg"></i></a>
 					</div>
 					<pre><code class="language-javascript">npm run start</code></pre>
 	
 					<div>
 						<h2 id="api-dependencies" hover="display:block" hover-selector="" class="border-bottom:1px_solid_lightgrey margin-top:80px padding:5px_0px">Dependencies components</h2>
-						<a class="display:none" href="#api-dependencies"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
+						<a class="display:none" href="#api-dependencies"><i  src="/assets/svg/link.svg"></i></a>
 					</div>
 					<p class="padding:10px_0px line-height:1.5">
 						<strong>CoCreate.js</strong>,
@@ -78,7 +78,7 @@ <h2 id="api-dependencies" hover="display:block" hover-selector="" class="border-
 	
 					<div>
 						<h2 id="api-development" hover="display:block" hover-selector="" class="border-bottom:1px_solid_lightgrey margin-top:80px padding:5px_0px">Development Guide</h2>
-						<a class="display:none" href="#api-development"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
+						<a class="display:none" href="#api-development"><i  src="/assets/svg/link.svg"></i></a>
 					</div>
 	
 					<h3 class="margin-top:20px padding:5px_0px">1. Directory structure</h3>
@@ -171,7 +171,7 @@ <h4><span></span><span class="cocreate-badge success"></span></h4>
 					<div id="api-demo" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-selector="#api-demo-section">
 						<span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-selector="[href='#api-demo']">
 		                            <h2 class="padding:5px_0px">Demo</h2>
-		                            <a class="margin-left:10px display:none" href="#api-demo"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
+		                            <a class="margin-left:10px display:none" href="#api-demo"><i  src="/assets/svg/link.svg"></i></a>
 		                        </span>
 					</div>
 	
@@ -189,10 +189,10 @@ <h2 class="padding:5px_0px">Demo</h2>
                             </div>
                             
                             <div class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
-                                <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-selector="#demo-code"><i class="height:18px fill:#505050" src="/assets/svg/eye.svg"></i></a>
-                                <a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-selector="#demo-code"><i class="height:20px fill:#505050" src="/assets/svg/eye-slash.svg"></i></a>
-                                <a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code"><i class="height:20px fill:#505050" src="/assets/svg/code.svg"></i></a>
-                                <a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash"><i class="display:flex height:18px fill:#505050" src="/assets/svg/code.svg"></i></a>
+                                <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-selector="#demo-code"><i class="height:18px" src="/assets/svg/eye.svg"></i></a>
+                                <a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-selector="#demo-code"><i  src="/assets/svg/eye-slash.svg"></i></a>
+                                <a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code"><i  src="/assets/svg/code.svg"></i></a>
+                                <a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash"><i class="height:18px" src="/assets/svg/code.svg"></i></a>
                                 <a class="margin-right:5px" fullscreen fullscreen-selector="#playground"></a>
                             </div>
         
@@ -202,7 +202,7 @@ <h2 class="padding:5px_0px">Demo</h2>
 				</div>
 			</div>
 			<button href="https://github.com/CoCreate-app/CoCreate-api/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..." target="_blank" class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue color:#fff font-size:1.5rem grow-hover border-radius:50% border-width:0 box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
-				<i class="height:20px fill:#505050" src="/assets/svg/pencil-alt.svg"></i>
+				<i  src="/assets/svg/pencil-alt.svg"></i>
 			</button>
 		</main>
 		
diff --git a/docs/index.html b/docs/index.html
index 76dd8c5..f27e09c 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -33,13 +33,13 @@ <h2>CoCreate-api</h2>
 					<div class="display:flex align-items:center transition:0.3s padding-left:10px" share-network="true" share-text="Enter decription here" share-title="testing im a title" share-height="600" share-width="700" share-media="https://cdn.cocreate.app/docs/api.png"
 					 hover="display:block!important" hover-selector=".social-networks">
 						<div class="display:none social-networks">
-							<a class="margin-right:15px" share-network="twitter" title="Share on twitter"><i class="height:20px fill:#505050" 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></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></a>
+							<a class="margin-right:15px" share-network="twitter" title="Share on twitter"><i  src="/assets/svg/twitter.svg"></i></a>
+							<a class="margin-right:15px" share-network="facebook" title="Share on Facebook"><i  src="/assets/svg/facebook.svg"></i></a>
+							<a class="margin-right:15px" share-network="instagram" title="Share on instagram"><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></a>
+						<a class="margin-right:15px" share-network="share" title="Share on share"><i  src="/assets/svg/share-alt.svg"></i></a>
 					</div>
-					<a href="https://github.com/CoCreate-app/CoCreate-dnd" target="_blank" class=""><i class="height:20px fill:#505050" src="/assets/svg/github.svg"></i></a>
+					<a href="https://github.com/CoCreate-app/CoCreate-dnd" target="_blank" class=""><i  src="/assets/svg/github.svg"></i></a>
 				</div>
 			</div>
 			<h1 class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">CoCreate-api is a simple api helper component in vanilla javascript used by JavaScript developers to create thirdparty api intergrations. Thirdparty apis can be accessible using HTML5 attributes and/or JavaScript API. CoCreate-api includes the
@@ -50,7 +50,7 @@ <h1 class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-
 						<div id="api-install" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-selector="#api-install-section">
 							<span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-selector="[href='#api-install']">
 	                            <h2 class="padding:5px_0px">Install</h2>
-	                            <a class="margin-left:10px display:none" href="#api-install"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
+	                            <a class="margin-left:10px display:none" href="#api-install"><i  src="/assets/svg/link.svg"></i></a>
 	                        </span>
 						</div>
 
@@ -60,7 +60,7 @@ <h2 class="padding:5px_0px">Install</h2>
 
 						<div>
 							<h2 id="api-dependencies" hover="display:block" hover-selector="" class="border-bottom:1px_solid_lightgrey margin-top:80px padding:5px_0px">Dependencies components</h2>
-							<a class="display:none" href="#api-dependencies"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
+							<a class="display:none" href="#api-dependencies"><i  src="/assets/svg/link.svg"></i></a>
 						</div>
 
 						<p class="padding:10px_0px line-height:1.5">
@@ -73,7 +73,7 @@ <h2 id="api-dependencies" hover="display:block" hover-selector="" class="border-
 						<div id="api-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-selector="#api-usage-section">
 							<span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-selector="[href='#api-usage']">
 	                        <h2 class="padding:5px_0px">Usage</h2>
-	                        <a class="margin-left:10px display:none" href="#api-usage"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
+	                        <a class="margin-left:10px display:none" href="#api-usage"><i  src="/assets/svg/link.svg"></i></a>
 	                    </span>
 						</div>
 
@@ -86,7 +86,7 @@ <h4 class="margin-top:20px padding:5px_0px">Install package</h4>
 
 						<div>
 							<h2 id="api-server-run" hover="display:block" hover-selector="" class="border-bottom:1px_solid_lightgrey padding:5px_0px">Server run</h2>
-							<a class="display:none" href="#api-server-run"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
+							<a class="display:none" href="#api-server-run"><i  src="/assets/svg/link.svg"></i></a>
 						</div>
 
 						<p class="padding:10px_0px line-height:1.5">
@@ -103,7 +103,7 @@ <h4 class="margin-top:20px padding:5px_0px">Client side</h4>
 
 						<div>
 							<h2 id="api-functions" hover="display:block" hover-selector="" class="border-bottom:1px_solid_lightgrey padding:5px_0px">CoCreate-api functions</h2>
-							<a class="display:none" href="#api-functions"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
+							<a class="display:none" href="#api-functions"><i  src="/assets/svg/link.svg"></i></a>
 						</div>
 
 						<ul class="list-style-type:none ">
@@ -192,7 +192,7 @@ <h4><span></span><span class="cocreate-badge success"></span></h4>
 						<div id="api-demo" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-selector="#api-demo-section">
 							<span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-selector="[href='#api-demo']">
 		                        <h2 class="padding:5px_0px">Demo</h2>
-		                        <a class="margin-left:10px display:none" href="#api-demo"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
+		                        <a class="margin-left:10px display:none" href="#api-demo"><i  src="/assets/svg/link.svg"></i></a>
 	                    	</span>
 						</div>
 						<div class="position:sticky top:0 padding:15px_0px height:100vh">
@@ -209,10 +209,10 @@ <h2 class="padding:5px_0px">Demo</h2>
                             </div>
                             
                             <div class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
-                                <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-selector="#demo-code"><i class="height:18px fill:#505050" src="/assets/svg/eye.svg"></i></a>
-                                <a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-selector="#demo-code"><i class="height:20px fill:#505050" src="/assets/svg/eye-slash.svg"></i></a>
-                                <a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code"><i class="height:20px fill:#505050" src="/assets/svg/code.svg"></i></a>
-                                <a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash"><i class="display:flex height:18px fill:#505050" src="/assets/svg/code.svg"></i></a>
+                                <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-selector="#demo-code"><i class="height:18px" src="/assets/svg/eye.svg"></i></a>
+                                <a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-selector="#demo-code"><i  src="/assets/svg/eye-slash.svg"></i></a>
+                                <a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code"><i  src="/assets/svg/code.svg"></i></a>
+                                <a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash"><i class="height:18px" src="/assets/svg/code.svg"></i></a>
                                 <a class="margin-right:5px" fullscreen fullscreen-selector="#playground"></a>
                             </div>
         
@@ -223,7 +223,7 @@ <h2 class="padding:5px_0px">Demo</h2>
 				</div>
 			
 				<button href="https://github.com/CoCreate-app/CoCreate-api/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..." target="_blank" class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue color:#fff font-size:1.5rem grow-hover border-radius:50% border-width:0 box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
-			        <i class="height:20px fill:#505050" src="/assets/svg/pencil-alt.svg"></i>
+			        <i  src="/assets/svg/pencil-alt.svg"></i>
 		        </button>
 		</main>
 		<script src="https://CoCreate.app/dist/CoCreate.js"></script>
diff --git a/docs/module.html b/docs/module.html
index 2a52eec..289a9d7 100644
--- a/docs/module.html
+++ b/docs/module.html
@@ -30,7 +30,7 @@
 			<div class="display:flex align-items:center">
 				<h2>CoCreate-api modules</h2>
 			</div>
-			<a href="https://github.com/CoCreate-app/CoCreate-dnd" target="_blank" class=""><i class="height:20px fill:#505050" src="/assets/svg/github.svg"></i></a>
+			<a href="https://github.com/CoCreate-app/CoCreate-dnd" target="_blank" class=""><i  src="/assets/svg/github.svg"></i></a>
 		</div>
 
         <h1 class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">CoCreate-api is a simple api helper component in vanilla javascript used by JavaScript developers to create thirdparty api intergrations. Thirdparty apis can be accessible using HTML5 attributes and/or JavaScript API. CoCreate-api includes the
@@ -41,7 +41,7 @@ <h1 class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-
 				<div id="api-install" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-selector="#api-install-section">
 					<span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-selector="[href='#api-install']">
 	                            <h2 class="padding:5px_0px">Install</h2>
-	                            <a class="margin-left:10px display:none" href="#api-install"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
+	                            <a class="margin-left:10px display:none" href="#api-install"><i  src="/assets/svg/link.svg"></i></a>
 	                        </span>
 				</div>
 
@@ -53,7 +53,7 @@ <h2 class="padding:5px_0px">Install</h2>
 
 				<div>
 					<h2 id="api-dependencies" hover="display:block" hover-selector="" class="border-bottom:1px_solid_lightgrey margin-top:80px padding:5px_0px">Dependencies components</h2>
-					<a class="display:none" href="#api-dependencies"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
+					<a class="display:none" href="#api-dependencies"><i  src="/assets/svg/link.svg"></i></a>
 				</div>
 				<p class="padding:10px_0px line-height:1.5">
 					<strong>CoCreate.js</strong>,
@@ -63,7 +63,7 @@ <h2 id="api-dependencies" hover="display:block" hover-selector="" class="border-
 
 				<div>
 					<h2 id="api-development" hover="display:block" hover-selector="" class="border-bottom:1px_solid_lightgrey margin-top:80px padding:5px_0px">Development Guide</h2>
-					<a class="display:none" href="#api-development"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
+					<a class="display:none" href="#api-development"><i  src="/assets/svg/link.svg"></i></a>
 				</div>
 
 				<h3 class="margin-top:20px padding:5px_0px">1. Rules</h3>
@@ -162,7 +162,7 @@ <h4><span></span><span class="cocreate-badge success"></span></h4>
 				<div id="api-demo" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-selector="#api-demo-section">
 					<span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-selector="[href='#api-demo']">
 	                            <h2 class="padding:5px_0px">Demo</h2>
-	                            <a class="margin-left:10px display:none" href="#api-demo"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
+	                            <a class="margin-left:10px display:none" href="#api-demo"><i  src="/assets/svg/link.svg"></i></a>
 	                        </span>
 				</div>
 
@@ -181,10 +181,10 @@ <h2 class="padding:5px_0px">Demo</h2>
                             </div>
                             
                             <div class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
-                                <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-selector="#demo-code"><i class="height:18px fill:#505050" src="/assets/svg/eye.svg"></i></a>
-                                <a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-selector="#demo-code"><i class="height:20px fill:#505050" src="/assets/svg/eye-slash.svg"></i></a>
-                                <a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code"><i class="height:20px fill:#505050" src="/assets/svg/code.svg"></i></a>
-                                <a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash"><i class="display:flex height:18px fill:#505050" src="/assets/svg/code.svg"></i></a>
+                                <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-selector="#demo-code"><i class="height:18px" src="/assets/svg/eye.svg"></i></a>
+                                <a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-selector="#demo-code"><i  src="/assets/svg/eye-slash.svg"></i></a>
+                                <a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code"><i  src="/assets/svg/code.svg"></i></a>
+                                <a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash"><i class="height:18px" src="/assets/svg/code.svg"></i></a>
                                 <a class="margin-right:5px" fullscreen fullscreen-selector="#playground"></a>
                             </div>
         
@@ -194,7 +194,7 @@ <h2 class="padding:5px_0px">Demo</h2>
 			</div>
 		</div>
 		<button href="https://github.com/CoCreate-app/CoCreate-api/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..." target="_blank" class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue color:#fff font-size:1.5rem grow-hover border-radius:50% border-width:0 box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
-				<i class="height:20px fill:#505050" src="/assets/svg/pencil-alt.svg"></i>
+				<i  src="/assets/svg/pencil-alt.svg"></i>
 			</button>
 		</main>
 		
diff --git a/docs/server.html b/docs/server.html
index 64a5bd3..31219e9 100644
--- a/docs/server.html
+++ b/docs/server.html
@@ -32,13 +32,13 @@ <h2>CoCreate-api server</h2>
 				<div class="display:flex align-items:center transition:0.3s padding-left:10px" share-network="true" share-text="An api helper component in vanilla javascript to setup thirdparty api intergrations. Apis can be accessible using HTML5 attributes and/or JavaScript API"
 				 share-title="CoCreate API server" share-height="600" share-width="700" share-media="https://cdn.cocreate.app/docs/api.png" hover="display:block!important" hover-selector=".social-networks">
 					<div class="display:none social-networks">
-						<a class="margin-right:15px" share-network="twitter" title="Share on twitter"><i class="height:20px fill:#505050" 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></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></a>
+						<a class="margin-right:15px" share-network="twitter" title="Share on twitter"><i  src="/assets/svg/twitter.svg"></i></a>
+						<a class="margin-right:15px" share-network="facebook" title="Share on Facebook"><i  src="/assets/svg/facebook.svg"></i></a>
+						<a class="margin-right:15px" share-network="instagram" title="Share on instagram"><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></a>
+					<a class="margin-right:15px" share-network="share" title="Share on share"><i  src="/assets/svg/share-alt.svg"></i></a>
 				</div>
-				<a href="https://github.com/CoCreate-app/CoCreate-dnd" target="_blank" class=""><i class="height:20px fill:#505050" src="/assets/svg/github.svg"></i></a>
+				<a href="https://github.com/CoCreate-app/CoCreate-dnd" target="_blank" class=""><i  src="/assets/svg/github.svg"></i></a>
 			</div>
 		</div>
 		<h1 class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">CoCreate-api is a simple api helper component in vanilla javascript used by JavaScript developers to create thirdparty api intergrations. Thirdparty apis can be accessible using HTML5 attributes and/or JavaScript API. CoCreate-api includes the
@@ -48,7 +48,7 @@ <h1 class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-
 				<div id="api-install" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-selector="#api-install-section">
 					<span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-selector="[href='#api-install']">
 	                            <h2 class="padding:5px_0px">Install</h2>
-	                            <a class="margin-left:10px display:none" href="#api-install"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
+	                            <a class="margin-left:10px display:none" href="#api-install"><i  src="/assets/svg/link.svg"></i></a>
 	                        </span>
 				</div>
 				<p class="padding:10px_0px line-height:1.5">
@@ -59,13 +59,13 @@ <h2 class="padding:5px_0px">Install</h2>
 
 				<div>
 					<h2 id="api-server-run" hover="display:block" hover-selector="" class="border-bottom:1px_solid_lightgrey padding:5px_0px">Server run</h2>
-					<a class="display:none" href="#api-server-run"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
+					<a class="display:none" href="#api-server-run"><i  src="/assets/svg/link.svg"></i></a>
 				</div>
 				<pre><code class="language-javascript">npm run start</code></pre>
 
 				<div>
 					<h2 id="api-dependencies" hover="display:block" hover-selector="" class="border-bottom:1px_solid_lightgrey margin-top:80px padding:5px_0px">Dependencies components</h2>
-					<a class="display:none" href="#api-dependencies"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
+					<a class="display:none" href="#api-dependencies"><i  src="/assets/svg/link.svg"></i></a>
 				</div>
 				<p class="padding:10px_0px line-height:1.5">
 					<strong>CoCreate.js</strong>,
@@ -75,7 +75,7 @@ <h2 id="api-dependencies" hover="display:block" hover-selector="" class="border-
 
 				<div>
 					<h2 id="api-development" hover="display:block" hover-selector="" class="border-bottom:1px_solid_lightgrey margin-top:80px padding:5px_0px">Development Guide</h2>
-					<a class="display:none" href="#api-development"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
+					<a class="display:none" href="#api-development"><i  src="/assets/svg/link.svg"></i></a>
 				</div>
 
 				<h3 class="margin-top:20px padding:5px_0px">1. Directory structure</h3>
@@ -172,7 +172,7 @@ <h4><span></span><span class="cocreate-badge success"></span></h4>
 				<div id="api-demo" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-selector="#api-demo-section">
 					<span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-selector="[href='#api-demo']">
 	                            <h2 class="padding:5px_0px">Demo</h2>
-	                            <a class="margin-left:10px display:none" href="#api-demo"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
+	                            <a class="margin-left:10px display:none" href="#api-demo"><i  src="/assets/svg/link.svg"></i></a>
 	                        </span>
 				</div>
 
@@ -190,10 +190,10 @@ <h2 class="padding:5px_0px">Demo</h2>
                             </div>
                             
                             <div class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
-                                <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-selector="#demo-code"><i class="height:18px fill:#505050" src="/assets/svg/eye.svg"></i></a>
-                                <a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-selector="#demo-code"><i class="height:20px fill:#505050" src="/assets/svg/eye-slash.svg"></i></a>
-                                <a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code"><i class="height:20px fill:#505050" src="/assets/svg/code.svg"></i></a>
-                                <a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash"><i class="display:flex height:18px fill:#505050" src="/assets/svg/code.svg"></i></a>
+                                <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-selector="#demo-code"><i class="height:18px" src="/assets/svg/eye.svg"></i></a>
+                                <a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-selector="#demo-code"><i  src="/assets/svg/eye-slash.svg"></i></a>
+                                <a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code"><i  src="/assets/svg/code.svg"></i></a>
+                                <a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash"><i class="height:18px" src="/assets/svg/code.svg"></i></a>
                                 <a class="margin-right:5px" fullscreen fullscreen-selector="#playground"></a>
                             </div>
         
@@ -203,7 +203,7 @@ <h2 class="padding:5px_0px">Demo</h2>
 			</div>
 		</div>
 		<button href="https://github.com/CoCreate-app/CoCreate-api/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..." target="_blank" class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue color:#fff font-size:1.5rem grow-hover border-radius:50% border-width:0 box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
-				<i class="height:20px fill:#505050" src="/assets/svg/pencil-alt.svg"></i>
+				<i  src="/assets/svg/pencil-alt.svg"></i>
 			</button>
 		</main>