OPENGOVICONS

OpenGov

General

Arrow

Document

Social Network

Grpah

Product

CSS MAPPING

CSS Class Mapping

To use the font on websites and products, insert the icon class name into any HTML tag to add the icon. The default CSS class prefix is 'icon-'. Stack two glyphs on top of each other to create the duotone icons.

Use font-size in multiples of the grid: grid 16x16px = 8px, 16px, 32px, and grid 20x20px: 10px, 20px, 40px.

Examples

DESIGN GUIDELINES

Monotone

- Create artboard in Illustrator and set a grid of 16x16px

- Start with a medium size solid shape

- The bold line version should be the biggest and taking up more space

- Duplicate the solid icon to use as base to create the line version

- Swap stroke and fill (Shift + x)

- Use 1px stroke for thin line and 2px for bold line

- Adjust round corners (Effect > Stylize > Round Corners...)

- Expand all strokes and round corners

- Combine or knockout the shapes

Duotone

- Create artboard in Illustrator and set a grid of 20x20px

- Design the icon with foreground and background layers

- Put them on different artboards

Export to Fontastic

We use Fontastic.me service to create our iconfont. Contact design@opengov.com for access to the service.

- In Illustrator, export each artboard as individual .svg file (Save As... > svg (Use Artboards))

- Log in to Fontastic.me and look for the appropriate section

- Click section menu > Add icons to this set > Add the newly created .svg file

- Switch to Customize tab > Name the new icon (keep the icon naming consistent)

- Switch to Download tab and download the file