Icon Generator

A webservice for generating PNG icons from icon fonts (Font Awesome etc.).

The original motivation for creating this software was to have a way to easily generate icons for Alfred workflows.

Available fonts

These fonts are currently supported by the service. Click the "preview" links to see the each font's icons and their names.

API name Website Preview
elusive Elusive Icons View icons
fontawesome Font Awesome View icons
icomoon IcoMoon View icons
material Material Design View icons
octicons Octicons View icons
open-iconic Open Iconic View icons
typicons Typicons View icons
weathericons Weather Icons View icons

Examples

Note: Be aware when mixing icons from different fonts that they can have significantly different sizes. In particular, some, but not all, Typicons are significantly smaller than icons from the other fonts:

Elusive Icons Font Awesome Typicons
adjust adjust adjust-contrast
inbox download download-outline

Usage

You can create and download icons manually via the web interface or download them directly with curl or the like.

The URL looks like this:

http://icons.example.com/icon/<fontname>/<csscolour>/<character-name>[/<size>][.png]

Argument Description Examples
fontname The name of the font (see above). fontawesome, elusive
csscolor A CSS color without preceding #. May be 3 or 6 characters, upper- or lowercase. FFF, e3a2d1, 000000
character-name The name of the icon/character. Use the preview links to view available icons and their names. adult, ban-circle, adjust, youtube
size (optional, default is 256) The size (width = height) of the generated PNG image in pixels. 64, 512, 1400

The server will redirect the client to the actual URL of the image (after it has been generated, if necessary). Thus, the client must follow redirects.

Examples

Download black Apple logo to apple.png:

curl -sSL -o apple.png http://icons.example.com/icon/fontawesome/000/apple

Include icon in HTML:

<img src="http://icons.example.com/icon/fontawesome/666/apple" alt="Apple Logo">

Apple Logo

Custom size:

<img src="http://icons.example.com/icon/fontawesome/666/apple/32" alt="Small Apple Logo">

Small Apple Logo

More information

The source code can be found on GitHub.