> ## Documentation Index
> Fetch the complete documentation index at: https://subframe-59800133-claude-lucid-mccarthy-fexm3d.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Project settings

> Configure how Subframe generates and exports code for your project.

## Access project settings

<Frame>
  <img src="https://mintcdn.com/subframe-59800133-claude-lucid-mccarthy-fexm3d/zXt0lnDHdUjMT5yo/images/projects/project-settings-entrypoint.png?fit=max&auto=format&n=zXt0lnDHdUjMT5yo&q=85&s=80cde283fb2f1eebbd1c65eae9794ebf" alt="The Design System section in the left sidebar with the Configure code export gear icon highlighted" width="440" height="519" data-path="images/projects/project-settings-entrypoint.png" />
</Frame>

1. Open your project in the editor
2. In the left sidebar, find the **Design System** section
3. Click the **Configure code export** <Icon icon="settings" size={16} /> icon next to **Design System**

The **Code export settings** dialog opens.

<Frame>
  <img src="https://mintcdn.com/subframe-59800133-claude-lucid-mccarthy-fexm3d/zXt0lnDHdUjMT5yo/images/projects/project-settings.png?fit=max&auto=format&n=zXt0lnDHdUjMT5yo&q=85&s=5cd1fbaadea6c9f06d2e88347617ddac" alt="The Code export settings dialog showing import alias and icon import options" width="1028" height="920" data-path="images/projects/project-settings.png" />
</Frame>

## Import alias

Set the path prefix used for component imports in generated code.

**Default:** `@/ui/components`

This determines how import statements appear in your exported code:

```tsx theme={null}
import { Button } from "@/ui/components/Button"
```

Change this to match your project's directory structure and TypeScript path aliases.

## Icon imports

Choose how icons are imported in generated code.

#### Import as component

Icons are imported as React components:

```tsx theme={null}
import { FeatherIcon } from "@/ui/components/FeatherIcon"
```

```tsx theme={null}
<FeatherIcon name="check" />
```

#### Import as string

Icons are referenced by name as strings:

```tsx theme={null}
import { Icon } from "@/ui/components/Icon"
```

```tsx theme={null}
<Icon name="FeatherCheck" />
```

<Info>
  If your project has uploaded custom icons, you must use "Import as component". The string option is disabled when
  custom icons are present.
</Info>