heuzef
/
icon-collection
mirror da https://github.com/benc-uk/icon-collection.git

<html lang="en" class="notranslate" translate="no">
<head>
  <meta name="google" content="notranslate" />
  <title>Official Azure Icon Set</title>
  <link rel="icon" type="image/png" href="../favicon.png">
  <style>
    body {
      font-family: 'Segoe UI', Arial;
      background-color: #aaa;
      padding: 0;
      margin: 0;
    }
    .bg-0 {
      background-image: url("https://github.com/benc-uk/icon-collection/raw/master/_tools/background.png")
    }
    .bg-1 {
      background-color: #333;
    }
    .bg-2 {
      background-color: #fff;
    }
    .imgbox img { 
      width: 10.5rem;
      height: 10.5rem;
      object-fit: contain;
      cursor: pointer;
    }
    .imgbox {
      margin: 0.6rem;
      padding: 0.5rem;
      text-align: center;
      width: 12rem;
      height: 12rem;
      background-color: #e0e0e0;
    }
    h1 {
      font-size: 1.8rem;
    }
    .find, .find input {
      font-size: 1.1rem;
    }
    .top {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      background-color: rgb(211, 211, 211);
      padding: 0.2rem;
      padding-top: 0;
      box-shadow: 0px 5px 18px 3px rgba(0,0,0,0.59);
    }
    .top button {
      float: right; 
      position: absolute; 
      top: 0.2rem; 
      right: 0.2rem;
      font-size: 1rem;
      border-radius: 4px;
    }
    .pngbox {
      position: absolute; 
      top: 2rem; 
      right: 1rem;
      font-size: 0.9rem;
    }
    input[type="checkbox"] {
      width: 1.6em;
      height: 1.6em;
    }
    .label {
      height: 2.5em;
      line-height: 1em;
      overflow: hidden;
      font-size: 0.9rem;
    }
    .grid {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
    }
    h1 {
      display:inline;
    }
    .home {
      font-size: 2rem;
      text-decoration: none;
      color:rgb(99, 99, 99);
    }
  </style>  
</head>

<body>

  <div class="top">
    <a href=".." class="home">&#129093;</a> &nbsp; <h1>Official Azure Icon Set</h1>
    <br/>
    <span class="find">Finder: <input onkeyup="search()" id="finder">&nbsp; Icons: <span id="count">...</span></span> 
    <div class="pngbox"><input type="checkbox" id="pngcheck"><label for="pngcheck">Download as PNG</label></div>
    <button onclick="toggleBg()">Toggle Background</button>
  </div>

  <div class="grid">
    
      <div id="api-management-services.svg" class="imgbox"><img src="API-Management-Services.svg" class="bg-0" onclick="download('API-Management-Services.svg', this)"/><div class="label">API-Management-Services.svg</div></div>
    
      <div id="avs.svg" class="imgbox"><img src="AVS.svg" class="bg-0" onclick="download('AVS.svg', this)"/><div class="label">AVS.svg</div></div>
    
      <div id="active-directory-connect-health.svg" class="imgbox"><img src="Active-Directory-Connect-Health.svg" class="bg-0" onclick="download('Active-Directory-Connect-Health.svg', this)"/><div class="label">Active-Directory-Connect-Health.svg</div></div>
    
      <div id="activity-log.svg" class="imgbox"><img src="Activity-Log.svg" class="bg-0" onclick="download('Activity-Log.svg', this)"/><div class="label">Activity-Log.svg</div></div>
    
      <div id="advisor.svg" class="imgbox"><img src="Advisor.svg" class="bg-0" onclick="download('Advisor.svg', this)"/><div class="label">Advisor.svg</div></div>
    
      <div id="alerts.svg" class="imgbox"><img src="Alerts.svg" class="bg-0" onclick="download('Alerts.svg', this)"/><div class="label">Alerts.svg</div></div>
    
      <div id="all-resources.svg" class="imgbox"><img src="All-Resources.svg" class="bg-0" onclick="download('All-Resources.svg', this)"/><div class="label">All-Resources.svg</div></div>
    
      <div id="analysis-services.svg" class="imgbox"><img src="Analysis-Services.svg" class="bg-0" onclick="download('Analysis-Services.svg', this)"/><div class="label">Analysis-Services.svg</div></div>
    
      <div id="app-registrations.svg" class="imgbox"><img src="App-Registrations.svg" class="bg-0" onclick="download('App-Registrations.svg', this)"/><div class="label">App-Registrations.svg</div></div>
    
      <div id="app-service-certificates.svg" class="imgbox"><img src="App-Service-Certificates.svg" class="bg-0" onclick="download('App-Service-Certificates.svg', this)"/><div class="label">App-Service-Certificates.svg</div></div>
    
      <div id="app-service-domains.svg" class="imgbox"><img src="App-Service-Domains.svg" class="bg-0" onclick="download('App-Service-Domains.svg', this)"/><div class="label">App-Service-Domains.svg</div></div>
    
      <div id="app-service-environments.svg" class="imgbox"><img src="App-Service-Environments.svg" class="bg-0" onclick="download('App-Service-Environments.svg', this)"/><div class="label">App-Service-Environments.svg</div></div>
    
      <div id="app-service-plans.svg" class="imgbox"><img src="App-Service-Plans.svg" class="bg-0" onclick="download('App-Service-Plans.svg', this)"/><div class="label">App-Service-Plans.svg</div></div>
    
      <div id="app-services.svg" class="imgbox"><img src="App-Services.svg" class="bg-0" onclick="download('App-Services.svg', this)"/><div class="label">App-Services.svg</div></div>
    
      <div id="application-gateways.svg" class="imgbox"><img src="Application-Gateways.svg" class="bg-0" onclick="download('Application-Gateways.svg', this)"/><div class="label">Application-Gateways.svg</div></div>
    
      <div id="application-insights.svg" class="imgbox"><img src="Application-Insights.svg" class="bg-0" onclick="download('Application-Insights.svg', this)"/><div class="label">Application-Insights.svg</div></div>
    
      <div id="application-security-groups.svg" class="imgbox"><img src="Application-Security-Groups.svg" class="bg-0" onclick="download('Application-Security-Groups.svg', this)"/><div class="label">Application-Security-Groups.svg</div></div>
    
      <div id="automation-accounts.svg" class="imgbox"><img src="Automation-Accounts.svg" class="bg-0" onclick="download('Automation-Accounts.svg', this)"/><div class="label">Automation-Accounts.svg</div></div>
    
      <div id="availability-sets.svg" class="imgbox"><img src="Availability-Sets.svg" class="bg-0" onclick="download('Availability-Sets.svg', this)"/><div class="label">Availability-Sets.svg</div></div>
    
      <div id="azure-ad-domain-services.svg" class="imgbox"><img src="Azure-AD-Domain-Services.svg" class="bg-0" onclick="download('Azure-AD-Domain-Services.svg', this)"/><div class="label">Azure-AD-Domain-Services.svg</div></div>
    
      <div id="azure-active-directory.svg" class="imgbox"><img src="Azure-Active-Directory.svg" class="bg-0" onclick="download('Azure-Active-Directory.svg', this)"/><div class="label">Azure-Active-Directory.svg</div></div>
    
      <div id="azure-arc.svg" class="imgbox"><img src="Azure-Arc.svg" class="bg-0" onclick="download('Azure-Arc.svg', this)"/><div class="label">Azure-Arc.svg</div></div>
    
      <div id="azure-blockchain-service.svg" class="imgbox"><img src="Azure-Blockchain-Service.svg" class="bg-0" onclick="download('Azure-Blockchain-Service.svg', this)"/><div class="label">Azure-Blockchain-Service.svg</div></div>
    
      <div id="azure-cloud-shell.svg" class="imgbox"><img src="Azure-Cloud-Shell.svg" class="bg-0" onclick="download('Azure-Cloud-Shell.svg', this)"/><div class="label">Azure-Cloud-Shell.svg</div></div>
    
      <div id="azure-cosmos-db.svg" class="imgbox"><img src="Azure-Cosmos-DB.svg" class="bg-0" onclick="download('Azure-Cosmos-DB.svg', this)"/><div class="label">Azure-Cosmos-DB.svg</div></div>
    
      <div id="azure-data-catalog.svg" class="imgbox"><img src="Azure-Data-Catalog.svg" class="bg-0" onclick="download('Azure-Data-Catalog.svg', this)"/><div class="label">Azure-Data-Catalog.svg</div></div>
    
      <div id="azure-data-explorer-clusters.svg" class="imgbox"><img src="Azure-Data-Explorer-Clusters.svg" class="bg-0" onclick="download('Azure-Data-Explorer-Clusters.svg', this)"/><div class="label">Azure-Data-Explorer-Clusters.svg</div></div>
    
      <div id="azure-database-mariadb-server.svg" class="imgbox"><img src="Azure-Database-MariaDB-Server.svg" class="bg-0" onclick="download('Azure-Database-MariaDB-Server.svg', this)"/><div class="label">Azure-Database-MariaDB-Server.svg</div></div>
    
      <div id="azure-database-mysql-server.svg" class="imgbox"><img src="Azure-Database-MySQL-Server.svg" class="bg-0" onclick="download('Azure-Database-MySQL-Server.svg', this)"/><div class="label">Azure-Database-MySQL-Server.svg</div></div>
    
      <div id="azure-database-postgresql-server.svg" class="imgbox"><img src="Azure-Database-PostgreSQL-Server.svg" class="bg-0" onclick="download('Azure-Database-PostgreSQL-Server.svg', this)"/><div class="label">Azure-Database-PostgreSQL-Server.svg</div></div>
    
      <div id="azure-devops.svg" class="imgbox"><img src="Azure-DevOps.svg" class="bg-0" onclick="download('Azure-DevOps.svg', this)"/><div class="label">Azure-DevOps.svg</div></div>
    
      <div id="azure-firewall-manager.svg" class="imgbox"><img src="Azure-Firewall-Manager.svg" class="bg-0" onclick="download('Azure-Firewall-Manager.svg', this)"/><div class="label">Azure-Firewall-Manager.svg</div></div>
    
      <div id="azure-hcp-cache.svg" class="imgbox"><img src="Azure-HCP-Cache.svg" class="bg-0" onclick="download('Azure-HCP-Cache.svg', this)"/><div class="label">Azure-HCP-Cache.svg</div></div>
    
      <div id="azure-lighthouse.svg" class="imgbox"><img src="Azure-Lighthouse.svg" class="bg-0" onclick="download('Azure-Lighthouse.svg', this)"/><div class="label">Azure-Lighthouse.svg</div></div>
    
      <div id="azure-media-service.svg" class="imgbox"><img src="Azure-Media-Service.svg" class="bg-0" onclick="download('Azure-Media-Service.svg', this)"/><div class="label">Azure-Media-Service.svg</div></div>
    
      <div id="azure-netapp-files.svg" class="imgbox"><img src="Azure-NetApp-Files.svg" class="bg-0" onclick="download('Azure-NetApp-Files.svg', this)"/><div class="label">Azure-NetApp-Files.svg</div></div>
    
      <div id="azure-sql-server-stretch-databases.svg" class="imgbox"><img src="Azure-SQL-Server-Stretch-Databases.svg" class="bg-0" onclick="download('Azure-SQL-Server-Stretch-Databases.svg', this)"/><div class="label">Azure-SQL-Server-Stretch-Databases.svg</div></div>
    
      <div id="azure-sql-vm.svg" class="imgbox"><img src="Azure-SQL-VM.svg" class="bg-0" onclick="download('Azure-SQL-VM.svg', this)"/><div class="label">Azure-SQL-VM.svg</div></div>
    
      <div id="azure-stack-edge.svg" class="imgbox"><img src="Azure-Stack-Edge.svg" class="bg-0" onclick="download('Azure-Stack-Edge.svg', this)"/><div class="label">Azure-Stack-Edge.svg</div></div>
    
      <div id="azure-synapse-analytics.svg" class="imgbox"><img src="Azure-Synapse-Analytics.svg" class="bg-0" onclick="download('Azure-Synapse-Analytics.svg', this)"/><div class="label">Azure-Synapse-Analytics.svg</div></div>
    
      <div id="backlog.svg" class="imgbox"><img src="Backlog.svg" class="bg-0" onclick="download('Backlog.svg', this)"/><div class="label">Backlog.svg</div></div>
    
      <div id="batch-accounts.svg" class="imgbox"><img src="Batch-Accounts.svg" class="bg-0" onclick="download('Batch-Accounts.svg', this)"/><div class="label">Batch-Accounts.svg</div></div>
    
      <div id="biz-talk.svg" class="imgbox"><img src="Biz-Talk.svg" class="bg-0" onclick="download('Biz-Talk.svg', this)"/><div class="label">Biz-Talk.svg</div></div>
    
      <div id="blob-block.svg" class="imgbox"><img src="Blob-Block.svg" class="bg-0" onclick="download('Blob-Block.svg', this)"/><div class="label">Blob-Block.svg</div></div>
    
      <div id="blob-page.svg" class="imgbox"><img src="Blob-Page.svg" class="bg-0" onclick="download('Blob-Page.svg', this)"/><div class="label">Blob-Page.svg</div></div>
    
      <div id="blueprints.svg" class="imgbox"><img src="Blueprints.svg" class="bg-0" onclick="download('Blueprints.svg', this)"/><div class="label">Blueprints.svg</div></div>
    
      <div id="bot-services.svg" class="imgbox"><img src="Bot-Services.svg" class="bg-0" onclick="download('Bot-Services.svg', this)"/><div class="label">Bot-Services.svg</div></div>
    
      <div id="branch.svg" class="imgbox"><img src="Branch.svg" class="bg-0" onclick="download('Branch.svg', this)"/><div class="label">Branch.svg</div></div>
    
      <div id="browser.svg" class="imgbox"><img src="Browser.svg" class="bg-0" onclick="download('Browser.svg', this)"/><div class="label">Browser.svg</div></div>
    
      <div id="bug.svg" class="imgbox"><img src="Bug.svg" class="bg-0" onclick="download('Bug.svg', this)"/><div class="label">Bug.svg</div></div>
    
      <div id="builds.svg" class="imgbox"><img src="Builds.svg" class="bg-0" onclick="download('Builds.svg', this)"/><div class="label">Builds.svg</div></div>
    
      <div id="cdn-profiles.svg" class="imgbox"><img src="CDN-Profiles.svg" class="bg-0" onclick="download('CDN-Profiles.svg', this)"/><div class="label">CDN-Profiles.svg</div></div>
    
      <div id="cache-redis.svg" class="imgbox"><img src="Cache-Redis.svg" class="bg-0" onclick="download('Cache-Redis.svg', this)"/><div class="label">Cache-Redis.svg</div></div>
    
      <div id="cache.svg" class="imgbox"><img src="Cache.svg" class="bg-0" onclick="download('Cache.svg', this)"/><div class="label">Cache.svg</div></div>
    
      <div id="cloud-services-(classic).svg" class="imgbox"><img src="Cloud-Services-(Classic).svg" class="bg-0" onclick="download('Cloud-Services-(Classic).svg', this)"/><div class="label">Cloud-Services-(Classic).svg</div></div>
    
      <div id="code.svg" class="imgbox"><img src="Code.svg" class="bg-0" onclick="download('Code.svg', this)"/><div class="label">Code.svg</div></div>
    
      <div id="cognitive-services.svg" class="imgbox"><img src="Cognitive-Services.svg" class="bg-0" onclick="download('Cognitive-Services.svg', this)"/><div class="label">Cognitive-Services.svg</div></div>
    
      <div id="commit.svg" class="imgbox"><img src="Commit.svg" class="bg-0" onclick="download('Commit.svg', this)"/><div class="label">Commit.svg</div></div>
    
      <div id="connections.svg" class="imgbox"><img src="Connections.svg" class="bg-0" onclick="download('Connections.svg', this)"/><div class="label">Connections.svg</div></div>
    
      <div id="container-registries.svg" class="imgbox"><img src="Container-Registries.svg" class="bg-0" onclick="download('Container-Registries.svg', this)"/><div class="label">Container-Registries.svg</div></div>
    
      <div id="container-services-(deprecated).svg" class="imgbox"><img src="Container-Services-(Deprecated).svg" class="bg-0" onclick="download('Container-Services-(Deprecated).svg', this)"/><div class="label">Container-Services-(Deprecated).svg</div></div>
    
      <div id="controls-horizontal.svg" class="imgbox"><img src="Controls-Horizontal.svg" class="bg-0" onclick="download('Controls-Horizontal.svg', this)"/><div class="label">Controls-Horizontal.svg</div></div>
    
      <div id="controls.svg" class="imgbox"><img src="Controls.svg" class="bg-0" onclick="download('Controls.svg', this)"/><div class="label">Controls.svg</div></div>
    
      <div id="cost-alerts.svg" class="imgbox"><img src="Cost-Alerts.svg" class="bg-0" onclick="download('Cost-Alerts.svg', this)"/><div class="label">Cost-Alerts.svg</div></div>
    
      <div id="cost-analysis.svg" class="imgbox"><img src="Cost-Analysis.svg" class="bg-0" onclick="download('Cost-Analysis.svg', this)"/><div class="label">Cost-Analysis.svg</div></div>
    
      <div id="cost-budgets.svg" class="imgbox"><img src="Cost-Budgets.svg" class="bg-0" onclick="download('Cost-Budgets.svg', this)"/><div class="label">Cost-Budgets.svg</div></div>
    
      <div id="cost-management.svg" class="imgbox"><img src="Cost-Management.svg" class="bg-0" onclick="download('Cost-Management.svg', this)"/><div class="label">Cost-Management.svg</div></div>
    
      <div id="counter.svg" class="imgbox"><img src="Counter.svg" class="bg-0" onclick="download('Counter.svg', this)"/><div class="label">Counter.svg</div></div>
    
      <div id="cubes.svg" class="imgbox"><img src="Cubes.svg" class="bg-0" onclick="download('Cubes.svg', this)"/><div class="label">Cubes.svg</div></div>
    
      <div id="ddos-protection-plans.svg" class="imgbox"><img src="DDoS-Protection-Plans.svg" class="bg-0" onclick="download('DDoS-Protection-Plans.svg', this)"/><div class="label">DDoS-Protection-Plans.svg</div></div>
    
      <div id="dns-zones.svg" class="imgbox"><img src="DNS-Zones.svg" class="bg-0" onclick="download('DNS-Zones.svg', this)"/><div class="label">DNS-Zones.svg</div></div>
    
      <div id="dashboard.svg" class="imgbox"><img src="Dashboard.svg" class="bg-0" onclick="download('Dashboard.svg', this)"/><div class="label">Dashboard.svg</div></div>
    
      <div id="data-box-edge.svg" class="imgbox"><img src="Data-Box-Edge.svg" class="bg-0" onclick="download('Data-Box-Edge.svg', this)"/><div class="label">Data-Box-Edge.svg</div></div>
    
      <div id="data-box.svg" class="imgbox"><img src="Data-Box.svg" class="bg-0" onclick="download('Data-Box.svg', this)"/><div class="label">Data-Box.svg</div></div>
    
      <div id="data-factory.svg" class="imgbox"><img src="Data-Factory.svg" class="bg-0" onclick="download('Data-Factory.svg', this)"/><div class="label">Data-Factory.svg</div></div>
    
      <div id="data-lake-storage-gen1.svg" class="imgbox"><img src="Data-Lake-Storage-Gen1.svg" class="bg-0" onclick="download('Data-Lake-Storage-Gen1.svg', this)"/><div class="label">Data-Lake-Storage-Gen1.svg</div></div>
    
      <div id="data-lake-store-gen1.svg" class="imgbox"><img src="Data-Lake-Store-Gen1.svg" class="bg-0" onclick="download('Data-Lake-Store-Gen1.svg', this)"/><div class="label">Data-Lake-Store-Gen1.svg</div></div>
    
      <div id="data-share-invitations.svg" class="imgbox"><img src="Data-Share-Invitations.svg" class="bg-0" onclick="download('Data-Share-Invitations.svg', this)"/><div class="label">Data-Share-Invitations.svg</div></div>
    
      <div id="data-shares.svg" class="imgbox"><img src="Data-Shares.svg" class="bg-0" onclick="download('Data-Shares.svg', this)"/><div class="label">Data-Shares.svg</div></div>
    
      <div id="detonation.svg" class="imgbox"><img src="Detonation.svg" class="bg-0" onclick="download('Detonation.svg', this)"/><div class="label">Detonation.svg</div></div>
    
      <div id="dev-console.svg" class="imgbox"><img src="Dev-Console.svg" class="bg-0" onclick="download('Dev-Console.svg', this)"/><div class="label">Dev-Console.svg</div></div>
    
      <div id="devtest-labs.svg" class="imgbox"><img src="DevTest-Labs.svg" class="bg-0" onclick="download('DevTest-Labs.svg', this)"/><div class="label">DevTest-Labs.svg</div></div>
    
      <div id="device-security-apple.svg" class="imgbox"><img src="Device-Security-Apple.svg" class="bg-0" onclick="download('Device-Security-Apple.svg', this)"/><div class="label">Device-Security-Apple.svg</div></div>
    
      <div id="device-security-google.svg" class="imgbox"><img src="Device-Security-Google.svg" class="bg-0" onclick="download('Device-Security-Google.svg', this)"/><div class="label">Device-Security-Google.svg</div></div>
    
      <div id="device-security-windows.svg" class="imgbox"><img src="Device-Security-Windows.svg" class="bg-0" onclick="download('Device-Security-Windows.svg', this)"/><div class="label">Device-Security-Windows.svg</div></div>
    
      <div id="diagnostics-settings.svg" class="imgbox"><img src="Diagnostics-Settings.svg" class="bg-0" onclick="download('Diagnostics-Settings.svg', this)"/><div class="label">Diagnostics-Settings.svg</div></div>
    
      <div id="disk-encryption-sets.svg" class="imgbox"><img src="Disk-Encryption-Sets.svg" class="bg-0" onclick="download('Disk-Encryption-Sets.svg', this)"/><div class="label">Disk-Encryption-Sets.svg</div></div>
    
      <div id="disks-(classic).svg" class="imgbox"><img src="Disks-(Classic).svg" class="bg-0" onclick="download('Disks-(Classic).svg', this)"/><div class="label">Disks-(Classic).svg</div></div>
    
      <div id="disks-snapshots.svg" class="imgbox"><img src="Disks-Snapshots.svg" class="bg-0" onclick="download('Disks-Snapshots.svg', this)"/><div class="label">Disks-Snapshots.svg</div></div>
    
      <div id="disks.svg" class="imgbox"><img src="Disks.svg" class="bg-0" onclick="download('Disks.svg', this)"/><div class="label">Disks.svg</div></div>
    
      <div id="download.svg" class="imgbox"><img src="Download.svg" class="bg-0" onclick="download('Download.svg', this)"/><div class="label">Download.svg</div></div>
    
      <div id="education.svg" class="imgbox"><img src="Education.svg" class="bg-0" onclick="download('Education.svg', this)"/><div class="label">Education.svg</div></div>
    
      <div id="elastic-job-agents.svg" class="imgbox"><img src="Elastic-Job-Agents.svg" class="bg-0" onclick="download('Elastic-Job-Agents.svg', this)"/><div class="label">Elastic-Job-Agents.svg</div></div>
    
      <div id="elixir purple.svg" class="imgbox"><img src="Elixir Purple.svg" class="bg-0" onclick="download('Elixir Purple.svg', this)"/><div class="label">Elixir Purple.svg</div></div>
    
      <div id="elixir.svg" class="imgbox"><img src="Elixir.svg" class="bg-0" onclick="download('Elixir.svg', this)"/><div class="label">Elixir.svg</div></div>
    
      <div id="enterprise-applications.svg" class="imgbox"><img src="Enterprise-Applications.svg" class="bg-0" onclick="download('Enterprise-Applications.svg', this)"/><div class="label">Enterprise-Applications.svg</div></div>
    
      <div id="error.svg" class="imgbox"><img src="Error.svg" class="bg-0" onclick="download('Error.svg', this)"/><div class="label">Error.svg</div></div>
    
      <div id="event-grid-domains.svg" class="imgbox"><img src="Event-Grid-Domains.svg" class="bg-0" onclick="download('Event-Grid-Domains.svg', this)"/><div class="label">Event-Grid-Domains.svg</div></div>
    
      <div id="event-grid-subscriptions.svg" class="imgbox"><img src="Event-Grid-Subscriptions.svg" class="bg-0" onclick="download('Event-Grid-Subscriptions.svg', this)"/><div class="label">Event-Grid-Subscriptions.svg</div></div>
    
      <div id="event-grid-topics.svg" class="imgbox"><img src="Event-Grid-Topics.svg" class="bg-0" onclick="download('Event-Grid-Topics.svg', this)"/><div class="label">Event-Grid-Topics.svg</div></div>
    
      <div id="event-hub-clusters.svg" class="imgbox"><img src="Event-Hub-Clusters.svg" class="bg-0" onclick="download('Event-Hub-Clusters.svg', this)"/><div class="label">Event-Hub-Clusters.svg</div></div>
    
      <div id="event-hubs.svg" class="imgbox"><img src="Event-Hubs.svg" class="bg-0" onclick="download('Event-Hubs.svg', this)"/><div class="label">Event-Hubs.svg</div></div>
    
      <div id="expressroute-circuits.svg" class="imgbox"><img src="ExpressRoute-Circuits.svg" class="bg-0" onclick="download('ExpressRoute-Circuits.svg', this)"/><div class="label">ExpressRoute-Circuits.svg</div></div>
    
      <div id="extensions.svg" class="imgbox"><img src="Extensions.svg" class="bg-0" onclick="download('Extensions.svg', this)"/><div class="label">Extensions.svg</div></div>
    
      <div id="ftp.svg" class="imgbox"><img src="FTP.svg" class="bg-0" onclick="download('FTP.svg', this)"/><div class="label">FTP.svg</div></div>
    
      <div id="file.svg" class="imgbox"><img src="File.svg" class="bg-0" onclick="download('File.svg', this)"/><div class="label">File.svg</div></div>
    
      <div id="files.svg" class="imgbox"><img src="Files.svg" class="bg-0" onclick="download('Files.svg', this)"/><div class="label">Files.svg</div></div>
    
      <div id="firewalls.svg" class="imgbox"><img src="Firewalls.svg" class="bg-0" onclick="download('Firewalls.svg', this)"/><div class="label">Firewalls.svg</div></div>
    
      <div id="folder-blank.svg" class="imgbox"><img src="Folder-Blank.svg" class="bg-0" onclick="download('Folder-Blank.svg', this)"/><div class="label">Folder-Blank.svg</div></div>
    
      <div id="folder-website.svg" class="imgbox"><img src="Folder-Website.svg" class="bg-0" onclick="download('Folder-Website.svg', this)"/><div class="label">Folder-Website.svg</div></div>
    
      <div id="front-doors.svg" class="imgbox"><img src="Front-Doors.svg" class="bg-0" onclick="download('Front-Doors.svg', this)"/><div class="label">Front-Doors.svg</div></div>
    
      <div id="function-apps.svg" class="imgbox"><img src="Function-Apps.svg" class="bg-0" onclick="download('Function-Apps.svg', this)"/><div class="label">Function-Apps.svg</div></div>
    
      <div id="gear.svg" class="imgbox"><img src="Gear.svg" class="bg-0" onclick="download('Gear.svg', this)"/><div class="label">Gear.svg</div></div>
    
      <div id="globe-error.svg" class="imgbox"><img src="Globe-Error.svg" class="bg-0" onclick="download('Globe-Error.svg', this)"/><div class="label">Globe-Error.svg</div></div>
    
      <div id="globe-success.svg" class="imgbox"><img src="Globe-Success.svg" class="bg-0" onclick="download('Globe-Success.svg', this)"/><div class="label">Globe-Success.svg</div></div>
    
      <div id="globe-warning.svg" class="imgbox"><img src="Globe-Warning.svg" class="bg-0" onclick="download('Globe-Warning.svg', this)"/><div class="label">Globe-Warning.svg</div></div>
    
      <div id="globe.svg" class="imgbox"><img src="Globe.svg" class="bg-0" onclick="download('Globe.svg', this)"/><div class="label">Globe.svg</div></div>
    
      <div id="groups.svg" class="imgbox"><img src="Groups.svg" class="bg-0" onclick="download('Groups.svg', this)"/><div class="label">Groups.svg</div></div>
    
      <div id="guide.svg" class="imgbox"><img src="Guide.svg" class="bg-0" onclick="download('Guide.svg', this)"/><div class="label">Guide.svg</div></div>
    
      <div id="hd-insight-clusters.svg" class="imgbox"><img src="HD-Insight-Clusters.svg" class="bg-0" onclick="download('HD-Insight-Clusters.svg', this)"/><div class="label">HD-Insight-Clusters.svg</div></div>
    
      <div id="heart.svg" class="imgbox"><img src="Heart.svg" class="bg-0" onclick="download('Heart.svg', this)"/><div class="label">Heart.svg</div></div>
    
      <div id="help-and-support.svg" class="imgbox"><img src="Help-and-Support.svg" class="bg-0" onclick="download('Help-and-Support.svg', this)"/><div class="label">Help-and-Support.svg</div></div>
    
      <div id="ip-groups.svg" class="imgbox"><img src="IP-Groups.svg" class="bg-0" onclick="download('IP-Groups.svg', this)"/><div class="label">IP-Groups.svg</div></div>
    
      <div id="identity-governance.svg" class="imgbox"><img src="Identity-Governance.svg" class="bg-0" onclick="download('Identity-Governance.svg', this)"/><div class="label">Identity-Governance.svg</div></div>
    
      <div id="image-definitions.svg" class="imgbox"><img src="Image-Definitions.svg" class="bg-0" onclick="download('Image-Definitions.svg', this)"/><div class="label">Image-Definitions.svg</div></div>
    
      <div id="image-versions.svg" class="imgbox"><img src="Image-Versions.svg" class="bg-0" onclick="download('Image-Versions.svg', this)"/><div class="label">Image-Versions.svg</div></div>
    
      <div id="image.svg" class="imgbox"><img src="Image.svg" class="bg-0" onclick="download('Image.svg', this)"/><div class="label">Image.svg</div></div>
    
      <div id="images.svg" class="imgbox"><img src="Images.svg" class="bg-0" onclick="download('Images.svg', this)"/><div class="label">Images.svg</div></div>
    
      <div id="import-export-jobs.svg" class="imgbox"><img src="Import-Export-Jobs.svg" class="bg-0" onclick="download('Import-Export-Jobs.svg', this)"/><div class="label">Import-Export-Jobs.svg</div></div>
    
      <div id="information.svg" class="imgbox"><img src="Information.svg" class="bg-0" onclick="download('Information.svg', this)"/><div class="label">Information.svg</div></div>
    
      <div id="input-output.svg" class="imgbox"><img src="Input-Output.svg" class="bg-0" onclick="download('Input-Output.svg', this)"/><div class="label">Input-Output.svg</div></div>
    
      <div id="instance-pools.svg" class="imgbox"><img src="Instance-Pools.svg" class="bg-0" onclick="download('Instance-Pools.svg', this)"/><div class="label">Instance-Pools.svg</div></div>
    
      <div id="integration-accounts.svg" class="imgbox"><img src="Integration-Accounts.svg" class="bg-0" onclick="download('Integration-Accounts.svg', this)"/><div class="label">Integration-Accounts.svg</div></div>
    
      <div id="internet-analyzer-profiles.svg" class="imgbox"><img src="Internet-Analyzer-Profiles.svg" class="bg-0" onclick="download('Internet-Analyzer-Profiles.svg', this)"/><div class="label">Internet-Analyzer-Profiles.svg</div></div>
    
      <div id="iot-central-applications.svg" class="imgbox"><img src="IoT-Central-Applications.svg" class="bg-0" onclick="download('IoT-Central-Applications.svg', this)"/><div class="label">IoT-Central-Applications.svg</div></div>
    
      <div id="journey-hub.svg" class="imgbox"><img src="Journey-Hub.svg" class="bg-0" onclick="download('Journey-Hub.svg', this)"/><div class="label">Journey-Hub.svg</div></div>
    
      <div id="kubernetes-services.svg" class="imgbox"><img src="Kubernetes-Services.svg" class="bg-0" onclick="download('Kubernetes-Services.svg', this)"/><div class="label">Kubernetes-Services.svg</div></div>
    
      <div id="lab-services.svg" class="imgbox"><img src="Lab-Services.svg" class="bg-0" onclick="download('Lab-Services.svg', this)"/><div class="label">Lab-Services.svg</div></div>
    
      <div id="launch-portal.svg" class="imgbox"><img src="Launch-Portal.svg" class="bg-0" onclick="download('Launch-Portal.svg', this)"/><div class="label">Launch-Portal.svg</div></div>
    
      <div id="learn.svg" class="imgbox"><img src="Learn.svg" class="bg-0" onclick="download('Learn.svg', this)"/><div class="label">Learn.svg</div></div>
    
      <div id="load-balancers.svg" class="imgbox"><img src="Load-Balancers.svg" class="bg-0" onclick="download('Load-Balancers.svg', this)"/><div class="label">Load-Balancers.svg</div></div>
    
      <div id="load-test.svg" class="imgbox"><img src="Load-Test.svg" class="bg-0" onclick="download('Load-Test.svg', this)"/><div class="label">Load-Test.svg</div></div>
    
      <div id="location.svg" class="imgbox"><img src="Location.svg" class="bg-0" onclick="download('Location.svg', this)"/><div class="label">Location.svg</div></div>
    
      <div id="log-analytics-workspaces.svg" class="imgbox"><img src="Log-Analytics-Workspaces.svg" class="bg-0" onclick="download('Log-Analytics-Workspaces.svg', this)"/><div class="label">Log-Analytics-Workspaces.svg</div></div>
    
      <div id="log-streaming.svg" class="imgbox"><img src="Log-Streaming.svg" class="bg-0" onclick="download('Log-Streaming.svg', this)"/><div class="label">Log-Streaming.svg</div></div>
    
      <div id="logic-apps.svg" class="imgbox"><img src="Logic-Apps.svg" class="bg-0" onclick="download('Logic-Apps.svg', this)"/><div class="label">Logic-Apps.svg</div></div>
    
      <div id="machinesazurearc.svg" class="imgbox"><img src="MachinesAzureArc.svg" class="bg-0" onclick="download('MachinesAzureArc.svg', this)"/><div class="label">MachinesAzureArc.svg</div></div>
    
      <div id="managed-applications-center.svg" class="imgbox"><img src="Managed-Applications-Center.svg" class="bg-0" onclick="download('Managed-Applications-Center.svg', this)"/><div class="label">Managed-Applications-Center.svg</div></div>
    
      <div id="managed-database.svg" class="imgbox"><img src="Managed-Database.svg" class="bg-0" onclick="download('Managed-Database.svg', this)"/><div class="label">Managed-Database.svg</div></div>
    
      <div id="management-groups.svg" class="imgbox"><img src="Management-Groups.svg" class="bg-0" onclick="download('Management-Groups.svg', this)"/><div class="label">Management-Groups.svg</div></div>
    
      <div id="management-portal.svg" class="imgbox"><img src="Management-Portal.svg" class="bg-0" onclick="download('Management-Portal.svg', this)"/><div class="label">Management-Portal.svg</div></div>
    
      <div id="marketplace.svg" class="imgbox"><img src="Marketplace.svg" class="bg-0" onclick="download('Marketplace.svg', this)"/><div class="label">Marketplace.svg</div></div>
    
      <div id="media-file.svg" class="imgbox"><img src="Media-File.svg" class="bg-0" onclick="download('Media-File.svg', this)"/><div class="label">Media-File.svg</div></div>
    
      <div id="media.svg" class="imgbox"><img src="Media.svg" class="bg-0" onclick="download('Media.svg', this)"/><div class="label">Media.svg</div></div>
    
      <div id="mesh-applications.svg" class="imgbox"><img src="Mesh-Applications.svg" class="bg-0" onclick="download('Mesh-Applications.svg', this)"/><div class="label">Mesh-Applications.svg</div></div>
    
      <div id="metrics.svg" class="imgbox"><img src="Metrics.svg" class="bg-0" onclick="download('Metrics.svg', this)"/><div class="label">Metrics.svg</div></div>
    
      <div id="mobile-engagement.svg" class="imgbox"><img src="Mobile-Engagement.svg" class="bg-0" onclick="download('Mobile-Engagement.svg', this)"/><div class="label">Mobile-Engagement.svg</div></div>
    
      <div id="mobile.svg" class="imgbox"><img src="Mobile.svg" class="bg-0" onclick="download('Mobile.svg', this)"/><div class="label">Mobile.svg</div></div>
    
      <div id="module.svg" class="imgbox"><img src="Module.svg" class="bg-0" onclick="download('Module.svg', this)"/><div class="label">Module.svg</div></div>
    
      <div id="monitor.svg" class="imgbox"><img src="Monitor.svg" class="bg-0" onclick="download('Monitor.svg', this)"/><div class="label">Monitor.svg</div></div>
    
      <div id="multi-tenancy.svg" class="imgbox"><img src="Multi-Tenancy.svg" class="bg-0" onclick="download('Multi-Tenancy.svg', this)"/><div class="label">Multi-Tenancy.svg</div></div>
    
      <div id="my-customers.svg" class="imgbox"><img src="My-Customers.svg" class="bg-0" onclick="download('My-Customers.svg', this)"/><div class="label">My-Customers.svg</div></div>
    
      <div id="nat.svg" class="imgbox"><img src="NAT.svg" class="bg-0" onclick="download('NAT.svg', this)"/><div class="label">NAT.svg</div></div>
    
      <div id="network-interfaces.svg" class="imgbox"><img src="Network-Interfaces.svg" class="bg-0" onclick="download('Network-Interfaces.svg', this)"/><div class="label">Network-Interfaces.svg</div></div>
    
      <div id="network-security-groups.svg" class="imgbox"><img src="Network-Security-Groups.svg" class="bg-0" onclick="download('Network-Security-Groups.svg', this)"/><div class="label">Network-Security-Groups.svg</div></div>
    
      <div id="network-watcher.svg" class="imgbox"><img src="Network-Watcher.svg" class="bg-0" onclick="download('Network-Watcher.svg', this)"/><div class="label">Network-Watcher.svg</div></div>
    
      <div id="notification-hub-namespaces.svg" class="imgbox"><img src="Notification-Hub-Namespaces.svg" class="bg-0" onclick="download('Notification-Hub-Namespaces.svg', this)"/><div class="label">Notification-Hub-Namespaces.svg</div></div>
    
      <div id="notification-hubs.svg" class="imgbox"><img src="Notification-Hubs.svg" class="bg-0" onclick="download('Notification-Hubs.svg', this)"/><div class="label">Notification-Hubs.svg</div></div>
    
      <div id="os-images-(classic).svg" class="imgbox"><img src="OS-Images-(Classic).svg" class="bg-0" onclick="download('OS-Images-(Classic).svg', this)"/><div class="label">OS-Images-(Classic).svg</div></div>
    
      <div id="operation-log-(classic).svg" class="imgbox"><img src="Operation-Log-(Classic).svg" class="bg-0" onclick="download('Operation-Log-(Classic).svg', this)"/><div class="label">Operation-Log-(Classic).svg</div></div>
    
      <div id="policy.svg" class="imgbox"><img src="Policy.svg" class="bg-0" onclick="download('Policy.svg', this)"/><div class="label">Policy.svg</div></div>
    
      <div id="power-up.svg" class="imgbox"><img src="Power-Up.svg" class="bg-0" onclick="download('Power-Up.svg', this)"/><div class="label">Power-Up.svg</div></div>
    
      <div id="power.svg" class="imgbox"><img src="Power.svg" class="bg-0" onclick="download('Power.svg', this)"/><div class="label">Power.svg</div></div>
    
      <div id="powershell.svg" class="imgbox"><img src="Powershell.svg" class="bg-0" onclick="download('Powershell.svg', this)"/><div class="label">Powershell.svg</div></div>
    
      <div id="preview.svg" class="imgbox"><img src="Preview.svg" class="bg-0" onclick="download('Preview.svg', this)"/><div class="label">Preview.svg</div></div>
    
      <div id="private-link-hub.svg" class="imgbox"><img src="Private-Link-Hub.svg" class="bg-0" onclick="download('Private-Link-Hub.svg', this)"/><div class="label">Private-Link-Hub.svg</div></div>
    
      <div id="private-link-service.svg" class="imgbox"><img src="Private-Link-Service.svg" class="bg-0" onclick="download('Private-Link-Service.svg', this)"/><div class="label">Private-Link-Service.svg</div></div>
    
      <div id="private-link.svg" class="imgbox"><img src="Private-Link.svg" class="bg-0" onclick="download('Private-Link.svg', this)"/><div class="label">Private-Link.svg</div></div>
    
      <div id="process-explorer.svg" class="imgbox"><img src="Process-Explorer.svg" class="bg-0" onclick="download('Process-Explorer.svg', this)"/><div class="label">Process-Explorer.svg</div></div>
    
      <div id="production-ready-database.svg" class="imgbox"><img src="Production-Ready-Database.svg" class="bg-0" onclick="download('Production-Ready-Database.svg', this)"/><div class="label">Production-Ready-Database.svg</div></div>
    
      <div id="proximity-placement-groups.svg" class="imgbox"><img src="Proximity-Placement-Groups.svg" class="bg-0" onclick="download('Proximity-Placement-Groups.svg', this)"/><div class="label">Proximity-Placement-Groups.svg</div></div>
    
      <div id="public-ip-addresses-(classic).svg" class="imgbox"><img src="Public-IP-Addresses-(Classic).svg" class="bg-0" onclick="download('Public-IP-Addresses-(Classic).svg', this)"/><div class="label">Public-IP-Addresses-(Classic).svg</div></div>
    
      <div id="public-ip-addresses.svg" class="imgbox"><img src="Public-IP-Addresses.svg" class="bg-0" onclick="download('Public-IP-Addresses.svg', this)"/><div class="label">Public-IP-Addresses.svg</div></div>
    
      <div id="public-ip-prefixes.svg" class="imgbox"><img src="Public-IP-Prefixes.svg" class="bg-0" onclick="download('Public-IP-Prefixes.svg', this)"/><div class="label">Public-IP-Prefixes.svg</div></div>
    
      <div id="quickstart-center.svg" class="imgbox"><img src="Quickstart-Center.svg" class="bg-0" onclick="download('Quickstart-Center.svg', this)"/><div class="label">Quickstart-Center.svg</div></div>
    
      <div id="recent.svg" class="imgbox"><img src="Recent.svg" class="bg-0" onclick="download('Recent.svg', this)"/><div class="label">Recent.svg</div></div>
    
      <div id="recovery-services-vaults.svg" class="imgbox"><img src="Recovery-Services-Vaults.svg" class="bg-0" onclick="download('Recovery-Services-Vaults.svg', this)"/><div class="label">Recovery-Services-Vaults.svg</div></div>
    
      <div id="relays.svg" class="imgbox"><img src="Relays.svg" class="bg-0" onclick="download('Relays.svg', this)"/><div class="label">Relays.svg</div></div>
    
      <div id="remote-rendering.svg" class="imgbox"><img src="Remote-Rendering.svg" class="bg-0" onclick="download('Remote-Rendering.svg', this)"/><div class="label">Remote-Rendering.svg</div></div>
    
      <div id="reservations.svg" class="imgbox"><img src="Reservations.svg" class="bg-0" onclick="download('Reservations.svg', this)"/><div class="label">Reservations.svg</div></div>
    
      <div id="reserved-ip-addresses-(classic).svg" class="imgbox"><img src="Reserved-IP-Addresses-(Classic).svg" class="bg-0" onclick="download('Reserved-IP-Addresses-(Classic).svg', this)"/><div class="label">Reserved-IP-Addresses-(Classic).svg</div></div>
    
      <div id="resource-graph-explorer.svg" class="imgbox"><img src="Resource-Graph-Explorer.svg" class="bg-0" onclick="download('Resource-Graph-Explorer.svg', this)"/><div class="label">Resource-Graph-Explorer.svg</div></div>
    
      <div id="resource-group-list.svg" class="imgbox"><img src="Resource-Group-List.svg" class="bg-0" onclick="download('Resource-Group-List.svg', this)"/><div class="label">Resource-Group-List.svg</div></div>
    
      <div id="resource-groups.svg" class="imgbox"><img src="Resource-Groups.svg" class="bg-0" onclick="download('Resource-Groups.svg', this)"/><div class="label">Resource-Groups.svg</div></div>
    
      <div id="resource-linked.svg" class="imgbox"><img src="Resource-Linked.svg" class="bg-0" onclick="download('Resource-Linked.svg', this)"/><div class="label">Resource-Linked.svg</div></div>
    
      <div id="route-filters.svg" class="imgbox"><img src="Route-Filters.svg" class="bg-0" onclick="download('Route-Filters.svg', this)"/><div class="label">Route-Filters.svg</div></div>
    
      <div id="sql-data-warehouses.svg" class="imgbox"><img src="SQL-Data-Warehouses.svg" class="bg-0" onclick="download('SQL-Data-Warehouses.svg', this)"/><div class="label">SQL-Data-Warehouses.svg</div></div>
    
      <div id="sql-database.svg" class="imgbox"><img src="SQL-Database.svg" class="bg-0" onclick="download('SQL-Database.svg', this)"/><div class="label">SQL-Database.svg</div></div>
    
      <div id="sql-elastic-pools.svg" class="imgbox"><img src="SQL-Elastic-Pools.svg" class="bg-0" onclick="download('SQL-Elastic-Pools.svg', this)"/><div class="label">SQL-Elastic-Pools.svg</div></div>
    
      <div id="sql-managed-instance.svg" class="imgbox"><img src="SQL-Managed-Instance.svg" class="bg-0" onclick="download('SQL-Managed-Instance.svg', this)"/><div class="label">SQL-Managed-Instance.svg</div></div>
    
      <div id="sql-server.svg" class="imgbox"><img src="SQL-Server.svg" class="bg-0" onclick="download('SQL-Server.svg', this)"/><div class="label">SQL-Server.svg</div></div>
    
      <div id="ssd.svg" class="imgbox"><img src="SSD.svg" class="bg-0" onclick="download('SSD.svg', this)"/><div class="label">SSD.svg</div></div>
    
      <div id="scale.svg" class="imgbox"><img src="Scale.svg" class="bg-0" onclick="download('Scale.svg', this)"/><div class="label">Scale.svg</div></div>
    
      <div id="scheduler.svg" class="imgbox"><img src="Scheduler.svg" class="bg-0" onclick="download('Scheduler.svg', this)"/><div class="label">Scheduler.svg</div></div>
    
      <div id="search-grid.svg" class="imgbox"><img src="Search-Grid.svg" class="bg-0" onclick="download('Search-Grid.svg', this)"/><div class="label">Search-Grid.svg</div></div>
    
      <div id="search-services.svg" class="imgbox"><img src="Search-Services.svg" class="bg-0" onclick="download('Search-Services.svg', this)"/><div class="label">Search-Services.svg</div></div>
    
      <div id="search.svg" class="imgbox"><img src="Search.svg" class="bg-0" onclick="download('Search.svg', this)"/><div class="label">Search.svg</div></div>
    
      <div id="server-farm.svg" class="imgbox"><img src="Server-Farm.svg" class="bg-0" onclick="download('Server-Farm.svg', this)"/><div class="label">Server-Farm.svg</div></div>
    
      <div id="service-bus.svg" class="imgbox"><img src="Service-Bus.svg" class="bg-0" onclick="download('Service-Bus.svg', this)"/><div class="label">Service-Bus.svg</div></div>
    
      <div id="service-endpoint-policies.svg" class="imgbox"><img src="Service-Endpoint-Policies.svg" class="bg-0" onclick="download('Service-Endpoint-Policies.svg', this)"/><div class="label">Service-Endpoint-Policies.svg</div></div>
    
      <div id="service-fabric-clusters.svg" class="imgbox"><img src="Service-Fabric-Clusters.svg" class="bg-0" onclick="download('Service-Fabric-Clusters.svg', this)"/><div class="label">Service-Fabric-Clusters.svg</div></div>
    
      <div id="service-health.svg" class="imgbox"><img src="Service-Health.svg" class="bg-0" onclick="download('Service-Health.svg', this)"/><div class="label">Service-Health.svg</div></div>
    
      <div id="service-providers.svg" class="imgbox"><img src="Service-Providers.svg" class="bg-0" onclick="download('Service-Providers.svg', this)"/><div class="label">Service-Providers.svg</div></div>
    
      <div id="shared-image-galleries.svg" class="imgbox"><img src="Shared-Image-Galleries.svg" class="bg-0" onclick="download('Shared-Image-Galleries.svg', this)"/><div class="label">Shared-Image-Galleries.svg</div></div>
    
      <div id="solutions.svg" class="imgbox"><img src="Solutions.svg" class="bg-0" onclick="download('Solutions.svg', this)"/><div class="label">Solutions.svg</div></div>
    
      <div id="storsimple-data-managers.svg" class="imgbox"><img src="StorSimple-Data-Managers.svg" class="bg-0" onclick="download('StorSimple-Data-Managers.svg', this)"/><div class="label">StorSimple-Data-Managers.svg</div></div>
    
      <div id="storsimple-device-managers.svg" class="imgbox"><img src="StorSimple-Device-Managers.svg" class="bg-0" onclick="download('StorSimple-Device-Managers.svg', this)"/><div class="label">StorSimple-Device-Managers.svg</div></div>
    
      <div id="storage-accounts-(classic).svg" class="imgbox"><img src="Storage-Accounts-(Classic).svg" class="bg-0" onclick="download('Storage-Accounts-(Classic).svg', this)"/><div class="label">Storage-Accounts-(Classic).svg</div></div>
    
      <div id="storage-accounts.svg" class="imgbox"><img src="Storage-Accounts.svg" class="bg-0" onclick="download('Storage-Accounts.svg', this)"/><div class="label">Storage-Accounts.svg</div></div>
    
      <div id="storage-azure-files.svg" class="imgbox"><img src="Storage-Azure-Files.svg" class="bg-0" onclick="download('Storage-Azure-Files.svg', this)"/><div class="label">Storage-Azure-Files.svg</div></div>
    
      <div id="storage-container.svg" class="imgbox"><img src="Storage-Container.svg" class="bg-0" onclick="download('Storage-Container.svg', this)"/><div class="label">Storage-Container.svg</div></div>
    
      <div id="storage-queue.svg" class="imgbox"><img src="Storage-Queue.svg" class="bg-0" onclick="download('Storage-Queue.svg', this)"/><div class="label">Storage-Queue.svg</div></div>
    
      <div id="stream-analytics-jobs.svg" class="imgbox"><img src="Stream-Analytics-Jobs.svg" class="bg-0" onclick="download('Stream-Analytics-Jobs.svg', this)"/><div class="label">Stream-Analytics-Jobs.svg</div></div>
    
      <div id="subscriptions.svg" class="imgbox"><img src="Subscriptions.svg" class="bg-0" onclick="download('Subscriptions.svg', this)"/><div class="label">Subscriptions.svg</div></div>
    
      <div id="tfs-vc-repository.svg" class="imgbox"><img src="TFS-VC-Repository.svg" class="bg-0" onclick="download('TFS-VC-Repository.svg', this)"/><div class="label">TFS-VC-Repository.svg</div></div>
    
      <div id="table.svg" class="imgbox"><img src="Table.svg" class="bg-0" onclick="download('Table.svg', this)"/><div class="label">Table.svg</div></div>
    
      <div id="tags.svg" class="imgbox"><img src="Tags.svg" class="bg-0" onclick="download('Tags.svg', this)"/><div class="label">Tags.svg</div></div>
    
      <div id="toolbox.svg" class="imgbox"><img src="Toolbox.svg" class="bg-0" onclick="download('Toolbox.svg', this)"/><div class="label">Toolbox.svg</div></div>
    
      <div id="traffic-manager-profiles.svg" class="imgbox"><img src="Traffic-Manager-Profiles.svg" class="bg-0" onclick="download('Traffic-Manager-Profiles.svg', this)"/><div class="label">Traffic-Manager-Profiles.svg</div></div>
    
      <div id="user-privacy.svg" class="imgbox"><img src="User-Privacy.svg" class="bg-0" onclick="download('User-Privacy.svg', this)"/><div class="label">User-Privacy.svg</div></div>
    
      <div id="users.svg" class="imgbox"><img src="Users.svg" class="bg-0" onclick="download('Users.svg', this)"/><div class="label">Users.svg</div></div>
    
      <div id="vm-images-(classic).svg" class="imgbox"><img src="VM-Images-(Classic).svg" class="bg-0" onclick="download('VM-Images-(Classic).svg', this)"/><div class="label">VM-Images-(Classic).svg</div></div>
    
      <div id="vm-scale-sets.svg" class="imgbox"><img src="VM-Scale-Sets.svg" class="bg-0" onclick="download('VM-Scale-Sets.svg', this)"/><div class="label">VM-Scale-Sets.svg</div></div>
    
      <div id="versions.svg" class="imgbox"><img src="Versions.svg" class="bg-0" onclick="download('Versions.svg', this)"/><div class="label">Versions.svg</div></div>
    
      <div id="virtual-clusters.svg" class="imgbox"><img src="Virtual-Clusters.svg" class="bg-0" onclick="download('Virtual-Clusters.svg', this)"/><div class="label">Virtual-Clusters.svg</div></div>
    
      <div id="virtual-machine.svg" class="imgbox"><img src="Virtual-Machine.svg" class="bg-0" onclick="download('Virtual-Machine.svg', this)"/><div class="label">Virtual-Machine.svg</div></div>
    
      <div id="virtual-machines-(classic).svg" class="imgbox"><img src="Virtual-Machines-(Classic).svg" class="bg-0" onclick="download('Virtual-Machines-(Classic).svg', this)"/><div class="label">Virtual-Machines-(Classic).svg</div></div>
    
      <div id="virtual-network-gateways.svg" class="imgbox"><img src="Virtual-Network-Gateways.svg" class="bg-0" onclick="download('Virtual-Network-Gateways.svg', this)"/><div class="label">Virtual-Network-Gateways.svg</div></div>
    
      <div id="virtual-networks-(classic).svg" class="imgbox"><img src="Virtual-Networks-(Classic).svg" class="bg-0" onclick="download('Virtual-Networks-(Classic).svg', this)"/><div class="label">Virtual-Networks-(Classic).svg</div></div>
    
      <div id="virtual-networks.svg" class="imgbox"><img src="Virtual-Networks.svg" class="bg-0" onclick="download('Virtual-Networks.svg', this)"/><div class="label">Virtual-Networks.svg</div></div>
    
      <div id="web-application-firewall-policies(waf).svg" class="imgbox"><img src="Web-Application-Firewall-Policies(WAF).svg" class="bg-0" onclick="download('Web-Application-Firewall-Policies(WAF).svg', this)"/><div class="label">Web-Application-Firewall-Policies(WAF).svg</div></div>
    
      <div id="web-environment.svg" class="imgbox"><img src="Web-Environment.svg" class="bg-0" onclick="download('Web-Environment.svg', this)"/><div class="label">Web-Environment.svg</div></div>
    
      <div id="web-slots.svg" class="imgbox"><img src="Web-Slots.svg" class="bg-0" onclick="download('Web-Slots.svg', this)"/><div class="label">Web-Slots.svg</div></div>
    
      <div id="web-test.svg" class="imgbox"><img src="Web-Test.svg" class="bg-0" onclick="download('Web-Test.svg', this)"/><div class="label">Web-Test.svg</div></div>
    
      <div id="website-power.svg" class="imgbox"><img src="Website-Power.svg" class="bg-0" onclick="download('Website-Power.svg', this)"/><div class="label">Website-Power.svg</div></div>
    
      <div id="website-staging.svg" class="imgbox"><img src="Website-Staging.svg" class="bg-0" onclick="download('Website-Staging.svg', this)"/><div class="label">Website-Staging.svg</div></div>
    
      <div id="workbooks.svg" class="imgbox"><img src="Workbooks.svg" class="bg-0" onclick="download('Workbooks.svg', this)"/><div class="label">Workbooks.svg</div></div>
    
      <div id="workflow.svg" class="imgbox"><img src="Workflow.svg" class="bg-0" onclick="download('Workflow.svg', this)"/><div class="label">Workflow.svg</div></div>
    
      <div id="workspaces.svg" class="imgbox"><img src="Workspaces.svg" class="bg-0" onclick="download('Workspaces.svg', this)"/><div class="label">Workspaces.svg</div></div>
    
  </div>

  <script>
    var bgSetting = 0;

    function toggleBg() {
      bgSetting++
      if(bgSetting > 2) bgSetting = 0;
      for(let img of document.getElementsByTagName("img")) {
        img.className = `bg-${bgSetting}`;
      }
    }
    
    function search() {
      let query = document.getElementById('finder').value.trim().toLowerCase()
      if(query.length <= 0) {
        for(let imgbox of document.getElementsByClassName("imgbox")) {
          imgbox.style.display = "inline-block"
        }
      }
      for(let imgbox of document.getElementsByClassName("imgbox")) {
        imgbox.style.display = "inline-block"
        if(!imgbox.id.includes(query)) {
          imgbox.style.display = "none"
        }
      }
    }
    
    function download(f, e) {
      if(document.getElementById("pngcheck").checked) {
        var data = getBase64Image(e);
        let a = document.createElement('a')
        a.href = "data:application/octet-stream;base64," + data
        a.download = f.replace('.svg', '.png')
        a.click()
      } else {
        let a = document.createElement('a')
        a.href = f
        a.download = f
        a.click()
      }
    }
    
    // Actual magic
    function getBase64Image(img) {
      var canvas = document.createElement("canvas");
      canvas.width = img.naturalWidth;
      canvas.height = img.naturalHeight;
      console.log(canvas.width , canvas.height)
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0);
      var dataURL = canvas.toDataURL("image/png");
      return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
    }
    
    function updateCount() {
      document.querySelector('#count').innerHTML = ''+document.querySelectorAll(".imgbox").length
    }

    updateCount()
  </script>
</body>
</html>