Skip to content

docs: document relative SVG path support for Card and Icon components #2910

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chdeskur merged 2 commits into from
Dec 20, 2025
Merged

docs: document relative SVG path support for Card and Icon components #2910

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2cae1ff
docs: document relative SVG path support for Card and Icon components
fern-api[bot] Dec 20, 2025
eafd7fc
fix: address Vale style suggestions for sentence-style capitalization
fern-api[bot] Dec 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions fern/products/docs/pages/changelog/2025-12-20.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
## Custom SVG icons in card and icon components

The Card and Icon components support relative paths to SVG files. Use a relative path like `./images/icon.svg` to display custom SVG icons from your project.

```jsx Markdown
<Card
title="Fern species"
icon="./images/fern-leaf.svg"
>
Card with a custom SVG icon.
</Card>

<Icon icon="./images/fern-leaf.svg" /> Custom SVG icon
```

Learn more about the [Card](/learn/docs/writing-content/components/cards) and [Icon](/learn/docs/writing-content/components/icons) components.
16 changes: 15 additions & 1 deletion fern/products/docs/pages/component-library/default-components/cards.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,8 @@ You can use individual cards or arrange multiple cards in a responsive grid layo

### Custom icon

You can use a custom icon by passing an image tag or a relative path to an SVG file.

<div className="highlight-frame">
<Card
title="Plant care"
Expand All @@ -125,6 +127,18 @@ You can use individual cards or arrange multiple cards in a responsive grid layo
</Card>
```

To use a relative path to an SVG file stored in your project:

```jsx Markdown
<Card
title="Fern species"
icon="./images/fern-leaf.svg"
href="/learn/docs/writing-content/components/cards"
>
Use a relative path to reference an SVG file in your project.
</Card>
```

### Custom icon position

<div className="highlight-frame">
Expand Down Expand Up @@ -226,7 +240,7 @@ Cards support displaying images alongside content. The image automatically resiz
The title text to display in the card
</ParamField>
<ParamField path="icon" type="string | img">
Either a [Font Awesome](https://fontawesome.com/icons) icon class (e.g. 'brands python') or a custom image
A [Font Awesome](https://fontawesome.com/icons) icon class (e.g. 'brands python'), a relative path to an SVG file (e.g. './images/icon.svg'), or a custom image element
</ParamField>
<ParamField path="href" type="string">
Optional URL that makes the entire card clickable
Expand Down
10 changes: 9 additions & 1 deletion fern/products/docs/pages/component-library/default-components/icons.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,10 +69,18 @@ The `<Icon>` component displays [Font Awesome](https://fontawesome.com/) icons i
<Icon icon="fa-brands fa-github" /> Brands
```

### Custom SVG icon
Copy link
Contributor

@github-actions github-actions bot Dec 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 [vale] reported by reviewdog 🐶
[FernStyles.Headings] 'Custom SVG icon' should use sentence-style capitalization.


Use a relative path to display a custom SVG file from your project.

```jsx Markdown
<Icon icon="./images/fern-leaf.svg" /> Custom SVG icon
```

## Properties

<ParamField path="icon" type="string" required={true}>
Name of the Font Awesome icon (e.g., "heart" or "fa-solid fa-heart")
A Font Awesome icon name (e.g., "heart" or "fa-solid fa-heart") or a relative path to an SVG file (e.g., "./images/icon.svg")
</ParamField>

<ParamField path="color" type="string">
Expand Down
Loading