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.

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.

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.

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.

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.

• 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.

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.