114 lines
3.3 KiB
Markdown
114 lines
3.3 KiB
Markdown
# 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](https://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!)
|