diff --git a/docs/docs/tickmark.md b/docs/docs/tickmark.md
new file mode 100644
index 0000000..2a808b8
--- /dev/null
+++ b/docs/docs/tickmark.md
@@ -0,0 +1,24 @@
+---
+id: tickmark
+title: Tick Mark
+sidebar_label: Tick Mark
+---
+
+```html live
+<>
+    <div class="lil-bg-white">
+        <div class="lil-tick-wrapper">
+            <div class="lil-tick"></div>
+        </div>
+
+        <div class="lil-tick-wrapper lil-bg-blue-300 lil-border-none">
+            <div class="lil-tick lil-border-white"></div>
+        </div>
+
+        <div class="lil-tick-wrapper lil-bg-green-250 lil-border-none">
+            <div class="lil-tick lil-border-white"></div>
+        </div>
+
+    </div>
+</>
+```
diff --git a/docs/sidebars.js b/docs/sidebars.js
index 4ab6270..91f9e8c 100755
--- a/docs/sidebars.js
+++ b/docs/sidebars.js
@@ -25,6 +25,11 @@ module.exports = {
       "colors",
       "cursor",
       "grid",
+      {
+        type: "category",
+        label: "Icons",
+        items :["tickmark"]
+      },
       "input-action",
       {
         type: "category",
diff --git a/src/components/Icons/tick.css b/src/components/Icons/tick.css
new file mode 100644
index 0000000..600ad4c
--- /dev/null
+++ b/src/components/Icons/tick.css
@@ -0,0 +1,9 @@
+.lil-tick-wrapper{
+    @apply lil-rounded-full lil-w-6 lil-h-6 lil-flex lil-items-center lil-justify-center lil-border-sm lil-border-font-200;
+}
+
+
+.lil-tick{
+    top: -2px;
+    @apply lil-relative lil-w-1 lil-h-2 lil-border-b-sm lil-border-r-sm lil-border-font-200 lil-transform lil-rotate-45 lil-inline-block;
+}
diff --git a/src/index.css b/src/index.css
index 0f16a51..9f7750f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -13,5 +13,5 @@
 @import "./components/Common/navbar.css";
 @import "./components/Common/caret.css";
 @import "./components/SideNav/sidenav.css";
+@import "./components/Icons/tick.css";
 @import "./components/Tabs/verticalPromiseTabs.css";
-