Icons & Images

Add cloud provider icons, Tabler icons, and custom images to your diagrams. Create professional cloud architecture diagrams with official AWS, Azure, and GCP icons.

Cloud Architecture Ready

Privacy Sketch includes official icon sets from major cloud providers, making it perfect for architecture diagrams and system designs.

Available Icon Libraries

☁️

AWS

Amazon Web Services icons
EC2, S3, Lambda, RDS, etc.

🔷

Azure

Microsoft Azure icons
VMs, Storage, Functions, etc.

🌐

GCP

Google Cloud Platform icons
Compute, BigQuery, Cloud Run, etc.

⭐

Tabler

6,000+ general purpose icons
UI, actions, objects, etc.

Cloud Provider Icons

Use the cloudIcon type to add AWS, Azure, or GCP icons:

Property Type Description
type string "cloudIcon"
provider string "aws", "azure", or "gcp"
iconName string Icon name (e.g., "ec2", "lambda", "s3")

AWS Icon Example

{
  "type": "cloudIcon",
  "id": "aws-lambda",
  "x": 100,
  "y": 100,
  "w": 64,
  "h": 64,
  "provider": "aws",
  "iconName": "lambda"
}

Azure Icon Example

{
  "type": "cloudIcon",
  "id": "azure-vm",
  "x": 200,
  "y": 100,
  "w": 64,
  "h": 64,
  "provider": "azure",
  "iconName": "virtual-machine"
}

GCP Icon Example

{
  "type": "cloudIcon",
  "id": "gcp-bigquery",
  "x": 300,
  "y": 100,
  "w": 64,
  "h": 64,
  "provider": "gcp",
  "iconName": "bigquery"
}

Common AWS Icons

Icon Name Service
ec2 Elastic Compute Cloud
s3 Simple Storage Service
lambda Lambda Functions
rds Relational Database Service
dynamodb DynamoDB
api-gateway API Gateway
cloudfront CloudFront CDN
sqs Simple Queue Service
sns Simple Notification Service
vpc Virtual Private Cloud

Tabler Icons

Use the tablerIcon type for 6,000+ general-purpose icons:

Property Type Description
type string "tablerIcon"
iconName string Icon name (e.g., "user", "check", "star")
iconStyle string "outline" or "filled" 
{
  "type": "tablerIcon",
  "id": "icon-check",
  "x": 100,
  "y": 100,
  "w": 48,
  "h": 48,
  "iconName": "check",
  "iconStyle": "outline",
  "options": {
    "stroke": "#22c55e"
  }
}

Popular Tabler Icons

Icon Name Description
user, users Person/people
check, x Check/close
star, heart Star/heart
settings, adjustments Settings/config
database, server Data/infrastructure
code, terminal Development
mail, message Communication
home, building Locations
Icon Picker in UI

Click the Icons button in the toolbar to browse and search all available icons visually.

Custom Images

Add your own images (logos, screenshots, photos) to diagrams using the image type:

Property Type Description
type string "image"
src string Image URL or base64 data URL 
{
  "type": "image",
  "id": "logo",
  "x": 100,
  "y": 100,
  "w": 200,
  "h": 100,
  "src": "https://example.com/logo.png"
}

Adding Images via UI

  1. Click the Image button in the toolbar
  2. Select an image file from your computer
  3. The image is added to the canvas and can be moved/resized
Privacy First

Images are converted to base64 and stored locally. Your images never leave your browser.

Example: Cloud Architecture Diagram

{
  "elements": [
    // User
    { "type": "tablerIcon", "id": "user", "x": 50, "y": 150, "w": 48, "h": 48,
      "iconName": "user", "options": { "stroke": "#1e293b" } },
    
    // Arrow to API Gateway
    { "type": "arrow", "id": "arr1", "x": 110, "y": 174, "w": 60, "h": 1 },
    
    // API Gateway
    { "type": "cloudIcon", "id": "apigw", "x": 180, "y": 150, "w": 48, "h": 48,
      "provider": "aws", "iconName": "api-gateway" },
    
    // Arrow to Lambda
    { "type": "arrow", "id": "arr2", "x": 240, "y": 174, "w": 60, "h": 1 },
    
    // Lambda Function
    { "type": "cloudIcon", "id": "lambda", "x": 310, "y": 150, "w": 48, "h": 48,
      "provider": "aws", "iconName": "lambda" },
    
    // Arrow to DynamoDB
    { "type": "arrow", "id": "arr3", "x": 370, "y": 174, "w": 60, "h": 1 },
    
    // DynamoDB
    { "type": "cloudIcon", "id": "dynamo", "x": 440, "y": 150, "w": 48, "h": 48,
      "provider": "aws", "iconName": "dynamodb" }
  ]
}