diff --git a/components/image/__tests__/__snapshots__/browser.test.tsx.snap b/components/image/__tests__/__snapshots__/browser.test.tsx.snap
index f8f73fa7d..dbaca9ff3 100644
--- a/components/image/__tests__/__snapshots__/browser.test.tsx.snap
+++ b/components/image/__tests__/__snapshots__/browser.test.tsx.snap
@@ -434,8 +434,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -488,8 +490,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -644,8 +648,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -698,8 +704,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -1135,8 +1143,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -1189,8 +1199,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -1768,8 +1780,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -1822,8 +1836,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -1978,8 +1994,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -2032,8 +2050,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -2469,8 +2489,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -2523,8 +2545,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -3867,8 +3891,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -3921,8 +3947,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -4077,8 +4105,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -4131,8 +4161,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -4568,8 +4600,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -4622,8 +4656,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -5201,8 +5237,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -5255,8 +5293,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -5411,8 +5451,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -5465,8 +5507,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -5902,8 +5946,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -5956,8 +6002,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -7088,8 +7136,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -7142,8 +7192,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -7298,8 +7350,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -7352,8 +7406,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -7789,8 +7845,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -7843,8 +7901,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -8422,8 +8482,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -8476,8 +8538,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -8632,8 +8696,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -8686,8 +8752,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -9123,8 +9191,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -9177,8 +9247,10 @@ LoadedCheerio {
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
diff --git a/components/link/__tests__/__snapshots__/index.test.tsx.snap b/components/link/__tests__/__snapshots__/index.test.tsx.snap
index d0be181d6..0de096c8a 100644
--- a/components/link/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/link/__tests__/__snapshots__/index.test.tsx.snap
@@ -17,8 +17,10 @@ exports[`Link should render correctly 1`] = `
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -47,8 +49,10 @@ exports[`Link should render correctly 1`] = `
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -61,9 +65,9 @@ exports[`Link should render correctly 1`] = `
             background-color: unset;
             color: #3291ff;
           }
-        </style></a><a class=\\"link  \\" href=\\"https://geist-ui.dev\\">link<svg viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" class=\\"icon\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\\"></path><path d=\\"M15 3h6v6\\"></path><path d=\\"M10 14L21 3\\"></path><style>
+        </style></a><a class=\\"link  \\" href=\\"https://geist-ui.dev\\">link<svg viewBox=\\"0 0 24 24\\" width=\\"0.9375em\\" height=\\"0.9375em\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" class=\\"icon\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\\"></path><path d=\\"M15 3h6v6\\"></path><path d=\\"M10 14L21 3\\"></path><style>
         .icon {
-          margin: 0 0.3125em;
+          margin: 0 0 -1px 0.1875em;
           display: inline-flex;
           align-self: center;
           color: currentColor;
@@ -84,8 +88,10 @@ exports[`Link should render correctly 1`] = `
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -114,8 +120,10 @@ exports[`Link should render correctly 1`] = `
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
@@ -144,8 +152,10 @@ exports[`Link should render correctly 1`] = `
             padding: 0 0 0 0;
           }
           .block {
-            padding: calc(0.268 * 16px) calc(0.5625 * 16px) calc(0.268 * 16px)
-              calc(0.5625 * 16px);
+            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)
+              calc(0.25 * 16px);
+            margin: 0 calc(-0.125 * 16px) 0
+              calc(-0.125 * 16px);
           }
 
           .link:hover,
diff --git a/components/link/icon.tsx b/components/link/icon.tsx
index 56f8f914d..7d9955da7 100644
--- a/components/link/icon.tsx
+++ b/components/link/icon.tsx
@@ -4,8 +4,8 @@ export const LinkIconComponent: React.FC<unknown> = () => {
   return (
     <svg
       viewBox="0 0 24 24"
-      width="1em"
-      height="1em"
+      width="0.9375em"
+      height="0.9375em"
       stroke="currentColor"
       strokeWidth="1.5"
       strokeLinecap="round"
@@ -19,7 +19,7 @@ export const LinkIconComponent: React.FC<unknown> = () => {
 
       <style jsx>{`
         .icon {
-          margin: 0 0.3125em;
+          margin: 0 0 -1px 0.1875em;
           display: inline-flex;
           align-self: center;
           color: currentColor;
diff --git a/components/link/link.tsx b/components/link/link.tsx
index 947ce29eb..163bf25d1 100644
--- a/components/link/link.tsx
+++ b/components/link/link.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import useTheme from '../use-theme'
-import useWarning from '../utils/use-warning'
 import LinkIcon from './icon'
 import { addColorAlpha } from '../utils/color'
 import useScale, { withPureProps, withScale } from '../use-scale'
@@ -8,7 +7,6 @@ import useScale, { withPureProps, withScale } from '../use-scale'
 export interface Props {
   href?: string
   color?: boolean
-  pure?: boolean
   icon?: boolean
   underline?: boolean
   block?: boolean
@@ -18,7 +16,6 @@ export interface Props {
 const defaultProps = {
   href: '',
   color: false,
-  pure: false,
   icon: false,
   underline: false,
   block: false,
@@ -37,7 +34,6 @@ const LinkComponent = React.forwardRef<
       href,
       color,
       underline,
-      pure,
       children,
       className,
       block,
@@ -51,9 +47,6 @@ const LinkComponent = React.forwardRef<
     const linkColor = color || block ? theme.palette.link : 'inherit'
     const hoverColor = color || block ? theme.palette.successLight : 'inherit'
     const decoration = underline ? 'underline' : 'none'
-    if (pure) {
-      useWarning('Props "pure" is deprecated, now the default Link is pure.')
-    }
 
     return (
       <a
@@ -79,8 +72,10 @@ const LinkComponent = React.forwardRef<
             padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};
           }
           .block {
-            padding: ${SCALES.pt(0.268)} ${SCALES.pr(0.5625)} ${SCALES.pb(0.268)}
-              ${SCALES.pl(0.5625)};
+            padding: ${SCALES.pt(0.125)} ${SCALES.pr(0.25)} ${SCALES.pb(0.125)}
+              ${SCALES.pl(0.25)};
+            margin: ${SCALES.mt(0)} ${SCALES.mr(-0.125)} ${SCALES.mb(0)}
+              ${SCALES.ml(-0.125)};
           }
 
           .link:hover,
diff --git a/lib/components/mdx-widgets/hybrid-link.tsx b/lib/components/mdx-widgets/hybrid-link.tsx
index 8256174ea..1837b5f57 100644
--- a/lib/components/mdx-widgets/hybrid-link.tsx
+++ b/lib/components/mdx-widgets/hybrid-link.tsx
@@ -13,7 +13,7 @@ const HybridLink: React.FC<HybridLinkProps> = ({ href = '#', children, ...props
   if (isRelativeUrl) {
     return (
       <NextLink href={href} passHref>
-        <Link color block ml="-2px" px="4px" py="2px" {...props}>
+        <Link color block {...props}>
           {children}
         </Link>
       </NextLink>
diff --git a/pages/en-us/guide/themes.mdx b/pages/en-us/guide/themes.mdx
index 6e57abef7..fe0200168 100644
--- a/pages/en-us/guide/themes.mdx
+++ b/pages/en-us/guide/themes.mdx
@@ -41,7 +41,7 @@ const App = () => {
 
 Customizing a theme is very simple in Geist UI, you just need to provide a new theme `Object`,
 and all the components will change automatically.
-Here is a [complete sample project](https://github.com/geist-org/geist-ui/tree/master/examples/custom-themes) for reference.
+Here is a complete [sample](https://github.com/geist-org/geist-ui/tree/master/examples/custom-themes) for reference.
 
 ```jsx
 import { CssBaseline, GeistProvider, Themes } from '@geist-ui/core'