Iconography

Usage

Icons visually reinforce an interface action, file type, status, or category. Icons should leverage visual metaphors that are quickly recognizable and easy to understand, but avoid being too visually complex. They should typically be used in context with descriptive text and function to reinforce the message of that text.

Guidelines

• Keep icons clean and simple, and strive to reference common visual metaphors that are easy to understand.

• Icons should usually be accompanied by text to communicate the message or action related to the icon.

• When text isn't immediately adjacent to an icon (such as an icon button), a tooltip should be used to re-enforce what the icon button's action entails.

• Icon size and color should match corresponding text.

Most of our icons are sourced from materialdesignicons.com. Use the Name column below to reference the icon.

Icon library

Interface & Navigation

Most interface icons have a straightforward representation and usage patterns similar to many other applications.

Icon	Name
	build
	filter-list
	lock
	link
	ios-share
	add
	remove
	mode-edit
	save
	folder
	delete
	check-box
	check-box-indeterminate
	check-box-outline
	content-copy
	error
	check-circle
	check
	clear
	menu
	filter-list
	more-horizontal
	more-vertical
	circle-small
	redo
	cached
	arrow-up
	arrow-down
	arrow-back
	arrow-up-down
	arrow-left-right
	chevron-down
	chevron-left
	chevron-right
	chevron-up
	first-page
	last-page
	file-upload
	file-download
	publish-gps
	arrow-drop-up
	arrow-right
	arrow-drop-down
	arrow-up-down

Map & Data Tools

Map and data tools icons have more geospatial-centric usage, as noted in the usage column in the table below.

Icon	Name	Usage
	vector-line	Polyline geodata type
	scatter-plot	Point data type
	vector-square	Polygon geodata type
	cursor	Point select
	vector-polyline	Multi-point select
	selection-drag	Area select
	pan-tool	Pan map viewport
	selection-search	Zoom to Selection
	map-search-outline	Zoom to Layer
	swap-vertical
	sort-ascending
	sort-descending
	sort-alphabetical
	sort-numeric
	alphabetical	Categorical data type
	numeric	Numeric data type
	camera-alt	Quick snapshot image export
	cube	3D extrusion
	gps-not-fixed	Saved position
	crosshairs-gps	Saved position active
	border-outer	Area layer
	dashboard	Land Use Canvas layer
	layers	Layer List
	layer-outline	Reference Layer
	poll	Analysis Layer

Data Topics

Data topic icons reference specific categories of data or analyses that are proprietary to UrbanFootprint.

Icon	Name	Usage
	weather-fog	Emissions
	directions-transit	Transit Accessibility
	drive-eta	Transportation
	earth	Risk and Resilience
	directions-walk	Walk Accessibility
	flash	Energy Use
	home	Household Costs
	invert-colors	Water Use
	leaf	Conservation
	location-city	Place Types

Modes

Mode icons represent key workflow sections of UrbanFootprint applications.

Icon	Name	Usage
	map	Explore Mode
	business	Build Mode
	bar-chart	Analyze Mode
	news	Reporting Mode
	folder-edit	Manage Mode
	folder-paint	Painting

Color

UrbanFootprint Icons should always be one color. If used over a dark background color, negative space should be knocked out.

Similar color contrast guidelines to typography should be followed to ensure visual distinction between icon and background colors.

Spacing

Within the UrbanFootprint application, the padding varies around the icons of various shapes. Icons that have complex elements included within its design should be slightly larger in size in order to offset the visual weight of surrounding negative space.