# Snippy Blocks Icons

## TinyMCE Button Icon

### Current Implementation
- **PNG Icon**: `snippy-icon.png` - Custom designed [S] logo icon
- **CSS Method**: External PNG file for crisp display

### Icon Design
- 16x16px [S] logo icon with blue bracket styling
- Colors: Blue gradient matching brand identity
- Clean, modern design that represents "Snippy" brand

### Alternative Methods

#### Using External PNG (16x16px recommended)
```css
.mce-i-snippy_blocks:before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('../icons/snippy-icon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
}
```

#### Using External SVG
```css
.mce-i-snippy_blocks:before {
    background-image: url('../icons/snippy-icon.svg');
}
```

### Icon Requirements
- **Size**: 16x16px (standard TinyMCE button size)
- **Format**: SVG (preferred) or PNG
- **Colors**: Should work with both light and dark editor themes
- **Style**: Simple, clear, recognizable at small size

### Creating Your Own Icon
1. Design 16x16px icon in your favorite editor
2. Save as PNG or SVG
3. Place in `/assets/icons/` folder  
4. Update CSS to reference your file
5. Test in both Classic Editor and Block Editor