---
title: Design
description: >-
  Minis should be designed and built with the following guiding principles in
  mind.
api_name: shop-minis
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/design'
  md: 'https://shopify.dev/docs/api/shop-minis/design.md'
---

# Design

Minis should be designed and built with the following guiding principles in mind.

***

## UX Principles

### Unambiguous purpose

Each Mini should possess a singular, well-defined objective. The user interface should reinforce this purpose with a single primary action per screen.

### Rapid initialization and clear progress indication

Minis should offer quick initialization paths (e.g. pre-filled content from collections). Progress indicators should be implemented for multi-step processes (e.g. avatar creation flows).

### Engaging functionality

Minis should be both utilitarian and engaging, encouraging user interaction through delightful design elements rather than solely focusing on basic functionality. Gamification techniques, social engagement loops, and visual feedback should be intuitive and non-intrusive.

### Personalization and shareability

User engagement should be fostered through personalization features, such as avatars, saved looks, and personalized analysis. Clear sharing functionalities should be provided to generate user-generated content (UGC) and links back to the Mini or Shop.

### Efficient completion and habit formation

Each Mini should be designed to encourage repeat usage through clear options for saving, revisiting, or continuing progress.

### Accessibility by design

Adherence to established mobile app design guidelines and accessibility best practices is essential, including the implementation of large tap targets, appropriate contrast ratios, and alt text for images. Keyboard navigation and screen reader support should be ensured where applicable.

### Standardized interaction patterns

Existing Shop Minis SDK components and common interaction patterns should be utilized whenever feasible. Established navigation conventions, including modals, bottom sheets, and swipe gestures, should be adhered to in order to minimize user friction.

### Preserve integrity

The established character and flow of the user experience, once recognized through approval, should be maintained. Any dynamic modifications post-approval that could notably redefine the user's learned interactions or the Mini's core behavior should be approached with careful consideration for user continuity and confidence.

***

## Design specifications

### Safe area

Minis should observe the designated safe areas and avoid placing internal navigation buttons or any other pertinent information that is vital to the Mini's necessary function, outside the safe area bounds.

***

## Icons

The Shop Minis SDK uses [Lucide](https://lucide.dev/) as its icon library. Lucide provides a comprehensive set of high-quality, open-source icons that are designed to be consistent, customizable, and accessible.

### Why Lucide?

* **Consistent Design**: All icons follow the same design principles and visual style
* **Customizable**: Easy to size, color, and style to match your design

### Prefer Icons Over Emojis

When building Shop Minis, **always prefer icons over emojis** for UI elements because icons render consistently across all platforms and devices.

### Get started

```bash
npx shop-minis install lucide-react
```

## Icon Usage

```tsx
import {Heart, AmpersandIcon, Pizza} from 'lucide-react'


export default function MyComponent() {
  return (
    <div className="flex m-2 gap-2 justify-center">
      <Pizza />
      <AmpersandIcon />
      <Heart />
    </div>
  )
}
```

***