# Azure Icons Usage Examples

This document provides examples of how to use Azure Architecture Icons in various scenarios.

## Diagram Tools

### Draw.io / diagrams.net

#### Import Icons

1. Open [Draw.io](https://app.diagrams.net/)
2. Click "More Shapes" (bottom left)
3. Click "+" to add a new library
4. Select "From Device"
5. Navigate to `assets/azure-icons/svg/`
6. Select icons (you can select multiple)
7. Click "Create"

#### Use Icons in Diagram

1. Icons will appear in the left panel
2. Drag and drop icons onto the canvas
3. Resize and customize as needed
4. Connect icons with arrows to show relationships

#### Export Diagram

1. File → Export as → SVG/PNG/PDF
2. Choose export options
3. Save to `assets/diagrams/architecture/`

### Lucidchart

#### Import Icons

1. Open Lucidchart
2. Click "Shapes" → "Import"
3. Select "From File"
4. Navigate to `assets/azure-icons/svg/`
5. Select icons to import
6. Icons will appear in your shape library

#### Use Icons

1. Drag icons from the shape library
2. Customize colors and styles
3. Connect with lines and arrows
4. Add labels and descriptions

### Visio

#### Import Azure Stencils

1. Open Microsoft Visio
2. File → Shapes → My Shapes → Import
3. Navigate to `assets/azure-icons/svg/`
4. Select icons to import
5. Icons will appear in your stencil

#### Use Icons

1. Drag icons from the stencil
2. Customize using Visio tools
3. Connect with connectors
4. Apply themes and styles

## Documentation

### Markdown

```markdown
![Azure Kubernetes Service](assets/azure-icons/svg/Icon-service-kubernetes-Azure.svg)

![Virtual Network](assets/azure-icons/svg/Icon-service-virtual-network-Azure.svg)
```

### HTML

```html
<img src="assets/azure-icons/svg/Icon-service-kubernetes-Azure.svg" alt="Azure Kubernetes Service" width="64" height="64">

<img src="assets/azure-icons/svg/Icon-service-virtual-network-Azure.svg" alt="Virtual Network" width="64" height="64">
```

### LaTeX

```latex
\includegraphics[width=0.1\textwidth]{assets/azure-icons/svg/Icon-service-kubernetes-Azure.svg}
```

## Presentations

### PowerPoint

1. Insert → Pictures → This Device
2. Navigate to `assets/azure-icons/png/`
3. Select PNG icons (better for presentations)
4. Insert and resize as needed

### Keynote

1. Insert → Choose
2. Navigate to `assets/azure-icons/png/`
3. Select PNG icons
4. Insert and customize

## Architecture Diagrams

### High-Level Architecture

```
┌─────────────────────────────────────────┐
│         Azure Subscription              │
│                                         │
│  ┌──────────────────────────────────┐  │
│  │     Azure Kubernetes Service     │  │
│  │  ┌──────────┐  ┌──────────┐    │  │
│  │  │Validator │  │  Sentry  │    │  │
│  │  └──────────┘  └──────────┘    │  │
│  │  ┌──────────┐                  │  │
│  │  │ RPC Node │                  │  │
│  │  └──────────┘                  │  │
│  └──────────────────────────────────┘  │
│                                         │
│  ┌──────────────────────────────────┐  │
│  │         Key Vault                │  │
│  └──────────────────────────────────┘  │
│                                         │
│  ┌──────────────────────────────────┐  │
│  │      Storage Account             │  │
│  └──────────────────────────────────┘  │
└─────────────────────────────────────────┘
```

### Network Architecture

```
┌─────────────────────────────────────────┐
│      Virtual Network (10.0.0.0/16)      │
│                                         │
│  ┌────────────┐  ┌────────────┐       │
│  │ AKS Subnet │  │ Validators │       │
│  │ 10.0.1.0/24│  │ 10.0.2.0/24│       │
│  └────────────┘  └────────────┘       │
│                                         │
│  ┌────────────┐  ┌────────────┐       │
│  │  Sentries  │  │ RPC Subnet │       │
│  │ 10.0.3.0/24│  │ 10.0.4.0/24│       │
│  └────────────┘  └────────────┘       │
│                                         │
│  ┌────────────┐                        │
│  │App Gateway │                        │
│  │ 10.0.5.0/24│                        │
│  └────────────┘                        │
└─────────────────────────────────────────┘
```

## Icon Sizes

### Recommended Sizes

- **Small**: 32x32 pixels (for small diagrams)
- **Medium**: 64x64 pixels (for standard diagrams)
- **Large**: 128x128 pixels (for detailed diagrams)
- **Extra Large**: 256x256 pixels (for presentations)

### Scaling SVG Icons

SVG icons can be scaled without loss of quality:
- Use SVG for all diagrams
- Scale to any size needed
- Maintain aspect ratio

## Color Customization

### Azure Brand Colors

- **Azure Blue**: #0078D4
- **Azure Dark Blue**: #005A9E
- **Azure Light Blue**: #00BCF2

### Customizing Icons

1. Open SVG icon in vector editor (Inkscape, Illustrator)
2. Modify colors as needed
3. Save as new file
4. Place in `assets/azure-icons/svg/`
5. Update `icon-mapping.json`

## Best Practices

### Icon Selection

1. **Use Appropriate Icons**: Choose icons that represent the service accurately
2. **Maintain Consistency**: Use the same icon style across all diagrams
3. **Use Official Icons**: Always use official Azure icons
4. **Label Icons**: Label all icons clearly
5. **Group Related Icons**: Group related icons together

### Diagram Design

1. **Keep It Simple**: Focus on key components
2. **Use Legends**: Add legends for complex diagrams
3. **Show Relationships**: Show connections with arrows
4. **Use Colors**: Use colors to distinguish components
5. **Maintain Hierarchy**: Show component hierarchy clearly

### Documentation

1. **Include Descriptions**: Add descriptions to diagrams
2. **Update Regularly**: Update diagrams when architecture changes
3. **Version Control**: Keep diagrams in version control
4. **Link to Documentation**: Link diagrams to relevant documentation
5. **Provide Context**: Provide context for diagrams

## Examples

### Example 1: Simple Architecture

```
[Internet] → [Application Gateway] → [AKS] → [Key Vault]
                                           → [Storage Account]
```

### Example 2: Network Topology

```
[VNet] → [AKS Subnet] → [Validator Nodes]
      → [Sentry Subnet] → [Sentry Nodes]
      → [RPC Subnet] → [RPC Nodes]
```

### Example 3: Data Flow

```
[Client] → [Application Gateway] → [RPC Node] → [Besu Network]
                                                → [Oracle Publisher]
                                                → [Key Vault]
```

## References

- [Assets Guide](../../docs/ASSETS_GUIDE.md)
- [Architecture Diagrams Guide](../../docs/ARCHITECTURE_DIAGRAMS.md)
- [Icon Catalog](icon-catalog.md)
- [Icon Mapping](icon-mapping.json)
- [Azure Architecture Center](https://docs.microsoft.com/azure/architecture/)