bookshelf/books_flutter/assets/icon/ICON_SPECS.md

Open Book Icon - Exact Specifications

Design Layout (1024x1024px)

┌─────────────────────────────────┐
│                                 │
│         (padding: 150px)        │
│                                 │
│     ┌───────────────────┐      │
│     │                   │      │
│     │   📖 Open Book    │      │
│     │   White (#FFF)    │      │
│     │   ~700px width    │      │
│     │                   │      │
│     └───────────────────┘      │
│                                 │
│    Background: #0891B2          │
│                                 │
└─────────────────────────────────┘

Two Files Needed

1. app_icon.png (Complete Icon)

• Size: 1024x1024px
• Background: Solid cyan #0891B2
• Icon: White open book, centered
• Icon size: ~700px wide, maintains aspect ratio
• Padding: ~150px from edges

2. app_icon_foreground.png (Adaptive Icon Foreground)

• Size: 1024x1024px
• Background: Transparent
• Icon: Same white book as above
• Keep in "safe zone": center 66% of canvas (~676x676px)
• Android will add the cyan background automatically

---

Color Codes (Copy-Paste Ready)

• Cyan Background: #0891B2 or rgb(8, 145, 178)
• Icon Color: #FFFFFF or rgb(255, 255, 255)

---

Recommended Free Book Icons (Download & Use)

Option A: Heroicons Book-Open (Clean, Modern)

• URL: https://heroicons.com
• Search: "book-open"
• Style: Outline (recommended) or Solid
• License: MIT (free to use)

Option B: Lucide Book-Open (Minimal)

• URL: https://lucide.dev/icons/book-open
• Very clean, minimal design
• License: ISC (free to use)

Option C: Bootstrap Icons Book (Simple)

• URL: https://icons.getbootstrap.com/icons/book/
• Several book variants available
• License: MIT

---

Quick Canva Instructions

1. Create design:

   • Go to Canva → "Custom size" → 1024 x 1024

2. Version 1 (app_icon.png):

   • Background: Click background → Color → #0891B2
   • Elements → Upload downloaded SVG book icon
   • Change icon color to white
   • Resize to 600-700px, center it
   • Download → PNG → save as app_icon.png

3. Version 2 (app_icon_foreground.png):

   • Duplicate the design
   • Remove background (make transparent)
   • Keep only the white book
   • Download → PNG → check "Transparent background"
   • Save as app_icon_foreground.png

---

What the Final Icon Will Look Like

On Home Screen:

• iOS: Rounded square with cyan background + white book
• Android (modern): Adaptive shape (circle/squircle/square) with cyan background + white book
• Android (old): Rounded square like iOS

Visual Balance:

• Book icon should be easily recognizable even at 40x40px
• Good contrast ensures readability
• White on cyan matches your app's Material 3 theme

---

Alternative: Use Icon Generator

If you prefer automated approach:

1. Go to icon.kitchen
2. Upload any book icon image
3. Set background color: #0891B2
4. Adjust size/position
5. Download all sizes

(But manual creation gives you more control!)