Generating an icon font for the Amazon Web Services architecture icons
A little background
Amazon Web Services, among other things, publishes an official set of architecture icons which are often used in a Lucid (or Microsoft Visio) diagrams to document cloud infrastructure.
Traditionally, the images which are used in diagrams are a lot larger than what someone might use it for on a website, resume, or in a button – more on that later. ;-)
Interestingly enough, Google Cloud, IBM and Cisco all provide similar image sets, so the following steps can be easily applied to those as well.
What is an “icon font” and why is it necessary?
Icon fonts are similar to an actual font (Helvetica, Times New Roman, etc.) which you can make bold, change colors, and even stylize however you want.
Instead of having letters and numbers, these icon fonts contain a vector-based graphic, which can easily ne manipulated through markup (HTML or CSS).
One ultra popular icon font which I use extensively (among others) is called Font Awesome and it provides the tiny house Because these icons are just like regular text, this also allows me and other designers to customize them CSS (Cascading Style Sheets).
Here’s some inspiration:
Here’s some icons which may have encountered in the past:
And now, here’s the same icons, embedded inside of a button:
Icon fonts can also animate:
Or they can be colored:
Loading…
Wow, that’s really great, but how does this even relate to AWS?
Ultimately, I wanted to use these small icons the skills section of my resume but I haven’t been able to find an “icon font” for the architecture icons which I have exposure to.
Here’s sort of an example of what I had in mind (which is now possible):
EC2
VPC
RDS
As I was working on this, I couldn’t help but think about the other possibilities that exist:
- JavaScript libraries like GoJS
- Google Chart
- 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:
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
I recommend using the perl-based rename application which supports regular expressions. I have put together the following Github gist of how I tackled this:
Step 2 - Processing / minifying / 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 Github gist which can be run on a specified directory of SVG images.
Step 3 - Import and convert the SVG images into a font icon
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.
For this, we’re importing the following packages:
- gulp
- gulp-path
- gulp-iconfont
- gulp-iconfont-css
- gulp-consolidate
- gulp-svgmin
- gulp-rename
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.
Once you have the icons prepared, place them in the src/staged directory and then run the command “gulp”
✗ 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
Now you have created your own web font. Feel fred to open the dist/demo/index.html file.
