> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt.

## Custom SVG icons in card and icon components

components, customization

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. Paths are relative to the page where the component is used.

**`Markdown`**

```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
```

Read the docs