Americons

Getting Started

Installing Americons

You can get Americons via the releases page on GitHub or via NPM:

npm install --save americons

Our releases are packaged with the following contents:

Using Americons

The easiest way is to copy the Americons folder to the root of your web application and include the minified CSS file in your HTML file.

If you would rather use the Sass files, make sure the americons font files end up in a folder named "fonts" next to the folder containing your compiled CSS.

SVG Options

If you would rather just use the SVG files directly instead of the icon fonts, look in the SVG directory. The SVG files in the icons folder are the ones used in the icon fonts. They have been processed using SVGO and are ready for you to include in your projects and style however you want.

I've also included a folder named states that contains three separate SVG files for each state with varying resolutions. The low resolution files are smaller but have less detail. The high resolution files are larger and more complex, with much more detail. The medium ones are in between. For more information on how these files were generated, see the companion project americons-geo. The best one to use will depend on the size you plan on rendering them at.

For example, here is the state of Ohio at a low resolution:

oh-low.svg (size: 3kb)

Here is the state of Ohio at a high resolution:

oh-hi.svg (size: 27kb)

As you can see, there's much more detail in the high resolution file along the Ohio river and Lake Erie. But the file size is also 9x larger.

Now here are the same two files at 32x32 pixels:

oh-low.svg (size: 3kb)

oh-hi.svg (size: 27kb)

At this resolution, the differences are much harder to spot, however the low resolution file is smaller and easier for the browser to render quickly.

SVG use tag

There is a symbols folder in the svg directory that has a text file for each state containing an svg symbol definition. To use these, you'll first need to inject an svg block into your markup containing a defs block with the symbols you want to use. Then you can use them anywhere in your page with something like:


            <svg class="some-custom-class">
                <use xlink:href="#am-oh" />
            </svg>
        

For an example of how to do this, look at the source code for this page. You'll see the the ohsmall and ohlarge symbols in the hidden SVG at the top of the file.

Icons

ak
<i class="am am-ak"></i>
al
<i class="am am-al"></i>
ar
<i class="am am-ar"></i>
az
<i class="am am-az"></i>
ca
<i class="am am-ca"></i>
co
<i class="am am-co"></i>
ct
<i class="am am-ct"></i>
dc
<i class="am am-dc"></i>
de
<i class="am am-de"></i>
fl
<i class="am am-fl"></i>
flag-alt
<i class="am am-flag-alt"></i>
flag
<i class="am am-flag"></i>
ga
<i class="am am-ga"></i>
hi
<i class="am am-hi"></i>
ia
<i class="am am-ia"></i>
id
<i class="am am-id"></i>
il
<i class="am am-il"></i>
in
<i class="am am-in"></i>
ks
<i class="am am-ks"></i>
ky
<i class="am am-ky"></i>
la
<i class="am am-la"></i>
ma
<i class="am am-ma"></i>
md
<i class="am am-md"></i>
me
<i class="am am-me"></i>
mi
<i class="am am-mi"></i>
mn
<i class="am am-mn"></i>
mo
<i class="am am-mo"></i>
ms
<i class="am am-ms"></i>
mt
<i class="am am-mt"></i>
nc
<i class="am am-nc"></i>
nd
<i class="am am-nd"></i>
ne
<i class="am am-ne"></i>
nh
<i class="am am-nh"></i>
nj
<i class="am am-nj"></i>
nm
<i class="am am-nm"></i>
nv
<i class="am am-nv"></i>
ny
<i class="am am-ny"></i>
oh
<i class="am am-oh"></i>
ok
<i class="am am-ok"></i>
or
<i class="am am-or"></i>
pa
<i class="am am-pa"></i>
pr
<i class="am am-pr"></i>
ri
<i class="am am-ri"></i>
sc
<i class="am am-sc"></i>
sd
<i class="am am-sd"></i>
tn
<i class="am am-tn"></i>
tx
<i class="am am-tx"></i>
usa-contiguous
<i class="am am-usa-contiguous"></i>
usa
<i class="am am-usa"></i>
ut
<i class="am am-ut"></i>
va
<i class="am am-va"></i>
vt
<i class="am am-vt"></i>
wa
<i class="am am-wa"></i>
wi
<i class="am am-wi"></i>
wv
<i class="am am-wv"></i>
wy
<i class="am am-wy"></i>