Civic icons and images

Visual resources to enhance your website, voter guides, posters, and mailers

Icons are a simple but powerful tool for communicating civic information. One of the reasons icons are so impactful is because we process visual content 60,000 times faster than written text.  But icons can also enhance written content by helping to organize and clarify it. What’s more, icons grab the eye, making it easier for readers to skim material to quickly find what they need.

This tool is a library of civic images and icons — organized into a variety of collections — that you can use in a diversity of election materials, including your election website, voter guides, and posters. Along with the images are guidelines to help you adapt them to your uses and use them effectively.

What you'll need

  • Computer with internet access
  • Basic image viewing and editing platform like Microsoft Paint or Preview (most computers already have these programs)
  • Adobe Illustrator (necessary only if you wish to make significant changes to an image)

Table of contents

  1. Downloading the folders and files
  2. Choosing the right file format
  3. Resizing images
  4. Positioning images effectively
  5. Adapting icons to match your brand
  6. Making icons accessible

Downloading the folders and files

The first step to use these icons is to download the folders and extract the files from them.

  • To download a folder, scroll to the List of the collections and click the download link next to the collection. Your download should begin automatically, and the folder will be saved to your default download location.
  • The icon folders are zip files. To use the icons, you will need to extract them from the zip file.
  • To extract the files on a PC, right-click on the zip file and select Extract All. You’ll be prompted to choose a location. Do so, and then press Extract. Your computer will extract the files and create a new folder.
  • To extract the files on an Apple computer, you can simply double-click on the zip file, and your computer will extract the files into a new folder.

Once the zip files are extracted, you can explore the folder’s contents and access the image files that you want to use.

Choosing the right file format

You’ll notice that the icon folders contain several subfolders – each with a different file type. Each image file type is suited for a particular purpose, so be sure to select the file format that fits your use.

  • The Poster folder contains TIF files. The largest of the file formats, TIF’s work well for making posters and large-size documents because they can be scaled large without pixilation or distortion.
  • The Print folder contains JPG files. Smaller than TIFs but larger than PNGs, JPG files are well suited for use in printed materials and Word documents. JPGs will become pixelated if scaled too large.
  • The Web folder contains PNG files. The smallest of the file formats, PNGs are ideal for web publishing. They’re also useful in Word documents when you need a transparent background.
  • The Working File folder contains AI files. In vector format, AIs are the best file format for making significant changes to the original image. This format will require Adobe Illustrator software.

Resizing images

Regardless of the file format you choose, your images come in a default size, and you may want to resize them to suit your needs.

To resize your image on a PC using Microsoft Paint:

  • Right-click the file for the image you want to resize, scroll down to Open with, and select Paint.
  • Once your file is open in Paint, go to the menu above the image and click Resize.
A user clicks the Resize button to begin resizing in Paint

Start resizing in Paint by clicking the Resize button

  • In the pop-up box, you can choose how you would like to resize the image. First of all, make sure that Maintain aspect ratio is selected; this setting will make it so that changing your file size won’t distort the image.
  • If you want to resize by percentage, select Percentage and enter the percentage you desire into the Horizontal box. The Vertical box will automatically match your input. If you want to resize according to the number of pixels, select Pixels and enter the size you desire into the Horizontal box. The Vertical box will automatically match your input. Once you’ve entered in your information, click the OK button, and Paint will resize your image.
A user has selected Maintain aspect ratio and is preparing to resize by percentage

Once you’ve made sure to maintain the aspect ratio, you can resize by percentage or by pixels

  • You still need to save your image for the resizing to stick. Go up to the file icon menu and select either Save or Save as, depending on whether you want to replace the original file with the resized file or if you want to keep both.

To resize your image on an Apple computer using Preview:

  • Double click the file for the image you want to resize, and your computer will open the file in Preview.
  • Once your file is open in Preview, go up to the Tools icon, click it, and select Adjust Size.
A user has gone to the Tools menu and is selecting Adjust Size to resize in Preview

Start resizing in Preview by selecting Adjust Size from the Tools menu

  • In the pop-up box, you can choose from several options for how to resize the image. First of all, make sure that Scale proportionally is selected; this setting will make it so that changing your file size won’t distort the image.
  • If you want to fit the image into a pre-determined size, go up to Fit into, click the drop-down menu beside it, and select the size you want. If you want to resize by percentage or by pixels, inches, or another special metric, select the metric in the metric drop-down menu and enter the size you desire in the Width box. The Height box will automatically match your input. Once you’ve entered in your information, click the OK button, and Paint will resize your image.
A user is choosing to either fit the image into a preexisting size or resize by percentage or measurement

In Preview you can fit into a preexisting size or resize by percentage or by measurement

  • You still need to save your image for the resizing to stick. To replace the original file, go to the File menu and select Save. To keep the older file, go to the File menu, select Rename, enter in a new file name, and then return to the File menu and select Save.

Positioning images effectively

To be as effective as possible, your images need to be carefully positioned in your document. Keep in mind these basic design principles when considering where and how to position civic icons in your materials:

  • Contrast emphasizes what’s important. You can use contrast by differentiating your icons from each other or from other elements in your document.
  • Repetition is achieved by repeating elements throughout a document. Using icons consistently can contribute to a clean, uniform appearance and make it easier for readers to use your content.
  • Alignment is connecting every element via an invisible line. It makes sense to align your icons to give your document a sense of order.
  • Proximity is achieved by grouping things together that are related to one another. Empty space, or white space, helps keep your document clean and will help call attention to your icon. At the same time, to be the most useful, your icon may need to be in close proximity to the relevant content.

When deciding where and how to place your images, make it a group effort. Ask members of your staff to give their reaction to the way you’re positioning icons to ensure that readers are responding to them as you intend.

Adapting icons to match your brand

Nearly all of the images in this tool come in black and white so that they are easy to see and understand in small sizes, in print, and online. If you want to change the image colors to fit your brand colors, your graphic designer can adjust the colors using a professional graphics editing program.

If you do change the colors, make sure to use color combinations with clear, strong contrast so that the icons remain easy to read and understand.

Making icons accessible

As visual tools, icons and images can be quite helpful to sighted people, but what about for people who can’t see them?

Even though people with disabilities may not be able to actually see your icons, they should still be able to access the meaning and purpose of each icon. Through thoughtful placement and textual aids, you can make sure that your icons are useful even to everyone, regardless of ability.

Here are some guidelines to help you make your civic icons more accessible:

Managing links with icons

  • If the image is included as part of a link, make sure there’s only one link — not one link for the image and a separate one for the accompanying text.

Using alt text to communicate your icon’s purpose

  • If you’re using an image that contributes additional meaning and isn’t purely decorative, make sure to include helpful alt text. The image folders in these collections come with suggested alt text in the read.me file, but you may want to alter it or add additional alt text.

How do you write good alt text? What should your alt text say?

When writing alt text, it’s tempting to just describe what the image looks like. But that’s the wrong idea. Instead, your alt text should explain the purpose behind the image, or it can indicate what’s happening in the image. Look at the image and consider what extra idea or point it’s contributing.

For example, if you’re using an envelope icon to show that it needs to include a stamp, the alt text might say “Envelope with first class postage stamp” or “Be sure to put a stamp on the envelope before you mail it.”

Keep in mind that there’s no need to precede alt text with a notation like “Image” or “This graphic shows” because screen readers already make that clear.

In your html, alt text will take a form like this:

alt=“The Hardin County courthouse”

  • If you’re using an image that serves only a decorative purpose and does not contribute an idea of its own, no alt text is needed. If you’re working with a PDF, mark the image as a background. If you’re using another platform, insert null alt text (alt=“ ”). These settings will allow screen readers to skip over the image.
  • When you use an icon to illustrate instructions, make sure the alt text is written in context. In other words, your alt text should fit logically in the sequence of the instructions at the precise point where your image appears. This way the alt text won’t just repeat information that’s already in the instructions.

Because every publishing program is different, the process of adding alt text to images varies from platform to platform.

To get an excellent overview on making images accessible through text, check out this presentation on how to write great alt text created by Whitney Quesenbery of the Center for Civic Design.

If you want some additional guidance for creating alt text, consult this helpful decision tree for writing alt text created by the website 4 Syllables.

Table of contents

  1. Gallery of images
  2. List of the collections

The civic icons and images in this tool are grouped into collections that have been organized by theme, shown in both a gallery and a list.

The gallery shows the images in each collection with a description of the contents and a download link. To browse the collections, use the grey next and back buttons.

To download a collection, select the download link in the gallery or in the list below. You’ll get all of the images as well as suggestions for alt text to help make the images accessible.

Conditions of use

We want these icons and images to be shared and used far and wide — by election officials, civic designers, and vendors alike — provided  they do not sell the images or their derivatives. In this spirit, the images in this collection are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Creative Commons License

This license comes with the following use guidelines.

You may …

  • make changes to the images — including but not limited to size and color
  • use the images for commercial purposes

You must …

  • attribute the images to Election Tools
  • make the images available free of cost — whether you have changed them or not

Gallery of images

Sampler of Collection 1
Forms of Communication Icons
8 images
White icons on black background for Twitter, Facebook, email, web/online, telephone, mail, and apps.
Download the Forms of Communication Collection
1 of
Sampler of Collection 2
Forms of Communication Icons
8 images
Black icons on white background for Twitter, Facebook, email, web/online, telephone, mail, and apps.
Download the Forms of Communication Collection
1 of
Sampler of Collection 3
Voter Assistance Icons
5 images
White icons with black background representing language, common questions, disability sign, voter, and TTY.
Download the Voter Assistance Icon Collection
1 of
Sampler of Collection 4
Voter Assistance Icons
5 images
Black icons with white background representing language, common questions, disability sign, voter, and TTY.
Download the Voter Assistance Icon Collection
1 of
Sampler of Collection 5
Voter Assistance + Information Illustrations
5 images
Illustrations for voter assistance and information, including language, common questions, disability sign, voter, and early voting.
Download the Voter Assistance Illustrations Collection
1 of
Sampler of Collection 6
Voter Guide Page Header Illustrations
11 images
Page headers include: ballot measures, bill of rights, disability sign, early voting, language, practice ballot, vote at polls, and vote by mail.
Download the Voter Guide Page Header Collection
1 of
Sampler of Collection 7
Election Locale Illustrations
3 images
Black, gray, and white illustrations of local, state, and national election buildings.
Download the Election Locale Illustration Collection
1 of
Sampler of Collection 8
Election Locale Icons
4 images
White icons on black background representing election locales, including polling place, state elections, city elections, and address.
Download the Election Locale Icon Collection
1 of
Sampler of Collection 9
Election Locale Icons
4 images
Black icons on white background representing election locales, including polling place, state elections, city elections, and address.
Download the Election Locale Icon Collection
1 of
Sampler of collection 10
How to vote by Mail, Fax + Dropbox
12 images
Instructions and individual images for how to vote by fax, mail, or dropbox. Versions available in arrows, rectangles left, and right.
Download Collection for arrow-style ballots (more options in the list below)
1 of
Sampler of Collection 11
How to Cast Vote in Polling Place
14 images
Instructions and individual images for how to cast ballot in polls. Versions available with ballot in arrows, boxes, bubbles, rectangles left, and right.
Download Collection for arrow-style ballots (more options in the list below)
1 of
Sampler of Collection 12
How to Mark
2 images
Instructions for marking ballot. Versions available with ballot in arrows, rectangles left, rectangles right, and bubbles.
Download Collection 12
1 of
Sampler of Collection 13
How to Mark Ballot
4 images
Instructions for how to mark ballot. Versions available with ballot in arrows, rectangles left, rectangles right, and bubbles.
Download Collection 13
1 of
Sampler of Collection 14
Forms and Resources Icons
5 images
White icons on black background for form, petition, dropbox, calendar, and voter guide.
Download Collection 14
1 of
Sampler of Collection 15
Forms and Resources Icons
5 images
Black icons on white background for form, petition, dropbox, calendar, and voter guide.
Download Collection 15
1 of
Sampler of Collection 16
Forms, Resources, and Miscellaneous Illustrations
6 images
Illustrations for ballot measures, voter bill of rights, practice ballots, vote at polls, early voting calendar, and star.
Download Collection 16
1 of
Sampler of Collection 17
Mail or Provisional Ballot
6 images
Illustrations representing permanent vote by mail, put in envelope, send to election office, put in mailbox, sign envelope, and sign back of envelope.
Download Collection 17
1 of
Sampler of Collection 18
Voter Updates + Registration
9 images
Icons for check status, update address and registration, vote by mail, UOCAVA, register at government building, by mail, in person, and online.
Download Collection 18
1 of
Sampler of Collection 19
Voter Updates + Registration
9 images
Icons for check status, update address and registration, vote by mail, UOCAVA, register at government building, by mail, in person, and online.
Download Collection 19
1 of
Sampler of Collection 20
Voter Prep + Information
9 images
Icons for current office holders, drive-thru, election results, go green, hearing impaired, information, photo ID, time, and what’s on the the ballot.
Download Collection 20
1 of
Sampler of Collection 21
Voter Prep + Information
9 images
Icons for current office holders, drive-thru, election results, go green, hearing impaired, information, photo ID, time, and what’s on the the ballot.
Download Collection 21
1 of
Sampler of collection 22
Information for voters
8 images
Illustrations and page headers for common questions, information, candidate statement, and what’s on the ballot.
Download Collection 22
1 of
Sampler of Collection 23
Miscellaneous Icons
4 images
Illustrations and page headers for common questions, information, candidate statement, and what’s on the ballot.
Download Collection 23
1 of
Sampler of Collection 24
Ballot Secrecy
4 images
How to mark ballot, ballot secrecy folder and how to use touchscreen.
Download Collection 24
1 of

List of the collections

Collection Number and Title # of Images Added
Thumbnail of Collection 1 Forms of Communication
Download Collection 1
8 images May 15, 2016
Thumbnail of Collection 2 Forms of Communication
Download Collection 2
8 images May 15, 2016
Thumbnail of Collection 3 Voter Assistance Icons
Download Collection 3
5 images May 15, 2016
Thumbnail of Collection 4 Voter Assistance Icons
Download Collection 4
5 images May 15, 2016
Thumbnail of Collection 5 Voter Assistance Illustrations
Download Collection 5
5 images May 15, 2016
Thumbnail of Collection 6 Voter Guide Page Headers
Download Collection 6
11 images May 15, 2016
Thumbnail of Collection 7 Election Locale Images
Download Collection 7
3 images May 15, 2016
Thumbnail of Collection 8 Election Locale Icons
Download Collection 8
4 images May 15, 2016
Thumbnail of Collection 9 Election Locale Icons
Download Collection 9
4 images May 15, 2016
Thumbnail of Collection 10a Mail, Fax, and Dropbox
Download Collection 10 Arrows
Download Collection 10 Rectangles Left
Download Collection 10 Rectangles Right
Download Collection 10 Boxes
Download Collection 10 Bubbles
12 images May 15, 2016
Thumbnail of Collection 11 Cast Vote in Polling Place
Download Collection 11 Arrows
Download Collection 11 Rectangles Left
Download Collection 11 Rectangles Right
Download Collection 11 Boxes
Download Collection 11 Bubbles
14 images May 15, 2016
Thumbnail of Collection 12 How to Mark
Download Collection 12
2 images May 15, 2016
Thumbnail of Collection 13 How to Mark Ballot
Download Collection 13
4 images May 15, 2016
Thumbnail of Collection 14 Forms and Other Resources Icons
Download Collection 14
5 images May 15, 2016
Thumbnail of Collection 15 Forms and Other Resources Icons
Download Collection 15
5 images May 15, 2016
Thumbnail of Collection 16 Forms, Resources + Miscellaneous
Download Collection 16
6 images May 15, 2016
Vote by Mail and Provisional Ballot
Download Collection 17
6 images May 15, 2016
Voter Updates and Registration
Download Collection 18
9 images August 1, 2016
Voter Updates and Registration
Download Collection 19
9 images August 1, 2016
Voter Updates and Registration
Download Collection 20
9 images August 1, 2016
Voter Updates and Registration
Download Collection 21
9 images August 1, 2016
Voter Updates and Registration
Download Collection 22
8 images August 1, 2016
Miscellaneous Icons + Illustrations
Download Collection 23
8 images January 5, 2017
Ballot Secrecy
Download Collection 24
4 images January 5, 2017