diff --git a/css/doc.css b/css/doc.css
index f284bc7..c1aecdf 100644
--- a/css/doc.css
+++ b/css/doc.css
@@ -2674,4 +2674,20 @@
     text-decoration:none;
     opacity:1
   }
-  
\ No newline at end of file
+  
+
+  .dropdown-menu-end[data-bs-popper] {
+      padding: 10px;
+      border: 0;
+      background: rgba(var(--bs-body-color-rgb), 0.075);
+  }
+
+   .dropdown-item:focus, .dropdown-item:hover {
+    border-radius: 6px;
+    background: none;
+  }
+
+  .dropdown-item.active, .dropdown-item:active {
+    background-color: #0000009c;
+    border-radius: 5px;
+  }
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 2aad7a8..c72212c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -362,3 +362,7 @@ a {
   opacity: 1;
   width: 11px;
 }
+
+a:hover{
+  text-decoration: none;
+}
\ No newline at end of file
diff --git a/doc.html b/doc.html
new file mode 100644
index 0000000..502a013
--- /dev/null
+++ b/doc.html
@@ -0,0 +1,388 @@
+<!DOCTYPE html>
+<html>
+  <head>
+  <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+  <meta charset="UTF-8">
+  <style>
+    html {
+      font-size: 100%;
+      -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+    }
+    a:focus {
+      outline: thin dotted #333;
+      outline: 5px auto -webkit-focus-ring-color;
+      outline-offset: -2px;
+    }
+    a:hover,
+    a:active {
+      outline: 0;
+    }
+    input {
+      margin: 0;
+      font-size: 100%;
+      vertical-align: middle;
+      overflow: visible;
+      line-height: normal;
+    }
+    input::-moz-focus-inner {
+      padding: 0;
+      border: 0;
+    }
+    body {
+      margin: 0;
+      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+      font-size: 14px;
+      line-height: 20px;
+      color: #333;
+      background-color: #fff;
+    }
+    a {
+      color: #08c;
+      text-decoration: none;
+    }
+    a:hover {
+      color: #000;
+      text-decoration: underline;
+    }
+    .row {
+      margin-left: -20px;
+      zoom: 1;
+    }
+    .row:before,
+    .row:after {
+      display: table;
+      content: "";
+      line-height: 0;
+    }
+    .row:after {
+      clear: both;
+    }
+    .span3 {
+      float: left;
+      min-height: 1px;
+      margin-left: 20px;
+      width: 220px;
+      margin-bottom: 15px;
+    }
+    .container {
+      width: 940px;
+      margin-right: auto;
+      margin-left: auto;
+      *zoom: 1;
+    }
+    .container:before,
+    .container:after {
+      display: table;
+      content: "";
+      line-height: 0;
+    }
+    .container:after {
+      clear: both;
+    }
+    small {
+      font-size: 85%;
+    }
+    h1 {
+      margin: 10px 0;
+      font-family: inherit;
+      font-weight: bold;
+      line-height: 20px;
+      color: inherit;
+      text-rendering: optimizelegibility;
+      line-height: 40px;
+      font-size: 38.5px;
+    }
+    h1 small {
+      font-weight: normal;
+      line-height: 1;
+      color: #999;
+      font-size: 24.5px;
+    }
+
+    .header {
+      
+      background-color: #fff;
+      border-bottom: 1px solid #ddd;
+      padding-top: 10px;
+      z-index: 10;
+    }
+    .footer {
+      color: #ddd;
+      font-size: 12px;
+      text-align: center;
+      margin-top: 20px;
+    }
+    .footer a {
+      color: #ccc;
+      text-decoration: underline;
+    }
+    .the-icons {
+      font-size: 14px;
+      line-height: 24px;
+    }
+    .switch {
+      color: #666;
+    }
+    .switch input {
+      margin-right: 0.3em;
+    }
+    .codesOn .i-name {
+      display: none;
+    }
+    .codesOn .i-code {
+      display: inline;
+    }
+    .i-code {
+      display: none;
+    }
+    @font-face {
+      font-family: 'adibaIcon';
+      src: url('./font/adibaIcon.eot?46132523');
+      src: url('./font/adibaIcon.eot?46132523#iefix') format('embedded-opentype'),
+           url('./font/adibaIcon.woff?46132523') format('woff'),
+           url('./font/adibaIcon.ttf?46132523') format('truetype'),
+           url('./font/adibaIcon.svg?46132523#adibaIcon') format('svg');
+      font-weight: normal;
+      font-style: normal;
+    }
+    .adiba-icon {
+      font-family: "adibaIcon";
+      font-style: normal;
+      font-weight: normal;
+      speak: never;
+     
+      display: inline-block;
+      text-decoration: inherit;
+      width: 1em;
+      margin-right: .2em;
+      text-align: center;
+      /* opacity: .8; */
+     
+      /* For safety - reset parent styles, that can break glyph codes*/
+      font-variant: normal;
+      text-transform: none;
+     
+      /* fix buttons height, for twitter bootstrap */
+      line-height: 1em;
+     
+      /* Animation center compensation - margins should be symmetric */
+      /* remove if not needed */
+      margin-left: .2em;
+     
+      /* You can be more comfortable with increased icons size */
+      /* font-size: 120%; */
+     
+      /* Font smoothing. That was taken from TWBS */
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+     
+      /* Uncomment for 3D effect */
+      /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+    }
+    </style>
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="css/animation.css">
+    <link rel="stylesheet" href="css/doc.css">
+    <link rel="stylesheet" href="css/style.css">
+    <script>
+      function toggleCodes(on) {
+        var obj = document.getElementById('icons');
+      
+        if (on) {
+          obj.className += ' codesOn';
+        } else {
+          obj.className = obj.className.replace(' codesOn', '');
+        }
+      }
+    </script>
+  </head>
+
+
+  <body class="bd-masthead">
+
+    <header>
+      <div class="header-area">
+          <div class="main-header">
+              <div class="container">
+                  <div class="row align-items-center">
+                      <!-- Logo -->
+                      <div class="col-xl-5 col-lg-5">
+                        <a href="index.html">
+                          <h1>adibaIcon </h1>
+                        </a>
+
+                      </div>
+                      <div class="col-xl-7 col-lg-7">
+                          <div class="menu-wrapper  d-flex align-items-center justify-content-end">
+                              <!-- Main-menu -->
+                              <div class="main-menu d-none d-lg-block">
+                                  <nav>
+                                      <ul class="listing" id="navigation">
+
+                                          <li class="single-list nav-item dropdown">
+                                            <button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle show" data-bs-toggle="dropdown" aria-expanded="true" data-bs-display="static">
+                                              <span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap&nbsp;</span> v2.1 <span class="visually-hidden">(switch to other versions)</span>
+                                            </button>
+
+                                            <!-- Dropdown -->
+                                            <ul class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
+                                                <li>
+                                                  <a class="dropdown-item d-flex align-items-center justify-content-between active" aria-current="true" href="/">
+                                                    Latest (2.1.x)
+                                                    <svg class="bi"><use xlink:href="#check2"></use></svg>
+                                                  </a>
+                                                </li>
+                                                <li>
+                                                    <a class="dropdown-item" href="#">v2.1.1</a>
+                                                </li>
+                                                <li>
+                                                    <a class="dropdown-item" href="#">v2.0.0</a>
+                                                </li>
+                                                <li><hr class="dropdown-divider"></li>
+                                                <li><h6 class="dropdown-header">Previous releases</h6></li>
+                                                <li><a class="dropdown-item" href="#">v1.0.0</a></li>
+                                                <li><a class="dropdown-item" href="#">v1.0.1</a></li>
+                                                <li><a class="dropdown-item" href="#">v1.0.2</a></li>
+                                                <li><hr class="dropdown-divider"></li>
+                                                <li><a class="dropdown-item" href="#">All versions</a></li>
+                                            </ul>
+                                          </li>
+                                          
+                                          <li class="single-list"><a href="icons.html" target="_blank" class="single">icons</a></li>
+                                          <li class="single-list"><a href="doc.html" target="_blank" class="single">Doc</a></li>
+                                          <li class="single-list"><a href="https://github.com/jmrashed/adibaicon" target="_blank" class="single">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"></path></svg>
+                                          </a></li>
+                                      </ul>
+                                  </nav>
+                              </div>
+                          </div>
+                      </div> 
+                      <!-- Mobile Menu -->
+                      <div class="col-12">
+                          <div class="mobile_menu d-block d-lg-none"></div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+  </header>
+
+  <main>
+    <div class="container">
+      <div class="row">
+        <div class="container py-100" id="icons">
+          <section class="row g-md-5 pt-4 mt-4 pb-md-5 mb-5 align-items-center">
+
+  
+            <div class="row gx-md-5">
+              <div class="col-lg-6 mb-3">
+                <h3 class="fw-semibold mb-2">Basic Usage</h3>
+                <p class="mb-0">Sets the icon color to primary <code> .icon-primary</code>  <code> .icon-secondary</code></p>
+                <p class="mb-0"> Increases the icon size to large <code> .icon-lg</code> <code> .icon-red</code></p>
+    
+    
+                <div class="bd-code-snippet mt-4">  <div class="bd-clipboard">    <button type="button" class="btn-clipboard">      <svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"></use></svg>    </button>  </div>
+                
+    <div class="highlight">
+    <pre tabindex="0" class="chroma m-0"><code class="language-scss" data-lang="scss">
+    <span class="line"><span class="cl"><span class="nc">CDN</span> </span></span><span class="line"><span class="cl"> <span class="n"> https://adibaicon.vercel.app/css/adibaIcon.css</span>
+    </span></span>
+    </code></pre>
+    
+    </div>
+        
+              </div>
+    
+             
+    
+              </div>
+
+            </div>
+          </section>
+        </div>
+      </div>
+
+
+      <div class="row">
+          
+          <img src="./img/v1/Screenshot from 2023-08-30 01-44-35.png">
+          
+          <img src="./img/v1/Screenshot from 2023-08-30 01-44-55.png">
+          
+          <h2 id="cdn">CDN</h2>
+          <ul>
+          <li>Use as cdn : <a
+          href="https://adibaicon.vercel.app/css/adibaIcon.css">https://adibaicon.vercel.app/css/adibaIcon.css</a></li>
+          </ul>
+          <h2 id="getting-started">Getting Started</h2>
+          <p>To use the icons from this library, follow these steps:</p>
+          <ol type="1">
+          <li>Include the font files in your project directory.</li>
+          <li>Link the generated CSS file in your HTML or import it in your
+          project's stylesheets.</li>
+          </ol>
+          <h2 id="usage">Usage</h2>
+          <h3 id="basic-usage">Basic Usage</h3>
+          <p>To add an icon to your HTML, use the following structure:</p>
+          <div class="sourceCode" id="cb1"><pre
+          class="sourceCode html"><code class="sourceCode html"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="kw">&lt;span</span> <span class="er">class</span><span class="ot">=</span><span class="st">&quot;adiba-icon icon-r icon-lg icon-red&quot;</span><span class="kw">&gt;&lt;/span&gt;</span></span></code></pre></div>
+          <p>img/Screenshot.png</p>
+          <h2 id="customization">Customization</h2>
+          <p>You can customize icons by using color and size classes:</p>
+          <ul>
+          <li><p><code>.icon-primary</code>: Sets the icon color to
+          primary.</p></li>
+          <li><p><code>.icon-secondary</code>: Sets the icon color to
+          secondary.</p></li>
+          <li><p><code>.icon-success</code>: Sets the icon color to
+          success.</p></li>
+          <li><p><code>.icon-lg</code>: Increases the icon size to large.</p></li>
+          <li><p><code>.icon-md</code>: Sets the icon size to medium.</p></li>
+          <li><p><code>.icon-sm</code>: Reduces the icon size to small.</p></li>
+          </ul>
+          <p>Combine color and size classes for complete customization:</p>
+          <div class="sourceCode" id="cb2"><pre
+          class="sourceCode html"><code class="sourceCode html"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="kw">&lt;span</span> <span class="er">class</span><span class="ot">=</span><span class="st">&quot;adiba-icon icon-r icon-lg icon-red&quot;</span><span class="kw">&gt;&lt;/span&gt;</span></span></code></pre></div>
+          <h2 id="available-icons">Available Icons</h2>
+          <p>A: <span class="adiba-icon icon-a icon-lg icon-red"></span> B:
+          <span class="adiba-icon icon-b icon-md icon-blue"></span> C:
+          <span class="adiba-icon icon-c icon-sm icon-orange"></span></p>
+          <h2 id="demo">Demo</h2>
+          <div class="sourceCode" id="cb3"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="kw">&lt;i</span> <span class="er">class</span><span class="ot">=</span><span class="st">&quot;adiba-icon icon-r icon-lg icon-red &quot;</span><span class="kw">&gt;&lt;/i&gt;</span></span>
+<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a><span class="kw">&lt;i</span> <span class="er">class</span><span class="ot">=</span><span class="st">&quot;adiba-icon icon-a icon-lg icon-blue &quot;</span><span class="kw">&gt;&lt;/i&gt;</span></span>
+<span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a><span class="kw">&lt;i</span> <span class="er">class</span><span class="ot">=</span><span class="st">&quot;adiba-icon icon-s icon-lg icon-yellow &quot;</span><span class="kw">&gt;&lt;/i&gt;</span></span>
+<span id="cb3-4"><a href="#cb3-4" aria-hidden="true" tabindex="-1"></a><span class="kw">&lt;i</span> <span class="er">class</span><span class="ot">=</span><span class="st">&quot;adiba-icon icon-h icon-lg icon-purple&quot;</span><span class="kw">&gt;&lt;/i&gt;</span></span>
+<span id="cb3-5"><a href="#cb3-5" aria-hidden="true" tabindex="-1"></a><span class="kw">&lt;i</span> <span class="er">class</span><span class="ot">=</span><span class="st">&quot;adiba-icon icon-e icon-lg icon-green&quot;</span><span class="kw">&gt;&lt;/i&gt;</span></span>
+<span id="cb3-6"><a href="#cb3-6" aria-hidden="true" tabindex="-1"></a><span class="kw">&lt;i</span> <span class="er">class</span><span class="ot">=</span><span class="st">&quot;adiba-icon icon-d icon-lg icon-orange&quot;</span><span class="kw">&gt;&lt;/i&gt;</span></span></code></pre></div>
+          <img src="./img/demo.png">
+          
+          <h1 id="contributing">Contributing</h1>
+          <p>If you'd like to contribute to the library by adding new icons or
+          improving existing ones, please follow our contribution guidelines.</p>
+      </div>
+
+
+    </div>
+  </main>
+
+
+
+
+
+    
+    <footer class="footer">
+      <div class="container">
+        <p style="color: #000;">&copy; Copyright by <a style="color: #000;" href="https://github.com/jmrashed">Md Rasheduzzaman</a> | 
+        <a style="color: #000;" href="README.html">Documentation</a>
+        
+        </p>
+      </div>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
+
+  </body>
+</html>
\ No newline at end of file
diff --git a/icons.html b/icons.html
index 5740352..15ccbb8 100644
--- a/icons.html
+++ b/icons.html
@@ -210,26 +210,56 @@
                       <!-- Logo -->
                       <div class="col-xl-5 col-lg-5">
                         <a href="index.html">
-                          <h1>adibaIcon <small>font demo</small></h1>
+                          <h1>adibaIcon </h1>
                         </a>
 
                       </div>
                       <div class="col-xl-7 col-lg-7">
-                        <div class="menu-wrapper  d-flex align-items-center justify-content-end">
-                            <!-- Main-menu -->
-                            <div class="main-menu d-none d-lg-block">
-                                <nav>
-                                    <ul class="listing" id="navigation">
-                                        <li class="single-list"><a href="icons.html" target="_blank" class="single">icons</a></li>
-                                        <li class="single-list"><a href="#" target="_blank" class="single">Doc</a></li>
-                                        <li class="single-list"><a href="https://github.com/jmrashed/adibaicon" target="_blank" class="single">
-                                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"></path></svg>
-                                        </a></li>
-                                    </ul>
-                                </nav>
-                            </div>
-                        </div>
-                    </div> 
+                          <div class="menu-wrapper  d-flex align-items-center justify-content-end">
+                              <!-- Main-menu -->
+                              <div class="main-menu d-none d-lg-block">
+                                  <nav>
+                                      <ul class="listing" id="navigation">
+
+                                          <li class="single-list nav-item dropdown">
+                                            <button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle show" data-bs-toggle="dropdown" aria-expanded="true" data-bs-display="static">
+                                              <span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap&nbsp;</span> v2.1 <span class="visually-hidden">(switch to other versions)</span>
+                                            </button>
+
+                                            <!-- Dropdown -->
+                                            <ul class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
+                                                <li>
+                                                  <a class="dropdown-item d-flex align-items-center justify-content-between active" aria-current="true" href="/">
+                                                    Latest (2.1.x)
+                                                    <svg class="bi"><use xlink:href="#check2"></use></svg>
+                                                  </a>
+                                                </li>
+                                                <li>
+                                                    <a class="dropdown-item" href="#">v2.1.1</a>
+                                                </li>
+                                                <li>
+                                                    <a class="dropdown-item" href="#">v2.0.0</a>
+                                                </li>
+                                                <li><hr class="dropdown-divider"></li>
+                                                <li><h6 class="dropdown-header">Previous releases</h6></li>
+                                                <li><a class="dropdown-item" href="#">v1.0.0</a></li>
+                                                <li><a class="dropdown-item" href="#">v1.0.1</a></li>
+                                                <li><a class="dropdown-item" href="#">v1.0.2</a></li>
+                                                <li><hr class="dropdown-divider"></li>
+                                                <li><a class="dropdown-item" href="#">All versions</a></li>
+                                            </ul>
+                                          </li>
+                                          
+                                          <li class="single-list"><a href="icons.html" target="_blank" class="single">icons</a></li>
+                                          <li class="single-list"><a href="doc.html" target="_blank" class="single">Doc</a></li>
+                                          <li class="single-list"><a href="https://github.com/jmrashed/adibaicon" target="_blank" class="single">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"></path></svg>
+                                          </a></li>
+                                      </ul>
+                                  </nav>
+                              </div>
+                          </div>
+                      </div> 
                       <!-- Mobile Menu -->
                       <div class="col-12">
                           <div class="mobile_menu d-block d-lg-none"></div>
@@ -238,305 +268,302 @@ <h1>adibaIcon <small>font demo</small></h1>
               </div>
           </div>
       </div>
-  </header>
-
-
-
-    <div class="container py-100" id="icons">
+    </header>
 
-      <div class="row">
+      
+      <div class="container py-100" id="icons">
+        <div class="row">
 
-        <div class="col-lg-12 mb-2">
-            <form action="javascript:void(0)" class="search-box style-five text-center">
-                <div class="input-form">
-                    <input type="text" name="search" placeholder="Search">
-                </div>	
-            </form>
-        </div>
+          <div class="col-lg-12 mb-2">
+              <form action="javascript:void(0)" class="search-box style-five text-center">
+                  <div class="input-form">
+                      <input type="text" name="search" placeholder="Search">
+                  </div>	
+              </form>
+          </div>
 
-          <div class="check-wrap style-eight mb-4">
-            <input id="16" type="checkbox" onclick="toggleCodes(this.checked)" />
-            <label for="16">show codes</label>
-        </div>
+            <div class="check-wrap style-eight mb-4">
+              <input id="16" type="checkbox" onclick="toggleCodes(this.checked)" />
+              <label for="16">show codes</label>
+          </div>
 
-          <div class="col-lg-3">
-              <div class="span3" title="Code: 0xe800">
-                <i class="adiba-icon icon-style1-a">&#xe800;</i> <span class="i-name">icon-style1-a</span><span class="i-code">0xe800</span>
+            <div class="col-lg-3">
+                <div class="span3" title="Code: 0xe800">
+                  <i class="adiba-icon icon-style1-a">&#xe800;</i> <span class="i-name">icon-style1-a</span><span class="i-code">0xe800</span>
+                </div>
+                <div class="span3" title="Code: 0xe801">
+                  <i class="adiba-icon icon-style1-b">&#xe801;</i> <span class="i-name">icon-style1-b</span><span class="i-code">0xe801</span>
+                </div>
+                <div class="span3" title="Code: 0xe802">
+                  <i class="adiba-icon icon-style1-c">&#xe802;</i> <span class="i-name">icon-style1-c</span><span class="i-code">0xe802</span>
+                </div>
+                <div class="span3" title="Code: 0xe803">
+                  <i class="adiba-icon icon-style1-d">&#xe803;</i> <span class="i-name">icon-style1-d</span><span class="i-code">0xe803</span>
+                </div>
+            </div>
+            <div class="col-lg-3">
+              <div class="span3" title="Code: 0xe804">
+                <i class="adiba-icon icon-style1-e">&#xe804;</i> <span class="i-name">icon-style1-e</span><span class="i-code">0xe804</span>
               </div>
-              <div class="span3" title="Code: 0xe801">
-                <i class="adiba-icon icon-style1-b">&#xe801;</i> <span class="i-name">icon-style1-b</span><span class="i-code">0xe801</span>
+              <div class="span3" title="Code: 0xe805">
+                <i class="adiba-icon icon-style1-f">&#xe805;</i> <span class="i-name">icon-style1-f</span><span class="i-code">0xe805</span>
               </div>
-              <div class="span3" title="Code: 0xe802">
-                <i class="adiba-icon icon-style1-c">&#xe802;</i> <span class="i-name">icon-style1-c</span><span class="i-code">0xe802</span>
+              <div class="span3" title="Code: 0xe806">
+                <i class="adiba-icon icon-style1-g">&#xe806;</i> <span class="i-name">icon-style1-g</span><span class="i-code">0xe806</span>
               </div>
-              <div class="span3" title="Code: 0xe803">
-                <i class="adiba-icon icon-style1-d">&#xe803;</i> <span class="i-name">icon-style1-d</span><span class="i-code">0xe803</span>
+              <div class="span3" title="Code: 0xe807">
+                <i class="adiba-icon icon-style1-h">&#xe807;</i> <span class="i-name">icon-style1-h</span><span class="i-code">0xe807</span>
               </div>
-          </div>
-          <div class="col-lg-3">
-            <div class="span3" title="Code: 0xe804">
-              <i class="adiba-icon icon-style1-e">&#xe804;</i> <span class="i-name">icon-style1-e</span><span class="i-code">0xe804</span>
-            </div>
-            <div class="span3" title="Code: 0xe805">
-              <i class="adiba-icon icon-style1-f">&#xe805;</i> <span class="i-name">icon-style1-f</span><span class="i-code">0xe805</span>
-            </div>
-            <div class="span3" title="Code: 0xe806">
-              <i class="adiba-icon icon-style1-g">&#xe806;</i> <span class="i-name">icon-style1-g</span><span class="i-code">0xe806</span>
-            </div>
-            <div class="span3" title="Code: 0xe807">
-              <i class="adiba-icon icon-style1-h">&#xe807;</i> <span class="i-name">icon-style1-h</span><span class="i-code">0xe807</span>
-            </div>
-          </div>
-          <div class="col-lg-3">
-            <div class="span3" title="Code: 0xe808">
-              <i class="adiba-icon icon-style1-i">&#xe808;</i> <span class="i-name">icon-style1-i</span><span class="i-code">0xe808</span>
-            </div>
-            <div class="span3" title="Code: 0xe809">
-              <i class="adiba-icon icon-style1-j">&#xe809;</i> <span class="i-name">icon-style1-j</span><span class="i-code">0xe809</span>
-            </div>
-            <div class="span3" title="Code: 0xe80a">
-              <i class="adiba-icon icon-style1-k">&#xe80a;</i> <span class="i-name">icon-style1-k</span><span class="i-code">0xe80a</span>
-            </div>
-            <div class="span3" title="Code: 0xe80b">
-              <i class="adiba-icon icon-style1-l">&#xe80b;</i> <span class="i-name">icon-style1-l</span><span class="i-code">0xe80b</span>
-            </div>
-          </div>
-          <div class="col-lg-3">
-            <div class="span3" title="Code: 0xe80c">
-              <i class="adiba-icon icon-style1-m">&#xe80c;</i> <span class="i-name">icon-style1-m</span><span class="i-code">0xe80c</span>
-            </div>
-            <div class="span3" title="Code: 0xe80d">
-              <i class="adiba-icon icon-style1-n">&#xe80d;</i> <span class="i-name">icon-style1-n</span><span class="i-code">0xe80d</span>
-            </div>
-            <div class="span3" title="Code: 0xe80e">
-              <i class="adiba-icon icon-style1-o">&#xe80e;</i> <span class="i-name">icon-style1-o</span><span class="i-code">0xe80e</span>
-            </div>
-            <div class="span3" title="Code: 0xe80f">
-              <i class="adiba-icon icon-style1-p">&#xe80f;</i> <span class="i-name">icon-style1-p</span><span class="i-code">0xe80f</span>
-            </div>
-          </div>
-          <div class="col-lg-3">
-            <div class="span3" title="Code: 0xe810">
-              <i class="adiba-icon icon-style1-q">&#xe810;</i> <span class="i-name">icon-style1-q</span><span class="i-code">0xe810</span>
-            </div>
-            <div class="span3" title="Code: 0xe811">
-              <i class="adiba-icon icon-style1-r">&#xe811;</i> <span class="i-name">icon-style1-r</span><span class="i-code">0xe811</span>
-            </div>
-            <div class="span3" title="Code: 0xe812">
-              <i class="adiba-icon icon-style1-s">&#xe812;</i> <span class="i-name">icon-style1-s</span><span class="i-code">0xe812</span>
-            </div>
-            <div class="span3" title="Code: 0xe813">
-              <i class="adiba-icon icon-style1-t">&#xe813;</i> <span class="i-name">icon-style1-t</span><span class="i-code">0xe813</span>
-            </div>
-          </div>
-          <div class="col-lg-3">
-            <div class="span3" title="Code: 0xe814">
-              <i class="adiba-icon icon-style1-u">&#xe814;</i> <span class="i-name">icon-style1-u</span><span class="i-code">0xe814</span>
-            </div>
-            <div class="span3" title="Code: 0xe815">
-              <i class="adiba-icon icon-style1-v">&#xe815;</i> <span class="i-name">icon-style1-v</span><span class="i-code">0xe815</span>
-            </div>
-            <div class="span3" title="Code: 0xe816">
-              <i class="adiba-icon icon-style1-w">&#xe816;</i> <span class="i-name">icon-style1-w</span><span class="i-code">0xe816</span>
-            </div>
-            <div class="span3" title="Code: 0xe817">
-              <i class="adiba-icon icon-style1-x">&#xe817;</i> <span class="i-name">icon-style1-x</span><span class="i-code">0xe817</span>
-            </div>
-          </div>
-          <div class="col-lg-3">
-            <div class="span3" title="Code: 0xe818">
-              <i class="adiba-icon icon-style1-y">&#xe818;</i> <span class="i-name">icon-style1-y</span><span class="i-code">0xe818</span>
-            </div>
-            <div class="span3" title="Code: 0xe819">
-              <i class="adiba-icon icon-style1-z">&#xe819;</i> <span class="i-name">icon-style1-z</span><span class="i-code">0xe819</span>
-            </div>
-            <div class="span3" title="Code: 0xe81a">
-              <i class="adiba-icon icon-style2-a">&#xe81a;</i> <span class="i-name">icon-style2-a</span><span class="i-code">0xe81a</span>
-            </div>
-            <div class="span3" title="Code: 0xe81b">
-              <i class="adiba-icon icon-style2-b">&#xe81b;</i> <span class="i-name">icon-style2-b</span><span class="i-code">0xe81b</span>
-            </div>
-          </div>
-          <div class="col-lg-3">
-            <div class="span3" title="Code: 0xe81c">
-              <i class="adiba-icon icon-style2-c">&#xe81c;</i> <span class="i-name">icon-style2-c</span><span class="i-code">0xe81c</span>
-            </div>
-            <div class="span3" title="Code: 0xe81d">
-              <i class="adiba-icon icon-style2-d">&#xe81d;</i> <span class="i-name">icon-style2-d</span><span class="i-code">0xe81d</span>
-            </div>
-            <div class="span3" title="Code: 0xe81e">
-              <i class="adiba-icon icon-style2-e">&#xe81e;</i> <span class="i-name">icon-style2-e</span><span class="i-code">0xe81e</span>
-            </div>
-            <div class="span3" title="Code: 0xe81f">
-              <i class="adiba-icon icon-style2-f">&#xe81f;</i> <span class="i-name">icon-style2-f</span><span class="i-code">0xe81f</span>
-            </div>
-          </div>
-          <div class="col-lg-3">
-            <div class="span3" title="Code: 0xe820">
-              <i class="adiba-icon icon-style2-g">&#xe820;</i> <span class="i-name">icon-style2-g</span><span class="i-code">0xe820</span>
-            </div>
-            <div class="span3" title="Code: 0xe821">
-              <i class="adiba-icon icon-style2-h">&#xe821;</i> <span class="i-name">icon-style2-h</span><span class="i-code">0xe821</span>
-            </div>
-            <div class="span3" title="Code: 0xe822">
-              <i class="adiba-icon icon-style2-i">&#xe822;</i> <span class="i-name">icon-style2-i</span><span class="i-code">0xe822</span>
-            </div>
-            <div class="span3" title="Code: 0xe823">
-              <i class="adiba-icon icon-style2-j">&#xe823;</i> <span class="i-name">icon-style2-j</span><span class="i-code">0xe823</span>
-            </div>
-          </div>
-          <div class="col-lg-3">
-            <div class="span3" title="Code: 0xe824">
-              <i class="adiba-icon icon-style2-k">&#xe824;</i> <span class="i-name">icon-style2-k</span><span class="i-code">0xe824</span>
-            </div>
-            <div class="span3" title="Code: 0xe825">
-              <i class="adiba-icon icon-style2-l">&#xe825;</i> <span class="i-name">icon-style2-l</span><span class="i-code">0xe825</span>
-            </div>
-            <div class="span3" title="Code: 0xe826">
-              <i class="adiba-icon icon-style2-m">&#xe826;</i> <span class="i-name">icon-style2-m</span><span class="i-code">0xe826</span>
-            </div>
-            <div class="span3" title="Code: 0xe827">
-              <i class="adiba-icon icon-style2-n">&#xe827;</i> <span class="i-name">icon-style2-n</span><span class="i-code">0xe827</span>
-            </div>
-          </div>
-          <div class="col-lg-3">
-            <div class="span3" title="Code: 0xe828">
-              <i class="adiba-icon icon-style2-o">&#xe828;</i> <span class="i-name">icon-style2-o</span><span class="i-code">0xe828</span>
-            </div>
-            <div class="span3" title="Code: 0xe829">
-              <i class="adiba-icon icon-style2-p">&#xe829;</i> <span class="i-name">icon-style2-p</span><span class="i-code">0xe829</span>
-            </div>
-            <div class="span3" title="Code: 0xe82a">
-              <i class="adiba-icon icon-style2-q">&#xe82a;</i> <span class="i-name">icon-style2-q</span><span class="i-code">0xe82a</span>
-            </div>
-            <div class="span3" title="Code: 0xe82b">
-              <i class="adiba-icon icon-style2-r">&#xe82b;</i> <span class="i-name">icon-style2-r</span><span class="i-code">0xe82b</span>
-            </div>
-          </div>
-          <div class="col-lg-3">
-            <div class="span3" title="Code: 0xe82c">
-              <i class="adiba-icon icon-style2-s">&#xe82c;</i> <span class="i-name">icon-style2-s</span><span class="i-code">0xe82c</span>
-            </div>
-            <div class="span3" title="Code: 0xe82d">
-              <i class="adiba-icon icon-style2-t">&#xe82d;</i> <span class="i-name">icon-style2-t</span><span class="i-code">0xe82d</span>
-            </div>
-            <div class="span3" title="Code: 0xe82e">
-              <i class="adiba-icon icon-style2-u">&#xe82e;</i> <span class="i-name">icon-style2-u</span><span class="i-code">0xe82e</span>
-            </div>
-            <div class="span3" title="Code: 0xe82f">
-              <i class="adiba-icon icon-style2-v">&#xe82f;</i> <span class="i-name">icon-style2-v</span><span class="i-code">0xe82f</span>
-            </div>
-          </div>
-          <div class="col-lg-3">
-            <div class="span3" title="Code: 0xe830">
-              <i class="adiba-icon icon-style2-w">&#xe830;</i> <span class="i-name">icon-style2-w</span><span class="i-code">0xe830</span>
-            </div>
-            <div class="span3" title="Code: 0xe831">
-              <i class="adiba-icon icon-style2-x">&#xe831;</i> <span class="i-name">icon-style2-x</span><span class="i-code">0xe831</span>
-            </div>
-            <div class="span3" title="Code: 0xe832">
-              <i class="adiba-icon icon-style2-y">&#xe832;</i> <span class="i-name">icon-style2-y</span><span class="i-code">0xe832</span>
-            </div>
-            <div class="span3" title="Code: 0xe833">
-              <i class="adiba-icon icon-style2-z">&#xe833;</i> <span class="i-name">icon-style2-z</span><span class="i-code">0xe833</span>
-            </div>
-          </div>
-          <div class="col-lg-3">
-            <div class="span3" title="Code: 0xe834">
-              <i class="adiba-icon icon-style3-a">&#xe834;</i> <span class="i-name">icon-style3-a</span><span class="i-code">0xe834</span>
-            </div>
-            <div class="span3" title="Code: 0xe835">
-              <i class="adiba-icon icon-style3-b">&#xe835;</i> <span class="i-name">icon-style3-b</span><span class="i-code">0xe835</span>
-            </div>
-            <div class="span3" title="Code: 0xe836">
-              <i class="adiba-icon icon-style3-c">&#xe836;</i> <span class="i-name">icon-style3-c</span><span class="i-code">0xe836</span>
-            </div>
-            <div class="span3" title="Code: 0xe837">
-              <i class="adiba-icon icon-style3-d">&#xe837;</i> <span class="i-name">icon-style3-d</span><span class="i-code">0xe837</span>
-            </div>
-          </div>
-          <div class="col-lg-3">
-            <div class="span3" title="Code: 0xe838">
-              <i class="adiba-icon icon-style3-e">&#xe838;</i> <span class="i-name">icon-style3-e</span><span class="i-code">0xe838</span>
-            </div>
-            <div class="span3" title="Code: 0xe839">
-              <i class="adiba-icon icon-style3-f">&#xe839;</i> <span class="i-name">icon-style3-f</span><span class="i-code">0xe839</span>
-            </div>
-            <div class="span3" title="Code: 0xe83a">
-              <i class="adiba-icon icon-style3-g">&#xe83a;</i> <span class="i-name">icon-style3-g</span><span class="i-code">0xe83a</span>
-            </div>
-            <div class="span3" title="Code: 0xe83b">
-              <i class="adiba-icon icon-style3-h">&#xe83b;</i> <span class="i-name">icon-style3-h</span><span class="i-code">0xe83b</span>
             </div>
-          </div>
-          <div class="col-lg-3">
-            <div class="span3" title="Code: 0xe83c">
-              <i class="adiba-icon icon-style3-i">&#xe83c;</i> <span class="i-name">icon-style3-i</span><span class="i-code">0xe83c</span>
+            <div class="col-lg-3">
+              <div class="span3" title="Code: 0xe808">
+                <i class="adiba-icon icon-style1-i">&#xe808;</i> <span class="i-name">icon-style1-i</span><span class="i-code">0xe808</span>
+              </div>
+              <div class="span3" title="Code: 0xe809">
+                <i class="adiba-icon icon-style1-j">&#xe809;</i> <span class="i-name">icon-style1-j</span><span class="i-code">0xe809</span>
+              </div>
+              <div class="span3" title="Code: 0xe80a">
+                <i class="adiba-icon icon-style1-k">&#xe80a;</i> <span class="i-name">icon-style1-k</span><span class="i-code">0xe80a</span>
+              </div>
+              <div class="span3" title="Code: 0xe80b">
+                <i class="adiba-icon icon-style1-l">&#xe80b;</i> <span class="i-name">icon-style1-l</span><span class="i-code">0xe80b</span>
+              </div>
             </div>
-            <div class="span3" title="Code: 0xe83d">
-              <i class="adiba-icon icon-style3-j">&#xe83d;</i> <span class="i-name">icon-style3-j</span><span class="i-code">0xe83d</span>
+            <div class="col-lg-3">
+              <div class="span3" title="Code: 0xe80c">
+                <i class="adiba-icon icon-style1-m">&#xe80c;</i> <span class="i-name">icon-style1-m</span><span class="i-code">0xe80c</span>
+              </div>
+              <div class="span3" title="Code: 0xe80d">
+                <i class="adiba-icon icon-style1-n">&#xe80d;</i> <span class="i-name">icon-style1-n</span><span class="i-code">0xe80d</span>
+              </div>
+              <div class="span3" title="Code: 0xe80e">
+                <i class="adiba-icon icon-style1-o">&#xe80e;</i> <span class="i-name">icon-style1-o</span><span class="i-code">0xe80e</span>
+              </div>
+              <div class="span3" title="Code: 0xe80f">
+                <i class="adiba-icon icon-style1-p">&#xe80f;</i> <span class="i-name">icon-style1-p</span><span class="i-code">0xe80f</span>
+              </div>
             </div>
-            <div class="span3" title="Code: 0xe83e">
-              <i class="adiba-icon icon-style3-k">&#xe83e;</i> <span class="i-name">icon-style3-k</span><span class="i-code">0xe83e</span>
+            <div class="col-lg-3">
+              <div class="span3" title="Code: 0xe810">
+                <i class="adiba-icon icon-style1-q">&#xe810;</i> <span class="i-name">icon-style1-q</span><span class="i-code">0xe810</span>
+              </div>
+              <div class="span3" title="Code: 0xe811">
+                <i class="adiba-icon icon-style1-r">&#xe811;</i> <span class="i-name">icon-style1-r</span><span class="i-code">0xe811</span>
+              </div>
+              <div class="span3" title="Code: 0xe812">
+                <i class="adiba-icon icon-style1-s">&#xe812;</i> <span class="i-name">icon-style1-s</span><span class="i-code">0xe812</span>
+              </div>
+              <div class="span3" title="Code: 0xe813">
+                <i class="adiba-icon icon-style1-t">&#xe813;</i> <span class="i-name">icon-style1-t</span><span class="i-code">0xe813</span>
+              </div>
             </div>
-            <div class="span3" title="Code: 0xe83f">
-              <i class="adiba-icon icon-style3-l">&#xe83f;</i> <span class="i-name">icon-style3-l</span><span class="i-code">0xe83f</span>
+            <div class="col-lg-3">
+              <div class="span3" title="Code: 0xe814">
+                <i class="adiba-icon icon-style1-u">&#xe814;</i> <span class="i-name">icon-style1-u</span><span class="i-code">0xe814</span>
+              </div>
+              <div class="span3" title="Code: 0xe815">
+                <i class="adiba-icon icon-style1-v">&#xe815;</i> <span class="i-name">icon-style1-v</span><span class="i-code">0xe815</span>
+              </div>
+              <div class="span3" title="Code: 0xe816">
+                <i class="adiba-icon icon-style1-w">&#xe816;</i> <span class="i-name">icon-style1-w</span><span class="i-code">0xe816</span>
+              </div>
+              <div class="span3" title="Code: 0xe817">
+                <i class="adiba-icon icon-style1-x">&#xe817;</i> <span class="i-name">icon-style1-x</span><span class="i-code">0xe817</span>
+              </div>
             </div>
-          </div>
-          <div class="col-lg-3">
-            <div class="span3" title="Code: 0xe840">
-              <i class="adiba-icon icon-style3-m">&#xe840;</i> <span class="i-name">icon-style3-m</span><span class="i-code">0xe840</span>
+            <div class="col-lg-3">
+              <div class="span3" title="Code: 0xe818">
+                <i class="adiba-icon icon-style1-y">&#xe818;</i> <span class="i-name">icon-style1-y</span><span class="i-code">0xe818</span>
+              </div>
+              <div class="span3" title="Code: 0xe819">
+                <i class="adiba-icon icon-style1-z">&#xe819;</i> <span class="i-name">icon-style1-z</span><span class="i-code">0xe819</span>
+              </div>
+              <div class="span3" title="Code: 0xe81a">
+                <i class="adiba-icon icon-style2-a">&#xe81a;</i> <span class="i-name">icon-style2-a</span><span class="i-code">0xe81a</span>
+              </div>
+              <div class="span3" title="Code: 0xe81b">
+                <i class="adiba-icon icon-style2-b">&#xe81b;</i> <span class="i-name">icon-style2-b</span><span class="i-code">0xe81b</span>
+              </div>
             </div>
-            <div class="span3" title="Code: 0xe841">
-              <i class="adiba-icon icon-style3-n">&#xe841;</i> <span class="i-name">icon-style3-n</span><span class="i-code">0xe841</span>
+            <div class="col-lg-3">
+              <div class="span3" title="Code: 0xe81c">
+                <i class="adiba-icon icon-style2-c">&#xe81c;</i> <span class="i-name">icon-style2-c</span><span class="i-code">0xe81c</span>
+              </div>
+              <div class="span3" title="Code: 0xe81d">
+                <i class="adiba-icon icon-style2-d">&#xe81d;</i> <span class="i-name">icon-style2-d</span><span class="i-code">0xe81d</span>
+              </div>
+              <div class="span3" title="Code: 0xe81e">
+                <i class="adiba-icon icon-style2-e">&#xe81e;</i> <span class="i-name">icon-style2-e</span><span class="i-code">0xe81e</span>
+              </div>
+              <div class="span3" title="Code: 0xe81f">
+                <i class="adiba-icon icon-style2-f">&#xe81f;</i> <span class="i-name">icon-style2-f</span><span class="i-code">0xe81f</span>
+              </div>
             </div>
-            <div class="span3" title="Code: 0xe842">
-              <i class="adiba-icon icon-style3-o">&#xe842;</i> <span class="i-name">icon-style3-o</span><span class="i-code">0xe842</span>
+            <div class="col-lg-3">
+              <div class="span3" title="Code: 0xe820">
+                <i class="adiba-icon icon-style2-g">&#xe820;</i> <span class="i-name">icon-style2-g</span><span class="i-code">0xe820</span>
+              </div>
+              <div class="span3" title="Code: 0xe821">
+                <i class="adiba-icon icon-style2-h">&#xe821;</i> <span class="i-name">icon-style2-h</span><span class="i-code">0xe821</span>
+              </div>
+              <div class="span3" title="Code: 0xe822">
+                <i class="adiba-icon icon-style2-i">&#xe822;</i> <span class="i-name">icon-style2-i</span><span class="i-code">0xe822</span>
+              </div>
+              <div class="span3" title="Code: 0xe823">
+                <i class="adiba-icon icon-style2-j">&#xe823;</i> <span class="i-name">icon-style2-j</span><span class="i-code">0xe823</span>
+              </div>
             </div>
-            <div class="span3" title="Code: 0xe843">
-              <i class="adiba-icon icon-style3-p">&#xe843;</i> <span class="i-name">icon-style3-p</span><span class="i-code">0xe843</span>
+            <div class="col-lg-3">
+              <div class="span3" title="Code: 0xe824">
+                <i class="adiba-icon icon-style2-k">&#xe824;</i> <span class="i-name">icon-style2-k</span><span class="i-code">0xe824</span>
+              </div>
+              <div class="span3" title="Code: 0xe825">
+                <i class="adiba-icon icon-style2-l">&#xe825;</i> <span class="i-name">icon-style2-l</span><span class="i-code">0xe825</span>
+              </div>
+              <div class="span3" title="Code: 0xe826">
+                <i class="adiba-icon icon-style2-m">&#xe826;</i> <span class="i-name">icon-style2-m</span><span class="i-code">0xe826</span>
+              </div>
+              <div class="span3" title="Code: 0xe827">
+                <i class="adiba-icon icon-style2-n">&#xe827;</i> <span class="i-name">icon-style2-n</span><span class="i-code">0xe827</span>
+              </div>
             </div>
-          </div>
-          <div class="col-lg-3">
-            <div class="span3" title="Code: 0xe844">
-              <i class="adiba-icon icon-style3-q">&#xe844;</i> <span class="i-name">icon-style3-q</span><span class="i-code">0xe844</span>
+            <div class="col-lg-3">
+              <div class="span3" title="Code: 0xe828">
+                <i class="adiba-icon icon-style2-o">&#xe828;</i> <span class="i-name">icon-style2-o</span><span class="i-code">0xe828</span>
+              </div>
+              <div class="span3" title="Code: 0xe829">
+                <i class="adiba-icon icon-style2-p">&#xe829;</i> <span class="i-name">icon-style2-p</span><span class="i-code">0xe829</span>
+              </div>
+              <div class="span3" title="Code: 0xe82a">
+                <i class="adiba-icon icon-style2-q">&#xe82a;</i> <span class="i-name">icon-style2-q</span><span class="i-code">0xe82a</span>
+              </div>
+              <div class="span3" title="Code: 0xe82b">
+                <i class="adiba-icon icon-style2-r">&#xe82b;</i> <span class="i-name">icon-style2-r</span><span class="i-code">0xe82b</span>
+              </div>
             </div>
-            <div class="span3" title="Code: 0xe845">
-              <i class="adiba-icon icon-style3-r">&#xe845;</i> <span class="i-name">icon-style3-r</span><span class="i-code">0xe845</span>
+            <div class="col-lg-3">
+              <div class="span3" title="Code: 0xe82c">
+                <i class="adiba-icon icon-style2-s">&#xe82c;</i> <span class="i-name">icon-style2-s</span><span class="i-code">0xe82c</span>
+              </div>
+              <div class="span3" title="Code: 0xe82d">
+                <i class="adiba-icon icon-style2-t">&#xe82d;</i> <span class="i-name">icon-style2-t</span><span class="i-code">0xe82d</span>
+              </div>
+              <div class="span3" title="Code: 0xe82e">
+                <i class="adiba-icon icon-style2-u">&#xe82e;</i> <span class="i-name">icon-style2-u</span><span class="i-code">0xe82e</span>
+              </div>
+              <div class="span3" title="Code: 0xe82f">
+                <i class="adiba-icon icon-style2-v">&#xe82f;</i> <span class="i-name">icon-style2-v</span><span class="i-code">0xe82f</span>
+              </div>
             </div>
-            <div class="span3" title="Code: 0xe846">
-              <i class="adiba-icon icon-style3-s">&#xe846;</i> <span class="i-name">icon-style3-s</span><span class="i-code">0xe846</span>
+            <div class="col-lg-3">
+              <div class="span3" title="Code: 0xe830">
+                <i class="adiba-icon icon-style2-w">&#xe830;</i> <span class="i-name">icon-style2-w</span><span class="i-code">0xe830</span>
+              </div>
+              <div class="span3" title="Code: 0xe831">
+                <i class="adiba-icon icon-style2-x">&#xe831;</i> <span class="i-name">icon-style2-x</span><span class="i-code">0xe831</span>
+              </div>
+              <div class="span3" title="Code: 0xe832">
+                <i class="adiba-icon icon-style2-y">&#xe832;</i> <span class="i-name">icon-style2-y</span><span class="i-code">0xe832</span>
+              </div>
+              <div class="span3" title="Code: 0xe833">
+                <i class="adiba-icon icon-style2-z">&#xe833;</i> <span class="i-name">icon-style2-z</span><span class="i-code">0xe833</span>
+              </div>
             </div>
-            <div class="span3" title="Code: 0xe847">
-              <i class="adiba-icon icon-style3-t">&#xe847;</i> <span class="i-name">icon-style3-t</span><span class="i-code">0xe847</span>
+            <div class="col-lg-3">
+              <div class="span3" title="Code: 0xe834">
+                <i class="adiba-icon icon-style3-a">&#xe834;</i> <span class="i-name">icon-style3-a</span><span class="i-code">0xe834</span>
+              </div>
+              <div class="span3" title="Code: 0xe835">
+                <i class="adiba-icon icon-style3-b">&#xe835;</i> <span class="i-name">icon-style3-b</span><span class="i-code">0xe835</span>
+              </div>
+              <div class="span3" title="Code: 0xe836">
+                <i class="adiba-icon icon-style3-c">&#xe836;</i> <span class="i-name">icon-style3-c</span><span class="i-code">0xe836</span>
+              </div>
+              <div class="span3" title="Code: 0xe837">
+                <i class="adiba-icon icon-style3-d">&#xe837;</i> <span class="i-name">icon-style3-d</span><span class="i-code">0xe837</span>
+              </div>
             </div>
-          </div>
-          <div class="col-lg-3">
-            <div class="span3" title="Code: 0xe848">
-              <i class="adiba-icon icon-style3-u">&#xe848;</i> <span class="i-name">icon-style3-u</span><span class="i-code">0xe848</span>
+            <div class="col-lg-3">
+              <div class="span3" title="Code: 0xe838">
+                <i class="adiba-icon icon-style3-e">&#xe838;</i> <span class="i-name">icon-style3-e</span><span class="i-code">0xe838</span>
+              </div>
+              <div class="span3" title="Code: 0xe839">
+                <i class="adiba-icon icon-style3-f">&#xe839;</i> <span class="i-name">icon-style3-f</span><span class="i-code">0xe839</span>
+              </div>
+              <div class="span3" title="Code: 0xe83a">
+                <i class="adiba-icon icon-style3-g">&#xe83a;</i> <span class="i-name">icon-style3-g</span><span class="i-code">0xe83a</span>
+              </div>
+              <div class="span3" title="Code: 0xe83b">
+                <i class="adiba-icon icon-style3-h">&#xe83b;</i> <span class="i-name">icon-style3-h</span><span class="i-code">0xe83b</span>
+              </div>
             </div>
-            <div class="span3" title="Code: 0xe849">
-              <i class="adiba-icon icon-style3-v">&#xe849;</i> <span class="i-name">icon-style3-v</span><span class="i-code">0xe849</span>
+            <div class="col-lg-3">
+              <div class="span3" title="Code: 0xe83c">
+                <i class="adiba-icon icon-style3-i">&#xe83c;</i> <span class="i-name">icon-style3-i</span><span class="i-code">0xe83c</span>
+              </div>
+              <div class="span3" title="Code: 0xe83d">
+                <i class="adiba-icon icon-style3-j">&#xe83d;</i> <span class="i-name">icon-style3-j</span><span class="i-code">0xe83d</span>
+              </div>
+              <div class="span3" title="Code: 0xe83e">
+                <i class="adiba-icon icon-style3-k">&#xe83e;</i> <span class="i-name">icon-style3-k</span><span class="i-code">0xe83e</span>
+              </div>
+              <div class="span3" title="Code: 0xe83f">
+                <i class="adiba-icon icon-style3-l">&#xe83f;</i> <span class="i-name">icon-style3-l</span><span class="i-code">0xe83f</span>
+              </div>
             </div>
-            <div class="span3" title="Code: 0xe84a">
-              <i class="adiba-icon icon-style3-w">&#xe84a;</i> <span class="i-name">icon-style3-w</span><span class="i-code">0xe84a</span>
+            <div class="col-lg-3">
+              <div class="span3" title="Code: 0xe840">
+                <i class="adiba-icon icon-style3-m">&#xe840;</i> <span class="i-name">icon-style3-m</span><span class="i-code">0xe840</span>
+              </div>
+              <div class="span3" title="Code: 0xe841">
+                <i class="adiba-icon icon-style3-n">&#xe841;</i> <span class="i-name">icon-style3-n</span><span class="i-code">0xe841</span>
+              </div>
+              <div class="span3" title="Code: 0xe842">
+                <i class="adiba-icon icon-style3-o">&#xe842;</i> <span class="i-name">icon-style3-o</span><span class="i-code">0xe842</span>
+              </div>
+              <div class="span3" title="Code: 0xe843">
+                <i class="adiba-icon icon-style3-p">&#xe843;</i> <span class="i-name">icon-style3-p</span><span class="i-code">0xe843</span>
+              </div>
             </div>
-            <div class="span3" title="Code: 0xe84b">
-              <i class="adiba-icon icon-style3-x">&#xe84b;</i> <span class="i-name">icon-style3-x</span><span class="i-code">0xe84b</span>
+            <div class="col-lg-3">
+              <div class="span3" title="Code: 0xe844">
+                <i class="adiba-icon icon-style3-q">&#xe844;</i> <span class="i-name">icon-style3-q</span><span class="i-code">0xe844</span>
+              </div>
+              <div class="span3" title="Code: 0xe845">
+                <i class="adiba-icon icon-style3-r">&#xe845;</i> <span class="i-name">icon-style3-r</span><span class="i-code">0xe845</span>
+              </div>
+              <div class="span3" title="Code: 0xe846">
+                <i class="adiba-icon icon-style3-s">&#xe846;</i> <span class="i-name">icon-style3-s</span><span class="i-code">0xe846</span>
+              </div>
+              <div class="span3" title="Code: 0xe847">
+                <i class="adiba-icon icon-style3-t">&#xe847;</i> <span class="i-name">icon-style3-t</span><span class="i-code">0xe847</span>
+              </div>
             </div>
-          </div>
-          <div class="col-lg-3">
-            <div class="span3" title="Code: 0xe84c">
-              <i class="adiba-icon icon-style3-y">&#xe84c;</i> <span class="i-name">icon-style3-y</span><span class="i-code">0xe84c</span>
+            <div class="col-lg-3">
+              <div class="span3" title="Code: 0xe848">
+                <i class="adiba-icon icon-style3-u">&#xe848;</i> <span class="i-name">icon-style3-u</span><span class="i-code">0xe848</span>
+              </div>
+              <div class="span3" title="Code: 0xe849">
+                <i class="adiba-icon icon-style3-v">&#xe849;</i> <span class="i-name">icon-style3-v</span><span class="i-code">0xe849</span>
+              </div>
+              <div class="span3" title="Code: 0xe84a">
+                <i class="adiba-icon icon-style3-w">&#xe84a;</i> <span class="i-name">icon-style3-w</span><span class="i-code">0xe84a</span>
+              </div>
+              <div class="span3" title="Code: 0xe84b">
+                <i class="adiba-icon icon-style3-x">&#xe84b;</i> <span class="i-name">icon-style3-x</span><span class="i-code">0xe84b</span>
+              </div>
             </div>
-            <div class="span3" title="Code: 0xe84d">
-              <i class="adiba-icon icon-style3-z">&#xe84d;</i> <span class="i-name">icon-style3-z</span><span class="i-code">0xe84d</span>
+            <div class="col-lg-3">
+              <div class="span3" title="Code: 0xe84c">
+                <i class="adiba-icon icon-style3-y">&#xe84c;</i> <span class="i-name">icon-style3-y</span><span class="i-code">0xe84c</span>
+              </div>
+              <div class="span3" title="Code: 0xe84d">
+                <i class="adiba-icon icon-style3-z">&#xe84d;</i> <span class="i-name">icon-style3-z</span><span class="i-code">0xe84d</span>
+              </div>
             </div>
-          </div>
+        </div>
       </div>
 
-    </div>
-
     
     <footer class="footer">
       <div class="container">
diff --git a/index.html b/index.html
index 465437f..5ecd861 100644
--- a/index.html
+++ b/index.html
@@ -203,47 +203,74 @@
   <body class="bd-masthead">
 
     <header>
-      <div class="header-area">
-          <div class="main-header">
-              <div class="container">
-                  <div class="row align-items-center">
-                      <!-- Logo -->
-                      <div class="col-xl-5 col-lg-5">
-                        <a href="index.html">
-                          <h1>adibaIcon </h1>
-                        </a>
+        <div class="header-area">
+            <div class="main-header">
+                <div class="container">
+                    <div class="row align-items-center">
+                        <!-- Logo -->
+                        <div class="col-xl-5 col-lg-5">
+                          <a href="index.html">
+                            <h1>adibaIcon </h1>
+                          </a>
 
-                      </div>
-                      <div class="col-xl-7 col-lg-7">
-                          <div class="menu-wrapper  d-flex align-items-center justify-content-end">
-                              <!-- Main-menu -->
-                              <div class="main-menu d-none d-lg-block">
-                                  <nav>
-                                      <ul class="listing" id="navigation">
-                                          <li class="single-list"><a href="icons.html" target="_blank" class="single">icons</a></li>
-                                          <li class="single-list"><a href="#" target="_blank" class="single">Doc</a></li>
-                                          <li class="single-list"><a href="https://github.com/jmrashed/adibaicon" target="_blank" class="single">
-                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"></path></svg>
-                                          </a></li>
-                                      </ul>
-                                  </nav>
-                              </div>
-                          </div>
-                      </div> 
-                      <!-- Mobile Menu -->
-                      <div class="col-12">
-                          <div class="mobile_menu d-block d-lg-none"></div>
-                      </div>
-                  </div>
-              </div>
-          </div>
-      </div>
-  </header>
+                        </div>
+                        <div class="col-xl-7 col-lg-7">
+                            <div class="menu-wrapper  d-flex align-items-center justify-content-end">
+                                <!-- Main-menu -->
+                                <div class="main-menu d-none d-lg-block">
+                                    <nav>
+                                        <ul class="listing" id="navigation">
 
+                                            <li class="single-list nav-item dropdown">
+                                              <button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle show" data-bs-toggle="dropdown" aria-expanded="true" data-bs-display="static">
+                                                <span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap&nbsp;</span> v2.1 <span class="visually-hidden">(switch to other versions)</span>
+                                              </button>
 
+                                              <!-- Dropdown -->
+                                              <ul class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
+                                                  <li>
+                                                    <a class="dropdown-item d-flex align-items-center justify-content-between active" aria-current="true" href="/">
+                                                      Latest (2.1.x)
+                                                      <svg class="bi"><use xlink:href="#check2"></use></svg>
+                                                    </a>
+                                                  </li>
+                                                  <li>
+                                                      <a class="dropdown-item" href="#">v2.1.1</a>
+                                                  </li>
+                                                  <li>
+                                                      <a class="dropdown-item" href="#">v2.0.0</a>
+                                                  </li>
+                                                  <li><hr class="dropdown-divider"></li>
+                                                  <li><h6 class="dropdown-header">Previous releases</h6></li>
+                                                  <li><a class="dropdown-item" href="#">v1.0.0</a></li>
+                                                  <li><a class="dropdown-item" href="#">v1.0.1</a></li>
+                                                  <li><a class="dropdown-item" href="#">v1.0.2</a></li>
+                                                  <li><hr class="dropdown-divider"></li>
+                                                  <li><a class="dropdown-item" href="#">All versions</a></li>
+                                              </ul>
+                                            </li>
+                                            
+                                            <li class="single-list"><a href="icons.html" target="_blank" class="single">icons</a></li>
+                                            <li class="single-list"><a href="doc.html" target="_blank" class="single">Doc</a></li>
+                                            <li class="single-list"><a href="https://github.com/jmrashed/adibaicon" target="_blank" class="single">
+                                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"></path></svg>
+                                            </a></li>
+                                        </ul>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div> 
+                        <!-- Mobile Menu -->
+                        <div class="col-12">
+                            <div class="mobile_menu d-block d-lg-none"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
 
     <div class="container py-100" id="icons">
-
       <section class="row g-md-5 pb-md-5 mb-5 align-items-center">
         <div class="col-lg-8 mb-5">
           <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-pink-rgb);">
@@ -305,12 +332,8 @@ <h3 class="fw-semibold">Customizing via icons size & color</h3>
           </div>
         </div>
       </section>
+    </div>
 
-
-
- </div>
-
-    
     <footer class="footer">
       <div class="container">
         <p style="color: #000;">&copy; Copyright by <a style="color: #000;" href="https://github.com/jmrashed">Md Rasheduzzaman</a> | 
