From a81dc79b63afde94f5d28e3d25aa824eec6d62b9 Mon Sep 17 00:00:00 2001
From: Minae Lee <minae.lee@gmail.com>
Date: Wed, 28 Feb 2024 22:56:02 -0700
Subject: [PATCH] docs: add info on new icon component (#3079)

---
 .../fern-docs/content/components/icons.mdx    | 77 ++++++++++++++++++-
 1 file changed, 73 insertions(+), 4 deletions(-)

diff --git a/fern/docs/pages/fern-docs/content/components/icons.mdx b/fern/docs/pages/fern-docs/content/components/icons.mdx
index 92ac686e86a..5e606af3e9e 100644
--- a/fern/docs/pages/fern-docs/content/components/icons.mdx
+++ b/fern/docs/pages/fern-docs/content/components/icons.mdx
@@ -3,15 +3,84 @@ title: Fern | Using Font Awesome icons or custom icons in Fern Docs
 description: Use and style the 26,000+ icons available in the Font Awesome icon library in your Fern Docs. Fern also supports custom icons on its Business plan.
 ---
 
+The `Icon` component is used to display and style an icon. We use Font Awesome to power the icons within Fern Docs.
 
-[Font Awesome](https://fontawesome.com/) is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators. We use Font Awesome to power the icons within Fern Docs. 
+Icon props:
 
-You can pick from the 26,000+ icons available and then apply a style, color, size, or animation to them.
+- *icon*: string - Font Awesome icon 
+- *color*: string - icon CSS color, such as `"green"` or `"#008000"`
+- *size*: `{`integer`}` - icon size
+
+Example:
+
+<CodeBlock title="Example">
+```mdx
+<Icon icon="check" color="green" size={6} />
+```
+</CodeBlock>
+
+This will render as:
+<Icon icon="check" color="green" size={6}/>
+
+## Set icon and style
+
+[Font Awesome](https://fontawesome.com/) is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators. Fern Docs gives you access to all the icons available under the Font Awesome Pro plan.
+
+<Callout intent="warn">
+Fern does not support the `SVG+JS` method.
+</Callout>
+
+To set the `icon` type and style, you can use the Font Awesome syntax:
+
+<CodeBlock title="Example with Font Awesome syntax">
+```mdx
+<Icon icon="fa-solid fa-check" color="green" size={6} />
+```
+</CodeBlock>
+
+This renders as:
+<Icon icon="fa-solid fa-check" color="green" size={6} />
+
+You can omit the `fa-` prefix, and the default icon style is `fa-solid`. Thus, you can simplify the prop like this:
+
+<CodeBlock title="Simplified example with default style">
+```mdx
+<Icon icon="check" color="green" size={6} />
+```
+</CodeBlock>
+
+You can use other Font Awesome icon styles:
+
+<CodeBlock title="Simplified example with light style">
+```mdx
+<Icon icon="light check" color="green" size={6} />
+```
+</CodeBlock>
+
+This renders as:
+<Icon icon="light check" color="green" size={6} />
+
+View the sidebar at [Font Awesome's icon search page](https://fontawesome.com/search) for available styles.
+
+### Set icon size
+
+For the size prop, the value of 1 is equal to 0.25rem, which translates to 4px by default in common browsers. The default size value is 4, which translates to 16x16px.
+
+For example, to display an icon that's double the default size (36x36px), use `size={8}`:
+
+<CodeBlock title="Size example">
+```mdx
+<Icon icon="check" color="green" size={8} />
+```
+</CodeBlock>
+
+This renders as:
+<Icon icon="check" color="green" size={8} />
+
+## Custom icons
 
 If you'd like to B.Y.O.I. (Bring Your Own Icons), reach out to us at [support@buildwithfern.com](mailto:support@buildwithfern.com). This is a paid feature available on our `Business plan`.
 
-## Styling icons
 
-Font Awesome icons can be styled to really make your project look its best. You can pick icons that are avaiable under the `Pro` plan. Fern does not support the `SVG+JS` method.