diff --git a/components/image/__tests__/__snapshots__/browser.test.tsx.snap b/components/image/__tests__/__snapshots__/browser.test.tsx.snap
index 9ac5fda..79824c3 100644
--- a/components/image/__tests__/__snapshots__/browser.test.tsx.snap
+++ b/components/image/__tests__/__snapshots__/browser.test.tsx.snap
@@ -321,6 +321,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -331,6 +332,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                               "next": null,
@@ -366,6 +368,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -376,6 +379,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                             "next": null,
@@ -510,6 +514,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -520,6 +525,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                             "next": null,
@@ -555,6 +561,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -565,6 +572,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                           "next": null,
@@ -870,6 +878,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -880,6 +889,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                               "next": null,
@@ -915,6 +925,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -925,6 +936,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                             "next": null,
@@ -1271,6 +1283,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -1281,6 +1294,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                             "next": null,
@@ -1316,6 +1330,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -1326,6 +1341,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                           "next": null,
@@ -1460,6 +1476,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -1470,6 +1487,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                           "next": null,
@@ -1505,6 +1523,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -1515,6 +1534,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                         "next": null,
@@ -1820,6 +1840,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -1830,6 +1851,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                             "next": null,
@@ -1865,6 +1887,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -1875,6 +1898,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                           "next": null,
@@ -2964,6 +2988,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -2974,6 +2999,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                                 "next": null,
@@ -3009,6 +3035,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -3019,6 +3046,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                               "next": null,
@@ -3153,6 +3181,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -3163,6 +3192,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                               "next": null,
@@ -3198,6 +3228,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -3208,6 +3239,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                             "next": null,
@@ -3513,6 +3545,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -3523,6 +3556,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                                 "next": null,
@@ -3558,6 +3592,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -3568,6 +3603,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                               "next": null,
@@ -3914,6 +3950,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -3924,6 +3961,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                               "next": null,
@@ -3959,6 +3997,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -3969,6 +4008,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                             "next": null,
@@ -4103,6 +4143,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -4113,6 +4154,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                             "next": null,
@@ -4148,6 +4190,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -4158,6 +4201,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                           "next": null,
@@ -4463,6 +4507,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -4473,6 +4518,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                               "next": null,
@@ -4508,6 +4554,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -4518,6 +4565,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                             "next": null,
@@ -5406,6 +5454,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -5416,6 +5465,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                                   "next": null,
@@ -5451,6 +5501,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -5461,6 +5512,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                                 "next": null,
@@ -5595,6 +5647,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -5605,6 +5658,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                                 "next": null,
@@ -5640,6 +5694,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -5650,6 +5705,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                               "next": null,
@@ -5955,6 +6011,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -5965,6 +6022,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                                   "next": null,
@@ -6000,6 +6058,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -6010,6 +6069,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                                 "next": null,
@@ -6356,6 +6416,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -6366,6 +6427,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                                 "next": null,
@@ -6401,6 +6463,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -6411,6 +6474,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                               "next": null,
@@ -6545,6 +6609,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -6555,6 +6620,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                               "next": null,
@@ -6590,6 +6656,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -6600,6 +6667,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                             "next": null,
@@ -6905,6 +6973,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -6915,6 +6984,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                                 "next": null,
@@ -6950,6 +7020,7 @@ initialize {
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -6960,6 +7031,7 @@ initialize {
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
         ",
                               "next": null,
diff --git a/components/image/image-browser.tsx b/components/image/image-browser.tsx
index 48ad2ba..14f5e1a 100644
--- a/components/image/image-browser.tsx
+++ b/components/image/image-browser.tsx
@@ -47,7 +47,7 @@ const getAddressInput = (url: string, showFullLink: boolean, colors: BrowserColo
     <span className="https">
       <ImageBrowserHttpsIcon />
     </span>
-    <Link pure href={url} title={url} target="_blank">
+    <Link href={url} title={url} target="_blank">
       {showFullLink ? url : getHostFromUrl(url)}
     </Link>
     <style jsx>{`
diff --git a/components/link/__tests__/__snapshots__/index.test.tsx.snap b/components/link/__tests__/__snapshots__/index.test.tsx.snap
index 6478ca9..b9f6c0d 100644
--- a/components/link/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/link/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,11 +1,58 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Link should render correctly 1`] = `
-"<div><a class=\\"link \\" href=\\"https://react.zeit-ui.co\\">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>
+"<div><a class=\\"link \\" href=\\"https://react.zeit-ui.co\\">link<style>
+          .link {
+            display: inline-flex;
+            align-items: baseline;
+            line-height: inherit;
+            color: inherit;
+            text-decoration: none;
+            padding: calc(0 * 0.8) calc(0 * 1.7);
+            border-radius: 0;
+            width: fit-content;
+            transition: color 200ms ease 0ms;
+          }
+
+          .link:hover,
+          .link:active,
+          .link:focus {
+            text-decoration: none;
+          }
+
+          .link:hover {
+            background-color: unset;
+            color: inherit;
+          }
+        </style></a><a class=\\"link \\" href=\\"https://react.zeit-ui.co\\">link<style>
+          .link {
+            display: inline-flex;
+            align-items: baseline;
+            line-height: inherit;
+            color: #0070f3;
+            text-decoration: none;
+            padding: calc(0 * 0.8) calc(0 * 1.7);
+            border-radius: 0;
+            width: fit-content;
+            transition: color 200ms ease 0ms;
+          }
+
+          .link:hover,
+          .link:active,
+          .link:focus {
+            text-decoration: none;
+          }
+
+          .link:hover {
+            background-color: unset;
+            color: #3291ff;
+          }
+        </style></a><a class=\\"link \\" href=\\"https://react.zeit-ui.co\\">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>
         .icon {
           margin: 0 5px;
           display: inline-flex;
           align-self: center;
+          color: currentColor;
         }
       </style></svg><style>
           .link {
@@ -17,6 +64,7 @@ exports[`Link should render correctly 1`] = `
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -27,33 +75,7 @@ exports[`Link should render correctly 1`] = `
 
           .link:hover {
             background-color: unset;
-          }
-        </style></a><a class=\\"link \\" href=\\"https://react.zeit-ui.co\\">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\\" style=\\"color: rgb(0, 112, 243);\\" 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 5px;
-          display: inline-flex;
-          align-self: center;
-        }
-      </style></svg><style>
-          .link {
-            display: inline-flex;
-            align-items: baseline;
-            line-height: inherit;
-            color: #0070f3;
-            text-decoration: none;
-            padding: calc(0 * 0.8) calc(0 * 1.7);
-            border-radius: 0;
-            width: fit-content;
-          }
-
-          .link:hover,
-          .link:active,
-          .link:focus {
-            text-decoration: none;
-          }
-
-          .link:hover {
-            background-color: unset;
+            color: inherit;
           }
         </style></a><a class=\\"link \\" href=\\"https://react.zeit-ui.co\\">link<style>
           .link {
@@ -65,33 +87,7 @@ exports[`Link should render correctly 1`] = `
             padding: calc(0 * 0.8) calc(0 * 1.7);
             border-radius: 0;
             width: fit-content;
-          }
-
-          .link:hover,
-          .link:active,
-          .link:focus {
-            text-decoration: none;
-          }
-
-          .link:hover {
-            background-color: unset;
-          }
-        </style></a><a class=\\"link \\" href=\\"https://react.zeit-ui.co\\">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>
-        .icon {
-          margin: 0 5px;
-          display: inline-flex;
-          align-self: center;
-        }
-      </style></svg><style>
-          .link {
-            display: inline-flex;
-            align-items: baseline;
-            line-height: inherit;
-            color: inherit;
-            text-decoration: none;
-            padding: calc(0 * 0.8) calc(0 * 1.7);
-            border-radius: 0;
-            width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -102,14 +98,9 @@ exports[`Link should render correctly 1`] = `
 
           .link:hover {
             background-color: unset;
+            color: inherit;
           }
-        </style></a><a class=\\"link \\" href=\\"https://react.zeit-ui.co\\">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\\" style=\\"color: rgb(0, 112, 243);\\" 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 5px;
-          display: inline-flex;
-          align-self: center;
-        }
-      </style></svg><style>
+        </style></a><a class=\\"link \\" href=\\"https://react.zeit-ui.co\\">link<style>
           .link {
             display: inline-flex;
             align-items: baseline;
@@ -119,6 +110,7 @@ exports[`Link should render correctly 1`] = `
             padding: calc(4pt * 0.8) calc(4pt * 1.7);
             border-radius: 5px;
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -129,6 +121,7 @@ exports[`Link should render correctly 1`] = `
 
           .link:hover {
             background-color: #0076ff1a;
+            color: #3291ff;
           }
         </style></a></div>"
 `;
diff --git a/components/link/__tests__/index.test.tsx b/components/link/__tests__/index.test.tsx
index d65c4cd..3c48d35 100644
--- a/components/link/__tests__/index.test.tsx
+++ b/components/link/__tests__/index.test.tsx
@@ -10,7 +10,7 @@ describe('Link', () => {
         <Link href="https://react.zeit-ui.co" color>
           link
         </Link>
-        <Link href="https://react.zeit-ui.co" pure>
+        <Link href="https://react.zeit-ui.co" icon>
           link
         </Link>
         <Link href="https://react.zeit-ui.co" underline>
@@ -41,5 +41,13 @@ describe('Link', () => {
     expect(errorSpy).not.toHaveBeenCalled()
     expect(ref.current).not.toBeNull()
     expect(() => wrapper.unmount()).not.toThrow()
+    errorSpy.mockRestore()
+  })
+
+  it('an warning should be thrown when using the pure prop', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
+    mount(<Link pure />)
+    expect(errorSpy).toHaveBeenCalled()
+    errorSpy.mockRestore()
   })
 })
diff --git a/components/link/icon.tsx b/components/link/icon.tsx
index 2c945d3..59c2774 100644
--- a/components/link/icon.tsx
+++ b/components/link/icon.tsx
@@ -1,10 +1,6 @@
 import React from 'react'
 
-interface Props {
-  color?: string
-}
-
-export const LinkIcon: React.FC<Props> = ({ color }) => {
+export const LinkIcon: React.FC<{}> = () => {
   return (
     <svg
       viewBox="0 0 24 24"
@@ -16,7 +12,6 @@ export const LinkIcon: React.FC<Props> = ({ color }) => {
       strokeLinejoin="round"
       fill="none"
       shapeRendering="geometricPrecision"
-      style={{ color }}
       className="icon">
       <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" />
       <path d="M15 3h6v6" />
@@ -27,6 +22,7 @@ export const LinkIcon: React.FC<Props> = ({ color }) => {
           margin: 0 5px;
           display: inline-flex;
           align-self: center;
+          color: currentColor;
         }
       `}</style>
     </svg>
diff --git a/components/link/link.tsx b/components/link/link.tsx
index 947e068..39cb172 100644
--- a/components/link/link.tsx
+++ b/components/link/link.tsx
@@ -1,12 +1,14 @@
 import React from 'react'
 import withDefaults from '../utils/with-defaults'
 import useTheme from '../styles/use-theme'
+import useWarning from '../utils/use-warning'
 import LinkIcon from './icon'
 
 interface Props {
   href?: string
   color?: boolean
   pure?: boolean
+  icon?: boolean
   underline?: boolean
   block?: boolean
   className?: string
@@ -16,6 +18,7 @@ const defaultProps = {
   href: '',
   color: false,
   pure: false,
+  icon: false,
   underline: false,
   block: false,
   className: '',
@@ -26,18 +29,22 @@ export type LinkProps = Props & typeof defaultProps & NativeAttrs
 
 const Link = React.forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkProps>>(
   (
-    { href, color, underline, pure, children, className, block, ...props },
+    { href, color, underline, pure, children, className, block, icon, ...props },
     ref: React.Ref<HTMLAnchorElement>,
   ) => {
     const theme = useTheme()
     const linkColor = color || block ? theme.palette.link : 'inherit'
+    const hoverColor = color || block ? theme.palette.successLight : 'inherit'
     const padding = block ? theme.layout.gapQuarter : '0'
     const decoration = underline ? 'underline' : 'none'
+    if (pure) {
+      useWarning('Props "pure" is deprecated, now the default Link is pure.')
+    }
 
     return (
       <a className={`link ${className}`} href={href} {...props} ref={ref}>
         {children}
-        {!pure && <LinkIcon color={linkColor} />}
+        {icon && <LinkIcon />}
         <style jsx>{`
           .link {
             display: inline-flex;
@@ -48,6 +55,7 @@ const Link = React.forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkPro
             padding: calc(${padding} * 0.8) calc(${padding} * 1.7);
             border-radius: ${block ? theme.layout.radius : 0};
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -58,6 +66,7 @@ const Link = React.forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkPro
 
           .link:hover {
             background-color: ${block ? '#0076ff1a' : 'unset'};
+            color: ${hoverColor};
           }
         `}</style>
       </a>
diff --git a/components/user/user-link.tsx b/components/user/user-link.tsx
index 3d636e9..7cd4b71 100644
--- a/components/user/user-link.tsx
+++ b/components/user/user-link.tsx
@@ -18,7 +18,7 @@ const UserLink = React.forwardRef<HTMLAnchorElement, React.PropsWithChildren<Use
   ({ href, className, children, ...props }, ref: React.Ref<HTMLAnchorElement>) => {
     return (
       <div className={className} {...props}>
-        <Link ref={ref} href={href} pure color target="_blank" rel="noopener">
+        <Link ref={ref} href={href} color target="_blank" rel="noopener">
           {children}
         </Link>
         <style jsx>{`
diff --git a/lib/components/anchor/index.tsx b/lib/components/anchor/index.tsx
index 39c9d02..b7330d0 100644
--- a/lib/components/anchor/index.tsx
+++ b/lib/components/anchor/index.tsx
@@ -23,9 +23,7 @@ const VirtualAnchor: React.FC<React.PropsWithChildren<Props>> = ({ children, pur
 
   return (
     <span className="parent" ref={ref}>
-      <Link pure href={`#${id}`}>
-        {children}
-      </Link>
+      <Link href={`#${id}`}>{children}</Link>
       <span className="virtual" id={id} />
       {!pure && (
         <span className="icon">
diff --git a/lib/components/attributes/contributors.tsx b/lib/components/attributes/contributors.tsx
index 596f0fd..72c76f6 100644
--- a/lib/components/attributes/contributors.tsx
+++ b/lib/components/attributes/contributors.tsx
@@ -46,13 +46,13 @@ const Contributors: React.FC<Props> = ({ path }) => {
     <div className="contributors">
       {users.map((user, index) => (
         <Tooltip text={<b>{user.name}</b>} key={`${user.url}-${index}`}>
-          <Link color pure target="_blank" rel="nofollow" href={user.url}>
+          <Link color target="_blank" rel="nofollow" href={user.url}>
             <Avatar src={user.avatar} />
           </Link>
         </Tooltip>
       ))}
       <Tooltip text={isChinese ? '在 GitHub 上编辑此页面' : 'Edit this page on GitHub'} type="dark">
-        <Link color pure target="_blank" rel="nofollow" href={link}>
+        <Link color target="_blank" rel="nofollow" href={link}>
           <Avatar text="Add" />
         </Link>
       </Tooltip>
diff --git a/pages/en-us/components/badge.mdx b/pages/en-us/components/badge.mdx
index 38a0fbc..1be41a4 100644
--- a/pages/en-us/components/badge.mdx
+++ b/pages/en-us/components/badge.mdx
@@ -71,12 +71,12 @@ Display an indicator that requires attention.
   <Spacer inline x={1.5} />
   <Badge.Anchor>
     <Badge size="mini" type="error" dot />
-    <Link pure target="_blank" href="https://github.com/zeit-ui/react/">ZEIT UI</Link>
+    <Link target="_blank" href="https://github.com/zeit-ui/react/">ZEIT UI</Link>
   </Badge.Anchor>
   <Spacer inline x={1.5} />
   <Badge.Anchor>
     <Badge size="mini" type="error" dot style={{ padding: '7px' }} />
-    <Link pure target="_blank" href="https://github.com/zeit-ui/react/">Share Link</Link>
+    <Link target="_blank" href="https://github.com/zeit-ui/react/">Share Link</Link>
   </Badge.Anchor>
 </>
 `} />
diff --git a/pages/en-us/components/card.mdx b/pages/en-us/components/card.mdx
index 8705029..39cba2f 100644
--- a/pages/en-us/components/card.mdx
+++ b/pages/en-us/components/card.mdx
@@ -78,14 +78,14 @@ A common container component.
     <h4>ZEIT UI React</h4>
     <p>Modern and minimalist React UI library.</p>
     <Card.Footer>
-      <Link pure color target="_blank" href="https://github.com/zeit-ui/react">Visit source code on GitHub.</Link>
+      <Link color target="_blank" href="https://github.com/zeit-ui/react">Visit source code on GitHub.</Link>
     </Card.Footer>
   </Card>
   <Card width="330px" type="dark">
     <h4>ZEIT UI React</h4>
     <p>Modern and minimalist React UI library.</p>
     <Card.Footer>
-      <Link pure target="_blank" href="https://github.com/zeit-ui/react">Visit source code on GitHub.</Link>
+      <Link target="_blank" href="https://github.com/zeit-ui/react">Visit source code on GitHub.</Link>
     </Card.Footer>
   </Card>
 </Row>
@@ -101,7 +101,7 @@ A common container component.
   <Text h4 style={{ marginBottom: '0' }}>ZEIT UI React</Text>
   <Text type="secondary" small>Modern and minimalist React UI library.</Text>
   <Card.Footer>
-    <Link pure block target="_blank" href="https://github.com/zeit-ui/react">Visit source code on GitHub.</Link>
+    <Link block target="_blank" href="https://github.com/zeit-ui/react">Visit source code on GitHub.</Link>
   </Card.Footer>
 </Card>
 `} />
diff --git a/pages/en-us/components/code.mdx b/pages/en-us/components/code.mdx
index b5d781f..f0a3fd2 100644
--- a/pages/en-us/components/code.mdx
+++ b/pages/en-us/components/code.mdx
@@ -13,7 +13,7 @@ Show source code in a standardized way.
 
 <Note>
   Want to display <Code>shell</Code> code snippets?
-  Try <NextLink href="/en-us/components/snippet"><Link pure color>Snippet</Link></NextLink>.
+  Try <NextLink href="/en-us/components/snippet"><Link color>Snippet</Link></NextLink>.
 </Note>
 
 <Playground
diff --git a/pages/en-us/components/link.mdx b/pages/en-us/components/link.mdx
index a7625fc..cd26513 100644
--- a/pages/en-us/components/link.mdx
+++ b/pages/en-us/components/link.mdx
@@ -1,5 +1,5 @@
 import { Layout, Playground, Attributes } from 'lib/components'
-import { Link, Text, Code } from 'components'
+import { Link, Text, Code, Spacer } from 'components'
 import NextLink from 'next/link'
 
 export const meta = {
@@ -12,7 +12,6 @@ export const meta = {
 Hyperlinks between pages.
 
 <Playground
-  desc="The default component Link adds an icon to the link."
   scope={{ Link }}
   code={`
 <Link href="#">The Evil Rabbit Jumped over the Fence.</Link>
@@ -26,15 +25,28 @@ Hyperlinks between pages.
 <Link href="#" color>The Evil Rabbit Jumped over the Fence.</Link>
 `} />
 
+<Playground
+  title="With Icon"
+  desc="Show an icon in the link."
+  scope={{ Link, Spacer }}
+  code={`
+<>
+  <Link href="#" icon>The Evil Rabbit Jumped over the Fence.</Link>
+  <Spacer y={.5} />
+  <Link href="#" icon color>The Evil Rabbit Jumped over the Fence.</Link>
+</>
+`} />
+
+
 <Playground
   title="variant"
   desc="Different styles of links."
   scope={{ Link, Text }}
   code={`
 <>
-  <Text><Link href="#" pure>The Evil Rabbit Jumped over the Fence.</Link></Text>
-  <Text><Link href="#" color pure>The Evil Rabbit Jumped over the Fence.</Link></Text>
-  <Text><Link href="#" pure underline>The Evil Rabbit Jumped over the Fence.</Link></Text>
+  <Text><Link href="#">The Evil Rabbit Jumped over the Fence.</Link></Text>
+  <Text><Link href="#" color>The Evil Rabbit Jumped over the Fence.</Link></Text>
+  <Text><Link href="#" underline>The Evil Rabbit Jumped over the Fence.</Link></Text>
   <Text><Link href="#" underline>The Evil Rabbit Jumped over the Fence.</Link></Text>
 </>
 `} />
@@ -44,7 +56,7 @@ Hyperlinks between pages.
   desc="Display as a separate block."
   scope={{ Link }}
   code={`
-<Link href="#" pure block>The Evil Rabbit Jumped over the Fence.</Link>
+<Link href="#" block>The Evil Rabbit Jumped over the Fence.</Link>
 `} />
 
 <Playground
@@ -53,7 +65,7 @@ Hyperlinks between pages.
   scope={{ Link, NextLink }}
   code={`
 <NextLink href="/en-us/components/button">
-  <Link pure block>Docs of Button</Link>
+  <Link block>Docs of Button</Link>
 </NextLink>
 `} />
 
@@ -64,7 +76,7 @@ Hyperlinks between pages.
 | ---------- | ---------- | ---- |  -------------- | ------ |
 | **href** | link url | `string` | - | - |
 | **color** | display color for link | `boolean` | - | `false` |
-| **pure** | hide icon | `boolean` | - | `false` |
+| **icon** | show icon | `boolean` | - | `false` |
 | **underline** | display underline | `boolean` | - | `false` |
 | **block** | display as a separate block | `boolean` | - | `false` |
 | ... | native props | `AnchorHTMLAttributes` | `'rel', 'target', ...` | - |
diff --git a/pages/en-us/components/modal.mdx b/pages/en-us/components/modal.mdx
index 130425b..e6068ca 100644
--- a/pages/en-us/components/modal.mdx
+++ b/pages/en-us/components/modal.mdx
@@ -14,7 +14,7 @@ Display popup content that requires attention or provides additional information
 
 <Note>
   Just want a text notification?
-  Try <NextLink href="/en-us/components/toast"><Link pure color>Toast component</Link></NextLink>.
+  Try <NextLink href="/en-us/components/toast"><Link color>Toast component</Link></NextLink>.
 </Note>
 
 <Playground
diff --git a/pages/en-us/components/popover.mdx b/pages/en-us/components/popover.mdx
index e4aa437..83d0d57 100644
--- a/pages/en-us/components/popover.mdx
+++ b/pages/en-us/components/popover.mdx
@@ -17,9 +17,9 @@ The floating box popped by clicking or hovering.
 () => {
   const content = () => (
     <div style={{ padding: '0 10px' }}>
-      <Link pure href="#">A hyperlink</Link>
+      <Link href="#">A hyperlink</Link>
       <Spacer y={.5} />
-      <Link pure color href="#">External link</Link>
+      <Link color href="#">External link</Link>
     </div>
   )
   return (
@@ -42,10 +42,10 @@ The floating box popped by clicking or hovering.
         <span>User Settings</span>
       </Popover.Item>
       <Popover.Item>
-        <Link pure href="#">A hyperlink</Link>
+        <Link href="#">A hyperlink</Link>
       </Popover.Item>
       <Popover.Item>
-        <Link pure color href="#">A hyperlink for edit profile</Link>
+        <Link color href="#">A hyperlink for edit profile</Link>
       </Popover.Item>
       <Popover.Item line />
       <Popover.Item>
diff --git a/pages/en-us/components/tooltip.mdx b/pages/en-us/components/tooltip.mdx
index d58ebcc..e5630f0 100644
--- a/pages/en-us/components/tooltip.mdx
+++ b/pages/en-us/components/tooltip.mdx
@@ -42,7 +42,7 @@ Displays additional information on hover.
   </Tooltip>
   <Spacer inline x={1} />
   <Tooltip text={'Push to Git and your website is live.'} type="dark">
-    <Link href="#" color pure>Hyperlink</Link>
+    <Link href="#" color>Hyperlink</Link>
   </Tooltip>
 </Row>
 `} />
diff --git a/pages/en-us/components/use-body-scroll.mdx b/pages/en-us/components/use-body-scroll.mdx
index 73a6968..5bdf080 100644
--- a/pages/en-us/components/use-body-scroll.mdx
+++ b/pages/en-us/components/use-body-scroll.mdx
@@ -10,7 +10,7 @@ export const meta = {
 
 Disable scrolling behavior for body or any element, it is useful for displaying popup element or menus.
 
-This is custom React Hooks, you need to follow the <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
+This is custom React Hooks, you need to follow the <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
 
 <Spacer y={1.5} />
 
diff --git a/pages/en-us/components/use-click-away.mdx b/pages/en-us/components/use-click-away.mdx
index f8deb3e..345a645 100644
--- a/pages/en-us/components/use-click-away.mdx
+++ b/pages/en-us/components/use-click-away.mdx
@@ -1,5 +1,5 @@
 import { Layout, Playground, Attributes } from 'lib/components'
-import { Utils, Link, Card } from 'components'
+import { Utils, Link, Card, Spacer } from 'components'
 
 export const meta = {
   title: 'use-click-away',
@@ -10,7 +10,7 @@ export const meta = {
 
 Detect if a click event happened outside of an element.
 
-This is custom React Hooks, you need to follow the <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
+This is custom React Hooks, you need to follow the <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
 
 <Spacer y={1.5} />
 
diff --git a/pages/en-us/components/use-clipboard.mdx b/pages/en-us/components/use-clipboard.mdx
index 89f8ae4..b6ad386 100644
--- a/pages/en-us/components/use-clipboard.mdx
+++ b/pages/en-us/components/use-clipboard.mdx
@@ -1,5 +1,5 @@
 import { Layout, Playground, Attributes } from 'lib/components'
-import { Utils, Link, Button, useToasts } from 'components'
+import { Utils, Link, Button, useToasts, Spacer } from 'components'
 
 export const meta = {
   title: 'use-clipboard',
@@ -10,7 +10,7 @@ export const meta = {
 
 Copy string to clipboard.
 
-This is custom React Hooks, you need to follow the <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
+This is custom React Hooks, you need to follow the <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
 
 <Spacer y={1.5} />
 
diff --git a/pages/en-us/components/use-current-state.mdx b/pages/en-us/components/use-current-state.mdx
index d438aca..98aad58 100644
--- a/pages/en-us/components/use-current-state.mdx
+++ b/pages/en-us/components/use-current-state.mdx
@@ -1,5 +1,5 @@
 import { Layout, Playground, Attributes } from 'lib/components'
-import { Utils, Link, Button } from 'components'
+import { Utils, Link, Button, Spacer } from 'components'
 
 export const meta = {
   title: 'use-current-state',
@@ -13,9 +13,9 @@ can only get the value at render time, not the latest.
 
 This is a small tool to get the latest value, It is very useful in async actions such as `setTimeout`.
 if you like a bigger solution,
-try <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-reference.html#usereducer">useReducer</Link>.
+try <Link target="_blank" color href="https://reactjs.org/docs/hooks-reference.html#usereducer">useReducer</Link>.
 
-This is custom React Hooks, you need to follow the <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
+This is custom React Hooks, you need to follow the <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
 
 <Spacer y={1.5} />
 
diff --git a/pages/en-us/guide/installation.mdx b/pages/en-us/guide/installation.mdx
index 9e996f4..fa091ce 100644
--- a/pages/en-us/guide/installation.mdx
+++ b/pages/en-us/guide/installation.mdx
@@ -12,8 +12,8 @@ export const meta = {
 ### Install package
 
 <Note>
-Ensure your have the latest version of <Link pure href="https://nodejs.org/en/download/">NodeJS</Link>,
-and a package manager: <Link pure href="https://www.npmjs.com/">NPM</Link> or <Link pure href="https://yarnpkg.com/">Yarn</Link>.
+Ensure your have the latest version of <Link href="https://nodejs.org/en/download/">NodeJS</Link>,
+and a package manager: <Link href="https://www.npmjs.com/">NPM</Link> or <Link href="https://yarnpkg.com/">Yarn</Link>.
 </Note>
 <Spacer y={1} />
 <Dot type="success" /> 1. Run script to download:
@@ -79,10 +79,10 @@ const MyComponent = () => <Button>Click Me</Button>
 
 ### Create React App
 
-A React project created by <Link pure color target="_blank" rel="nofollow" href="https://github.com/facebook/create-react-app">create-react-app</Link> can
+A React project created by <Link color target="_blank" rel="nofollow" href="https://github.com/facebook/create-react-app">create-react-app</Link> can
 also easily use `@zeit-ui/react`. You don't need to make any changes, just install and use.
 
-We have <Link target="_blank" pure color rel="nofollow" href="https://github.com/zeit-ui/react-getting-started">a
+We have <Link target="_blank" color rel="nofollow" href="https://github.com/zeit-ui/react-getting-started">a
 sample project related to create react app here</Link>.
 
 
diff --git a/pages/en-us/guide/introduction.mdx b/pages/en-us/guide/introduction.mdx
index a49c4cf..2de3f0c 100644
--- a/pages/en-us/guide/introduction.mdx
+++ b/pages/en-us/guide/introduction.mdx
@@ -11,8 +11,8 @@ export const meta = {
 
 ### Why @zeit-ui/react
 
-`@zeit-ui/react` is a React implementation for <Link rel="nofollow" target="_blank" pure href="https://github.com/zeit-ui/zeit-style">styles</Link>
-originating from <Link rel="nofollow" target="_blank" pure href="https://vercel.co/design">Vercel's design</Link>.
+`@zeit-ui/react` is a React implementation for <Link rel="nofollow" target="_blank" href="https://github.com/zeit-ui/zeit-style">styles</Link>
+originating from <Link rel="nofollow" target="_blank" href="https://vercel.co/design">Vercel's design</Link>.
 
 The design of the **Vercel** is concise and aesthetic feeling, this is an important reason for popular of Vercel.
 Now you can use them at will in React.
@@ -23,8 +23,8 @@ ZEIT UI is an unofficial organization, all our projects are open source.
 
 ### Contact
 
-- <Link pure color target="_blank" rel="nofollow" href="https://spectrum.chat/zeit-ui/general?tab=posts">Chat on Spectrum</Link>
-- <Link pure color target="_blank" rel="nofollow" href="https://github.com/zeit-ui/react/issues/new">Report an issue</Link>
+- <Link color target="_blank" rel="nofollow" href="https://spectrum.chat/zeit-ui/general?tab=posts">Chat on Spectrum</Link>
+- <Link color target="_blank" rel="nofollow" href="https://github.com/zeit-ui/react/issues/new">Report an issue</Link>
 - Welcome share your feedback and ideas. We also love PRs.
 
 <Spacer y={3} />
diff --git a/pages/en-us/guide/server-render.mdx b/pages/en-us/guide/server-render.mdx
index cc7f4a0..4ed7acd 100644
--- a/pages/en-us/guide/server-render.mdx
+++ b/pages/en-us/guide/server-render.mdx
@@ -15,19 +15,19 @@ export const meta = {
 All Components of `@zeit-ui/react` are compatible with **Server Render**. In fact, the document you see now is rendered by the server.
 
 <Note label="readme">
-  You just need <Link href="https://en.wikipedia.org/wiki/Single-page_application" rel="nofollow" pure underline>a SPA application</Link>?
+  You just need <Link href="https://en.wikipedia.org/wiki/Single-page_application" rel="nofollow" underline>a SPA application</Link>?
   It is recommended to skip this section.
 </Note>
 
 <Spacer y={.5} />
 
 Will using server-side rendering make my application lose the advantages of SPA? Maybe you can use the `hybrid render` application,
-Read <Link pure color href="https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support" rel="nofollow">
+Read <Link color href="https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support" rel="nofollow">
 the post from the Next.js team</Link> to learn more.
 
 <Text>In addition, for <Text b>server-side render</Text> and web applications,
 we strongly recommend that you read this famous post
-<Link pure color href="https://rauchg.com/2014/7-principles-of-rich-web-applications" rel="nofollow" target="_blank">
+<Link color href="https://rauchg.com/2014/7-principles-of-rich-web-applications" rel="nofollow" target="_blank">
   7-principles-of-rich-web-applications
 </Link> from <Text em>Guillermo Rauch</Text>.
 </Text>
diff --git a/pages/en-us/guide/themes.mdx b/pages/en-us/guide/themes.mdx
index 11f167f..a60dad2 100644
--- a/pages/en-us/guide/themes.mdx
+++ b/pages/en-us/guide/themes.mdx
@@ -50,7 +50,7 @@ const App = () => {
 
 Customize theme is very simple in `@zeit-ui/react`, you just need to provide a new theme `Object`,
 and all the components will change automatically.
-Here is <Link target="_blank" pure color href="https://github.com/zeit-ui/react/tree/master/examples/custom-themes">a complete sample project</Link> for reference.
+Here is <Link target="_blank" color href="https://github.com/zeit-ui/react/tree/master/examples/custom-themes">a complete sample project</Link> for reference.
 
 Of course, if a *component* doesn't use your customize variables, it doesn't make any additional **changes** or **rendering**.
 
@@ -94,7 +94,7 @@ const myStyles: ZeitUIThemes = { /* ... */ }
 const myPalette: Partial<ZeitUIThemesPalette> = { /* ... */ }
 ```
 
-If you don't use TypeScript, to learn more about preset types, see <Link color target="_blank" pure href="https://github.com/zeit-ui/react/blob/master/components/styles/themes/index.ts">here</Link>.
+If you don't use TypeScript, to learn more about preset types, see <Link color target="_blank" href="https://github.com/zeit-ui/react/blob/master/components/styles/themes/index.ts">here</Link>.
 
 
 <Spacer y={3} />
diff --git a/pages/zh-cn/components/badge.mdx b/pages/zh-cn/components/badge.mdx
index b7409f7..17dc9da 100644
--- a/pages/zh-cn/components/badge.mdx
+++ b/pages/zh-cn/components/badge.mdx
@@ -71,12 +71,12 @@ export const meta = {
   <Spacer inline x={1.5} />
   <Badge.Anchor>
     <Badge size="mini" type="error" dot />
-    <Link pure target="_blank" href="https://github.com/zeit-ui/react/">组件库</Link>
+    <Link target="_blank" href="https://github.com/zeit-ui/react/">组件库</Link>
   </Badge.Anchor>
   <Spacer inline x={1.5} />
   <Badge.Anchor>
     <Badge size="mini" type="error" dot style={{ padding: '7px' }} />
-    <Link pure target="_blank" href="https://github.com/zeit-ui/react/">分享链接</Link>
+    <Link target="_blank" href="https://github.com/zeit-ui/react/">分享链接</Link>
   </Badge.Anchor>
 </>
 `} />
diff --git a/pages/zh-cn/components/card.mdx b/pages/zh-cn/components/card.mdx
index 08fee5f..44f50cd 100644
--- a/pages/zh-cn/components/card.mdx
+++ b/pages/zh-cn/components/card.mdx
@@ -82,14 +82,14 @@ export const meta = {
     <h4>ZEIT UI React</h4>
     <p>现代化、极简风格的 UI 库。</p>
     <Card.Footer>
-      <Link pure color target="_blank" href="https://github.com/zeit-ui/react">在 GitHub 上查看源码</Link>
+      <Link color target="_blank" href="https://github.com/zeit-ui/react">在 GitHub 上查看源码</Link>
     </Card.Footer>
   </Card>
   <Card width="330px" type="dark">
     <h4>ZEIT UI React</h4>
     <p>现代化、极简风格的 UI 库。</p>
     <Card.Footer>
-      <Link pure target="_blank" href="https://github.com/zeit-ui/react">在 GitHub 上查看源码</Link>
+      <Link target="_blank" href="https://github.com/zeit-ui/react">在 GitHub 上查看源码</Link>
     </Card.Footer>
   </Card>
 </Row>
@@ -105,7 +105,7 @@ export const meta = {
   <Text h4 style={{ marginBottom: '0' }}>ZEIT UI React</Text>
   <Text type="secondary" small>现代化、极简风格的 UI 库。</Text>
   <Card.Footer>
-    <Link pure block target="_blank" href="https://github.com/zeit-ui/react">在 GitHub 上查看源码</Link>
+    <Link block target="_blank" href="https://github.com/zeit-ui/react">在 GitHub 上查看源码</Link>
   </Card.Footer>
 </Card>
 `} />
diff --git a/pages/zh-cn/components/code.mdx b/pages/zh-cn/components/code.mdx
index 6551f52..3617533 100644
--- a/pages/zh-cn/components/code.mdx
+++ b/pages/zh-cn/components/code.mdx
@@ -13,7 +13,7 @@ export const meta = {
 
 <Note label="提示">
 想要展示 <Code>Shell</Code> 代码片段或一个命令？
-可以试试 <NextLink href="/zh-cn/components/snippet"><Link pure color>Snippet / 片段</Link></NextLink> 组件。
+可以试试 <NextLink href="/zh-cn/components/snippet"><Link color>Snippet / 片段</Link></NextLink> 组件。
 </Note>
 
 <Playground
diff --git a/pages/zh-cn/components/link.mdx b/pages/zh-cn/components/link.mdx
index fe30d5e..76eb619 100644
--- a/pages/zh-cn/components/link.mdx
+++ b/pages/zh-cn/components/link.mdx
@@ -1,5 +1,5 @@
 import { Layout, Playground, Attributes } from 'lib/components'
-import { Link, Text, Code } from 'components'
+import { Link, Text, Code, Spacer } from 'components'
 import NextLink from 'next/link'
 
 export const meta = {
@@ -32,10 +32,22 @@ export const meta = {
   scope={{ Link, Text }}
   code={`
 <>
-  <Text><Link href="#" pure>通过使用指南和教程来学习如何用 React</Link></Text>
-  <Text><Link href="#" color pure>通过使用指南和教程来学习如何用 React</Link></Text>
-  <Text><Link href="#" pure underline>通过使用指南和教程来学习如何用 React</Link></Text>
+  <Text><Link href="#">严格模式通过抛出错误来消除了一些原有静默错误</Link></Text>
+  <Text><Link href="#" color>严格模式通过抛出错误来消除了一些原有静默错误</Link></Text>
   <Text><Link href="#" underline>通过使用指南和教程来学习如何用 React</Link></Text>
+  <Text><Link href="#" underline>通过使用指南和教程来学习如何用 React</Link></Text>
+</>
+`} />
+
+<Playground
+  title="图标"
+  desc="在链接中显示修饰图标。"
+  scope={{ Link, Spacer }}
+  code={`
+<>
+  <Link href="#" icon>通过使用指南和教程来学习如何用 React</Link>
+  <Spacer y={.5} />
+  <Link href="#" icon color>通过使用指南和教程来学习如何用 React</Link>
 </>
 `} />
 
@@ -44,7 +56,7 @@ export const meta = {
   desc="将链接单独作为一个块显示。"
   scope={{ Link }}
   code={`
-<Link href="#" pure block>通过使用指南和教程来学习如何用 React</Link>
+<Link href="#" block>请参阅转换成严格模式</Link>
 `} />
 
 <Playground
@@ -53,7 +65,7 @@ export const meta = {
   scope={{ Link, NextLink }}
   code={`
 <NextLink href="/zh-cn/components/button">
-  <Link pure block>Docs of Button</Link>
+  <Link block>浏览更多文档</Link>
 </NextLink>
 `} />
 
@@ -64,7 +76,7 @@ export const meta = {
 | ---------- | ---------- | ---- |  -------------- | ------ |
 | **href** | 链接地址 | `string` | - | - |
 | **color** | 是否高亮显示 | `boolean` | - | `false` |
-| **pure** | 隐藏图标，仅显示文本 | `boolean` | - | `false` |
+| **icon** |  在文本后显示图标 | `boolean` | - | `false` |
 | **underline** | 显示下划线 | `boolean` | - | `false` |
 | **block** | 是否以块的方式显示链接 | `boolean` | - | `false` |
 | ... | 原生属性 | `AnchorHTMLAttributes` | `'rel', 'target', ...` | - |
diff --git a/pages/zh-cn/components/modal.mdx b/pages/zh-cn/components/modal.mdx
index 24485a3..16229a1 100644
--- a/pages/zh-cn/components/modal.mdx
+++ b/pages/zh-cn/components/modal.mdx
@@ -14,7 +14,7 @@ export const meta = {
 
 <Note>
 仅仅需要弹出文本信息？
-试试 <NextLink href="/zh-cn/components/toast"><Link pure color>Toast / 通知</Link></NextLink> 组件。
+试试 <NextLink href="/zh-cn/components/toast"><Link color>Toast / 通知</Link></NextLink> 组件。
 </Note>
 
 <Playground
diff --git a/pages/zh-cn/components/popover.mdx b/pages/zh-cn/components/popover.mdx
index 6a733e3..eaa59de 100644
--- a/pages/zh-cn/components/popover.mdx
+++ b/pages/zh-cn/components/popover.mdx
@@ -18,9 +18,9 @@ export const meta = {
 () => {
   const content = () => (
     <div style={{ padding: '0 10px' }}>
-      <Link pure href="#">一个超链接</Link>
+      <Link href="#">一个超链接</Link>
       <Spacer y={.5} />
-      <Link pure color href="#">外部链接</Link>
+      <Link color href="#">外部链接</Link>
     </div>
   )
   return (
@@ -43,10 +43,10 @@ export const meta = {
         <span>用户设置</span>
       </Popover.Item>
       <Popover.Item>
-        <Link pure href="#">一个超链接</Link>
+        <Link href="#">一个超链接</Link>
       </Popover.Item>
       <Popover.Item>
-        <Link pure color href="#">前往修改用户配置</Link>
+        <Link color href="#">前往修改用户配置</Link>
       </Popover.Item>
       <Popover.Item line />
       <Popover.Item>
diff --git a/pages/zh-cn/components/tabs.mdx b/pages/zh-cn/components/tabs.mdx
index b5b66df..a780d02 100644
--- a/pages/zh-cn/components/tabs.mdx
+++ b/pages/zh-cn/components/tabs.mdx
@@ -41,7 +41,7 @@ export const meta = {
 <Tabs initialValue="1">
   <Tabs.Item label={<><TwitchIcon /> Twitch TV</>} value="1">
     <Text>你好，这是我们在 Twitch 的最新直播。</Text>
-    <Link href="https://github.com/zeit-ui/react" pure color rel="nofollow" target="_blank">点击这里浏览 GitHub 项目</Link>
+    <Link href="https://github.com/zeit-ui/react" color rel="nofollow" target="_blank">点击这里浏览 GitHub 项目</Link>
   </Tabs.Item>
   <Tabs.Item label={<><TwitterIcon /> Twitter </>} value="2">
     <Text>这个组件看起来还不错。</Text>
diff --git a/pages/zh-cn/components/tooltip.mdx b/pages/zh-cn/components/tooltip.mdx
index cd2d26f..5d520f8 100644
--- a/pages/zh-cn/components/tooltip.mdx
+++ b/pages/zh-cn/components/tooltip.mdx
@@ -42,7 +42,7 @@ export const meta = {
   </Tooltip>
   <Spacer inline x={1} />
   <Tooltip text={'缓存是达到高性能的重要组成部分'} type="dark">
-    <Link href="#" color pure>超链接</Link>
+    <Link href="#" color>超链接</Link>
   </Tooltip>
 </Row>
 `} />
diff --git a/pages/zh-cn/components/use-body-scroll.mdx b/pages/zh-cn/components/use-body-scroll.mdx
index a49584c..5a78059 100644
--- a/pages/zh-cn/components/use-body-scroll.mdx
+++ b/pages/zh-cn/components/use-body-scroll.mdx
@@ -10,7 +10,7 @@ export const meta = {
 
 禁用 `Body` 或其他任何元素的滚动，这在显示弹窗或菜单时非常有帮助。
 
-这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
+这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
 
 <Spacer y={1.5} />
 
diff --git a/pages/zh-cn/components/use-click-away.mdx b/pages/zh-cn/components/use-click-away.mdx
index 76cecb9..0143b65 100644
--- a/pages/zh-cn/components/use-click-away.mdx
+++ b/pages/zh-cn/components/use-click-away.mdx
@@ -1,5 +1,5 @@
 import { Layout, Playground, Attributes } from 'lib/components'
-import { Utils, Link, Card } from 'components'
+import { Utils, Link, Card, Spacer } from 'components'
 
 export const meta = {
   title: '点击他处 useClickAway',
@@ -10,7 +10,7 @@ export const meta = {
 
 检测点击事件是否在元素之外。
 
-这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
+这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
 
 <Spacer y={1.5} />
 
diff --git a/pages/zh-cn/components/use-clipboard.mdx b/pages/zh-cn/components/use-clipboard.mdx
index 3d0646a..31ed20d 100644
--- a/pages/zh-cn/components/use-clipboard.mdx
+++ b/pages/zh-cn/components/use-clipboard.mdx
@@ -1,5 +1,5 @@
 import { Layout, Playground, Attributes } from 'lib/components'
-import { Utils, Link, Button, useToasts } from 'components'
+import { Utils, Link, Button, useToasts, Spacer } from 'components'
 
 export const meta = {
   title: '剪切板 useClipboard',
@@ -10,7 +10,7 @@ export const meta = {
 
 拷贝字符串到剪切板。
 
-这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
+这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
 
 <Spacer y={1.5} />
 
diff --git a/pages/zh-cn/components/use-current-state.mdx b/pages/zh-cn/components/use-current-state.mdx
index 6780ac4..ac9cab7 100644
--- a/pages/zh-cn/components/use-current-state.mdx
+++ b/pages/zh-cn/components/use-current-state.mdx
@@ -1,5 +1,5 @@
 import { Layout, Playground, Attributes } from 'lib/components'
-import { Utils, Link, Button } from 'components'
+import { Utils, Link, Button, Spacer } from 'components'
 
 export const meta = {
   title: ' 当前值 useCurrentState',
@@ -11,9 +11,9 @@ export const meta = {
 在函数式组件内获取 **最新的值**。默认场景下，React 函数式组件只能获取渲染当时 `state` 的值，这并非是最新的。
 
 这是一个获取最新值的小工具，它在你进行像 `setTimeout` 等异步工作时会非常有用。但如果你喜欢更大的解决方案，
-请试试 <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-reference.html#usereducer">useReducer</Link>。
+请试试 <Link target="_blank" color href="https://reactjs.org/docs/hooks-reference.html#usereducer">useReducer</Link>。
 
-这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
+这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
 
 <Spacer y={1.5} />
 
diff --git a/pages/zh-cn/guide/installation.mdx b/pages/zh-cn/guide/installation.mdx
index d9da2ed..3e86967 100644
--- a/pages/zh-cn/guide/installation.mdx
+++ b/pages/zh-cn/guide/installation.mdx
@@ -12,8 +12,8 @@ export const meta = {
 ### 从包管理器安装
 
 <Note>
-请确认你的 <Link pure href="https://nodejs.org/en/download/">NodeJS</Link> 处于最新版本，
-同时还需要准备包管理器: <Link pure href="https://www.npmjs.com/">NPM</Link> 或是 <Link pure href="https://yarnpkg.com/">Yarn</Link>.
+请确认你的 <Link href="https://nodejs.org/en/download/">NodeJS</Link> 处于最新版本，
+同时还需要准备包管理器: <Link href="https://www.npmjs.com/">NPM</Link> 或是 <Link href="https://yarnpkg.com/">Yarn</Link>.
 </Note>
 <Spacer y={1} />
 <Dot type="success" /> 1. 运行命令下载包:
@@ -79,10 +79,10 @@ const MyComponent = () => <Button>Click Me</Button>
 
 ### 使用 Create React App
 
-使用 <Link pure color target="_blank" rel="nofollow" href="https://github.com/facebook/create-react-app">create-react-app</Link> 创建的 React 项目也能轻易的使用 `@zeit-ui/react`。
+使用 <Link color target="_blank" rel="nofollow" href="https://github.com/facebook/create-react-app">create-react-app</Link> 创建的 React 项目也能轻易的使用 `@zeit-ui/react`。
 你不需要做任何改变，只需要引入组件库即可。
 
-我们准备了 <Link target="_blank" pure color rel="nofollow" href="https://github.com/zeit-ui/react-getting-started">一个用 create react app 创建的示例项目</Link> 供作参考。
+我们准备了 <Link target="_blank" color rel="nofollow" href="https://github.com/zeit-ui/react-getting-started">一个用 create react app 创建的示例项目</Link> 供作参考。
 
 
 
diff --git a/pages/zh-cn/guide/introduction.mdx b/pages/zh-cn/guide/introduction.mdx
index 49a62ff..96fd9fd 100644
--- a/pages/zh-cn/guide/introduction.mdx
+++ b/pages/zh-cn/guide/introduction.mdx
@@ -12,8 +12,8 @@ export const meta = {
 
 ### 什么是 ZEIT UI - React
 
-`@zeit-ui/react` 是对 <Link rel="nofollow" target="_blank" pure href="https://github.com/zeit-ui/zeit-style">ZEIT 样式库</Link> 的一个 React 版本实现，
-灵感来自于 <Link rel="nofollow" target="_blank" pure href="https://vercel.co/design">Vercel 的设计稿</Link>。
+`@zeit-ui/react` 是对 <Link rel="nofollow" target="_blank" href="https://github.com/zeit-ui/zeit-style">ZEIT 样式库</Link> 的一个 React 版本实现，
+灵感来自于 <Link rel="nofollow" target="_blank" href="https://vercel.co/design">Vercel 的设计稿</Link>。
 
 Vercel 的设计非常简洁美观，且有浓厚的 Geek 风格，这是 Vercel 如此受欢迎的重要原因，现在你可以在 React 中随意使用所有设计元素。
 
@@ -23,8 +23,8 @@ ZEIT UI 是非官方的组织，且所有项目都是开源的。
 
 ### 联系我们
 
-- <Link pure color target="_blank" rel="nofollow" href="https://spectrum.chat/zeit-ui/general?tab=posts">在 Spectrum 上聊天</Link>
-- <Link pure color target="_blank" rel="nofollow" href="https://github.com/zeit-ui/react/issues/new">报告问题</Link>
+- <Link color target="_blank" rel="nofollow" href="https://spectrum.chat/zeit-ui/general?tab=posts">在 Spectrum 上聊天</Link>
+- <Link color target="_blank" rel="nofollow" href="https://github.com/zeit-ui/react/issues/new">报告问题</Link>
 - 我们非常欢迎来自任何人有趣的想法或反馈，也欢迎你贡献代码。
 
 <Spacer y={3} />
diff --git a/pages/zh-cn/guide/server-render.mdx b/pages/zh-cn/guide/server-render.mdx
index 27c7b6a..729ecb0 100644
--- a/pages/zh-cn/guide/server-render.mdx
+++ b/pages/zh-cn/guide/server-render.mdx
@@ -15,19 +15,19 @@ export const meta = {
 `@zeit-ui/react` 的所有组件都能完美的适应 **服务端渲染**，实际上，你现在所见的文档站点就是来自服务端渲染。
 
 <Note label="阅读提示">
- 如果你只想创建 <Link href="https://en.wikipedia.org/wiki/Single-page_application" rel="nofollow" pure underline>一个 SPA 应用</Link>，
+ 如果你只想创建 <Link href="https://en.wikipedia.org/wiki/Single-page_application" rel="nofollow" underline>一个 SPA 应用</Link>，
   建议跳过此章节。
 </Note>
 
 <Spacer y={.5} />
 
 使用服务端渲染会让我们的应用失去 SPA 的所有优势吗？或许你可以考虑 `hybrid render` (混合渲染) 的应用，
-阅读 <Link pure color href="https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support" rel="nofollow">
+阅读 <Link color href="https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support" rel="nofollow">
 这篇来自 Next.js 团队的文章</Link> 了解更多细节。
 
 <Text>除此之外，关于 <Text b>服务端渲染</Text> 和 Web 应用的细节考量，
 我们强烈推荐你阅读这篇来自 <Text em>Guillermo Rauch</Text> 的著名博文：
-<Link pure color href="https://rauchg.com/2014/7-principles-of-rich-web-applications" rel="nofollow" target="_blank">
+<Link color href="https://rauchg.com/2014/7-principles-of-rich-web-applications" rel="nofollow" target="_blank">
   构建 Web 应用的 7 原则
 </Link>。
 </Text>
diff --git a/pages/zh-cn/guide/themes.mdx b/pages/zh-cn/guide/themes.mdx
index a6bbc70..2fdcbce 100644
--- a/pages/zh-cn/guide/themes.mdx
+++ b/pages/zh-cn/guide/themes.mdx
@@ -50,7 +50,7 @@ const App = () => {
 ### 自定义主题
 
 自定义主题样式在 `@zeit-ui/react` 中是非常简单的，你只需要提供一个新的样式对象给 `ZEITUIProvider`，所有的组件都会自然变化以适应你自定义的属性。
-这里有 <Link target="_blank" pure color href="https://github.com/zeit-ui/react/tree/master/examples/custom-themes">一个完整的示例项目</Link> 可供参考。
+这里有 <Link target="_blank" color href="https://github.com/zeit-ui/react/tree/master/examples/custom-themes">一个完整的示例项目</Link> 可供参考。
 
 
 当然，如果一个组件未使用到你自定义的变量，它不会发生任何变化也不会重新渲染。
@@ -95,7 +95,7 @@ const myStyles: ZeitUIThemes = { /* ... */ }
 const myPalette: Partial<ZeitUIThemesPalette> = { /* ... */ }
 ```
 
-如果你没有使用 TypeScript，想要了解更多的预置类型，请看<Link color target="_blank" pure href="https://github.com/zeit-ui/react/blob/master/components/styles/themes/index.ts">这里的类型声明文件</Link>。
+如果你没有使用 TypeScript，想要了解更多的预置类型，请看<Link color target="_blank" href="https://github.com/zeit-ui/react/blob/master/components/styles/themes/index.ts">这里的类型声明文件</Link>。
 
 <Spacer y={3} />