> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nativeline.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# #image — Add Images

> Import images directly into your app's asset catalog

The `#image` command adds images to your Xcode asset catalog so your app can reference them by name anywhere in your code. Whether it's an app icon, a background photo, or a custom illustration, this is how you get images into your app.

## What It Does

When you use `#image`, the AI takes your selected image and:

1. Adds it to your project's **asset catalog** (Assets.xcassets)
2. Names it based on your description or the original filename
3. References it in your SwiftUI views wherever you specify

Your image becomes a first-class asset in your Xcode project, available through `Image("name")` in SwiftUI.

## Supported Formats

| Format   | Best for                                       | Notes                              |
| -------- | ---------------------------------------------- | ---------------------------------- |
| **PNG**  | Icons, UI elements, graphics with transparency | Lossless quality, supports alpha   |
| **JPEG** | Photos, backgrounds                            | Smaller file size, no transparency |
| **GIF**  | Simple animated images                         | Limited color palette              |
| **HEIC** | High-efficiency photos                         | Apple's modern photo format        |
| **TIFF** | High-quality source images                     | Large file size                    |
| **BMP**  | Legacy bitmap images                           | Uncompressed                       |
| **SVG**  | Vector graphics, scalable icons                | Resolution-independent             |

## How to Use

<Steps>
  <Step title="Type #image in the chat">
    Type `#` and select **image** from the toolkit popover.
  </Step>

  <Step title="Select your image">
    The file picker opens, filtered to supported image formats. Choose the image you want to add.
  </Step>

  <Step title="Describe how to use it">
    The image appears as an orange chip below the input. Type a description of where the image should go in your app.
  </Step>

  <Step title="Send your message">
    Press Enter. The AI adds the image to your asset catalog and uses it in your app as described.
  </Step>
</Steps>

## Example Prompts

```
Use this as the app's background image
```

```
This is the logo, display it at 120x120 on the splash screen
```

```
Add this icon for the settings tab
```

```
Place this illustration in the center of the empty state view
```

```
Use this as the profile placeholder image
```

## Tips for Best Results

<AccordionGroup>
  <Accordion title="Use PNG for icons and UI elements">
    PNG supports transparency and keeps edges crisp — ideal for icons, buttons, and interface graphics.
  </Accordion>

  <Accordion title="Use JPEG for photos">
    JPEG files are significantly smaller than PNG for photographic content. Use them for backgrounds, hero images, and any photo-based assets.
  </Accordion>

  <Accordion title="SVG works great for scalable graphics">
    SVG files are vector-based, so they look sharp at any size. Perfect for icons and illustrations that need to scale across different devices.
  </Accordion>

  <Accordion title="Name your files descriptively before importing">
    The original filename often becomes the asset name. A file called `settings-icon.png` is much easier to work with than `IMG_4392.png`.
  </Accordion>
</AccordionGroup>

<Note>
  `#image` adds the file to your app bundle. If you want to show the AI a design mockup or reference screenshot, drag-and-drop the image directly into the chat instead. Drag-and-drop images are seen by the AI but not added to your project.
</Note>

## Related

<CardGroup cols={2}>
  <Card title="Toolkit Overview" icon="grid-2" href="/toolkit/overview">
    See all available # commands and how the toolkit works.
  </Card>

  <Card title="Using Images" icon="image" href="/features/using-images">
    Learn more about how Nativeline handles images in your projects.
  </Card>
</CardGroup>