Creating an icon font for the AWS Architecture icons

# Introduction

Amazon Web Services, among other things, publishes an official set of architecture icons (the actual picture representation to the AWS application or services) which are often used in a Lucid Charts (or Microsoft Visio) diagram to document cloud infrastructure.

Traditionally, the size of the icons which get represented in diagrams are a lot larger than what someone might use them for on a website, resume, or in a button.

In addition to AWS, Google Cloud, IBM and Cisco all provide similar sets to allow IT professionals to create guides, charts, and diagrams featuring their products, c

# What is an “icon font” and why are they necessary?

Icon fonts are similar to an actual font (Helvetica, Times New Roman, etc.) which you can make bold, change colors, and stylize how you want.

However, instead of having letters and numbers, they an icon font shows tiny glyph or symbols… somewhat akin to a dingbat.

One ultra popular icon font which I use extensively on this website is called Font Awesome. It provides the tiny house which I use extensively in the navigation bar. Because these icons are treated just like regular text, this also allows me and other designers to customize them CSS (Cascading Style Sheets). Here a few examples:

And here’s the same icons, embedded in a button:

Icon fonts can even animate!

Or they can be colored:

Loading…

# Wow, that’s really great, but how does this even relate to AWS?

My goal was to utilize these icons the skills section of my resume but until now I haven’t been able to find any sort of icon font package which has the applications and service icons available which I wanted to showcase.

Here’s an example of what I had in mind (which is now possible):

EC2
45%
VPC
45%
RDS
45%

While I was working on this, I couldn’t help but think about the other possibilities that exist where I might be able to use these icons:

JavaScript libraries like GoJS
Google Charts
Mermaid diagrams.

The possibilities are endless. Now, you can (relatively easily) place these icons on a web page, use it in documentation, on a wiki, or embed them in GUI elements such buttons:

Here’s an example Google Chart which featuring AWS icons

# Icon Font Conversion Process

# Step 1 - Staging the image “icons” for import

Inside the ZIP file is around 2000 SVG and around 2300 PNG files.

For this project, we are only interested in the SVGs files. While useful for other things, PNG images don’t scale and don’t compress as nicely as SVG (text-based) files traditionally do. Additinoally, we can easily manipulate the SVG images via the command line, or any other text-based programs.

The 2021-07-30 version of the archive is organized as follows:

Architecture-Service-Icons_09172021

Each AWS service has icon representations which are sized sized 16x16, 32x32, 48x48 and 64x64
I elected to use the 48x48 icons, so we are consistent with category and resource icons (resource max size is 48x48)
After sorting out the smaller (and larger) icons, this equates to around 293 icons

Category-Icons_07302021

Equates to around 27 icons

Resource-Icons_07302021

Equates to around 466 (dark/light) icons
We only need one of the two

# Renaming the image files (optional)

I recommend using the perl-based rename application which allows you to rename files in bulk using regular expressions. Here’s a bunch of code snippets on how I went about that. Not all of these would apply to all projects…

 bash   

############################ architecture directory ###

# remove spaces

rename 's/ //g' *

# convet - to _

rename 's/-/_/g' *

# remove the word Arch_

rename 's/Arch_//g' *

# remove Amazon

rename 's/Amazon_//g' *

# remove AWS

rename 's/AWS_//g' *

# remove _48

rename 's/_48//g' *

# convert to lowercase letters

rename -f 'y/A-Z/a-z/' *

############################# category directory ###

# remove spaces

rename 's/ //g' *

# convet - to _

rename 's/-/_/g' *

# remove the word Arch_

rename 's/Arch_//g' *

# remove the word category

rename 's/Category_//g' *

# remove _64

rename 's/_64//g' *

# convert to lowercase letters

rename -f 'y/A-Z/a-z/' *

########################## resource directory

# remove spaces

rename 's/ //g' *

# convet - to _

rename 's/-/_/g' *

# remove the word Res_

rename 's/Res_//g' *

# remove the word Amazon_

rename 's/Amazon_//g' *

# remove AWS

rename 's/^AWS_//g' *

# remove _48_Light

rename 's/_48_Light//g' *

# convert to lower case letters

rename -f 'y/A-Z/a-z/' *

# Step 2 - Processing, minifying and simplifying the icons

When the icons are imported, they will be converted to black and white. The icons have a background gradient, and white path will need to be adjusted before they can be imported.

For this task, I elected to use a the generic XML editing command line application xmlstarlet and have put together the following shell script which can be run on a specified directory of SVG images.

 bash   

#!/bin/sh
for f in test/architecture/*.svg; do
    echo "Processing $f"
    filename=${f%.*}
    tmpFile="$filename.tmp.svg"

    # Remove the gradient background and copy the icon to the tmp icon path
    xmlstarlet ed -N ns=http://www.w3.org/2000/svg -d "//ns:g[contains(@fill,'url(#linearGradient-1)')]" $f > $tmpFile
    xmlstarlet ed --inplace -N ns=http://www.w3.org/2000/svg -d "//ns:path[contains(@fill,'url(#linearGradient-1)')]" $tmpFile
    xmlstarlet ed --inplace -N ns=http://www.w3.org/2000/svg -d "//ns:linearGradient[contains(@id,'linearGradient-1')]" $tmpFile

    # Remove the border from the category icons
    xmlstarlet ed --inplace -N ns=http://www.w3.org/2000/svg -d "//ns:path[contains(@stroke,'#879196')]" $tmpFile

    # Remove the background rectangle and copy the icon to the tmp icon path
    xmlstarlet ed --inplace -N ns=http://www.w3.org/2000/svg -d "//ns:rect[contains(@fill,'url(#linearGradient-1)')]" $tmpFile

    # Change path from fill white (#FFFFFF) to black (#000000)
    xmlstarlet ed --inplace -N ns=http://www.w3.org/2000/svg -u "//ns:path[contains(@fill,'#FFFFFF')]/@fill" -v "#000000" $tmpFile

    # Change path from fill white (#FFF) to black (#000)
    xmlstarlet ed --inplace -N ns=http://www.w3.org/2000/svg -u "//ns:path[contains(@fill,'#FFF')]/@fill" -v "#000" $tmpFile

    # Change path from fill (#B0084D) (light icons) to black (#000000)
    xmlstarlet ed --inplace -N ns=http://www.w3.org/2000/svg -u "//ns:path[contains(@fill,'#B0084D')]/@fill" -v "#000000" $tmpFile
    
    # Change path from fill (#FF4F8B) (dark icons) to black (#000000)
    xmlstarlet ed --inplace -N ns=http://www.w3.org/2000/svg -u "//ns:path[contains(@fill,'#FF4F8B')]/@fill" -v "#000000" $tmpFile

    # Change g from white (#FFFFFF) (dark icons) to black (#000000)
    xmlstarlet ed --inplace -N ns=http://www.w3.org/2000/svg -u "//ns:g[contains(@fill,'#FFFFFF')]/@fill" -v "#000000" $tmpFile

    # Change g from white (#FFF) to black (#000000)
    xmlstarlet ed --inplace -N ns=http://www.w3.org/2000/svg -u "//ns:g[contains(@fill,'#FFF')]/@fill" -v "#000" $tmpFile
done;

# Step 3 - Import and convert the SVG images into an icon font

For the sake of this experiment, I have elected to use Gulp.

Gulp is a Node.js application that is controlled through a JavaScript file. Since Gulp is powered by JavaScript, it’s a great tool for tackling these types of web-related activities as there are many libraries available that can convert almost anything to CSS or generate a HTML file based on a template.

 javascript  gulpfile.js 

var gulp = require('gulp');
var path = require('gulp-path');
var iconfont = require('gulp-iconfont');
var iconfontCSS = require('gulp-iconfont-css');
var consolidate = require('gulp-consolidate');
var svgmin = require ('gulp-svgmin');
var rename = require('gulp-rename');

gulp.task('default', function () {
    return gulp.src('./src/staged/*.svg')
        .pipe(svgmin())
        .pipe(iconfont({
            fontName: 'aws',
            formats: ['svg', 'ttf', 'eot', 'woff', 'woff2'],
            normalize: true,
            fontHeight: 1024,
        }))
        .on('glyphs', function (glyphs) {
            console.log(glyphs);
            gulp.src('./src/templates/_scss.scss')
                .pipe(consolidate('lodash', {
                    glyphs: glyphs,
                    appendUnicode: true,
                    prependUnicode: true,
                    fontName: 'aws',
                    fontPath: '../fonts/',
                    cssClass: 'aws'
                }))
                .pipe(gulp.dest('./dist/scss'));
            gulp.src('./src/templates/demo/_css.css')
                .pipe(consolidate('lodash', {
                    glyphs: glyphs,
                    fontName: 'aws',
                    fontPath: '../fonts/',
                    cssClass: 'aws'
                }))
                .pipe(rename('aws.css'))
                .pipe(gulp.dest('./dist/demo/'));
            gulp.src('./src/templates/demo/_index.html')
                .pipe(consolidate('lodash', {
                        glyphs: glyphs,
                        fontName: 'aws',
                        fontPath: '../fonts/',
                        cssClass: 'aws'
                }))
                .pipe(rename('index.html'))
                .pipe(gulp.dest('./dist/demo'))
        })
        .pipe(gulp.dest('./dist/fonts'));
});

For this, we’re importing the following libraries:

gulp
gulp-path
gulp-iconfont
gulp-iconfont-css
gulp-consolidate
gulp-svgmin
gulp-rename

Once you have the icons prepared, place them in the src/staged directory and then run the command “gulp”

 bash   

$ gulp
    [15:34:35] Using gulpfile ~/Github/aws-architecture-icon-font/gulpfile.js
    [15:34:35] Starting 'default'...
    [15:34:41] gulp-svgicons2svgfont: Font created
    [
      { name: 'activate', unicode: [ '' ], color: '#000' },
      { name: 'alexa_for_business', unicode: [ '' ], color: '#000' },
      { name: 'amplify', unicode: [ '' ], color: '#000' },
      {
        name: 'amplify_aws_amplify_studio',
        unicode: [ '' ],
        color: '#BF0816'
      },
      { name: 'analytics', unicode: [ '' ], color: '#000' },
      { name: 'apache_mxnet_on_', unicode: [ '' ], color: '#000' },
      { name: 'api_gateway', unicode: [ '' ], color: '#000' },
      { name: 'api_gateway_endpoint', unicode: [ '' ], color: '#000' },
      { name: 'app_mesh', unicode: [ '' ], color: '#000' },
      { name: 'app_mesh_mesh', unicode: [ '' ], color: '#000' },
      { name: 'app_mesh_virtual_gateway', unicode: [ '' ], color: '#000' },
      { name: 'app_mesh_virtual_node', unicode: [ '' ], color: '#000' },
      { name: 'app_mesh_virtual_router', unicode: [ '' ], color: '#000' },
      { name: 'app_mesh_virtual_service', unicode: [ '' ], color: '#000' },
      { name: 'app_runner', unicode: [ '' ], color: '#000' },
      { name: 'appconfig', unicode: [ '' ], color: '#000' },
      { name: 'appflow', unicode: [ '' ], color: '#000' },
      { name: 'application_auto_scaling', unicode: [ '' ], color: '#000' },
      {
        name: 'application_cost_profiler',
        unicode: [ '' ],
        color: '#000'
      },

      { a bunch more console output ... }
    ]
    [15:34:47] Finished 'default' after 11 s

And at that point you’re free to open up the demo and check out your newly created icon font!

# Additional remarks

I also tried cloud services like Icomoon.io and Fontello but I was largely unimpressed with both of these from a performance stand point. Fontello is the more unintuitive of the two. The dashboard instructs you to drag and drop icons, but doesn’t indicate any limitations. Fontello limits you to SVG icons only. Both have free trial limitations and eventually want you to pay them money to use their service, even if you don’t use their own font icons. If you have a handful of icons, Icomoon is likely the better choice as it has rather nice built in editor. Also, neither service seemed interested in taking on my ~1000 icon to icon font conversion request. And I had no intention of testing the 100-200- whatever the free limit is to these services.