<div>
<p class="font-sans-2xl line-height-body-1 text-bold margin-y-0">
An icon relative to font size
<svg class="usa-icon bottom-neg-05" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../dist/img/sprite.svg#arrow_forward"></use>
</svg>
</p>
<p class="">
An icon relative to font size
<svg class="usa-icon bottom-neg-2px" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../dist/img/sprite.svg#arrow_forward"></use>
</svg>
</p>
<table class="usa-table usa-table--borderless width-full">
<caption>Fixed sizes</caption>
<thead>
<th>Modifier</th>
<th>Icon</th>
<th>Units</th>
<th>Pixels</th>
</thead>
<tbody>
<tr>
<th><code>.usa-icon--size-3</code></th>
<td>
<svg class="usa-icon usa-icon--size-3" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../dist/img/sprite.svg#accessibility_new"></use>
</svg>
</td>
<td><code>3</code></td>
<td><code>24px</code></td>
</tr>
<tr>
<th><code>.usa-icon--size-4</code></th>
<td>
<svg class="usa-icon usa-icon--size-4" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../dist/img/sprite.svg#accessibility_new"></use>
</svg>
</td>
<td><code>4</code></td>
<td><code>32px</code></td>
</tr>
<tr>
<th><code>.usa-icon--size-5</code></th>
<td>
<svg class="usa-icon usa-icon--size-5" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../dist/img/sprite.svg#accessibility_new"></use>
</svg>
</td>
<td><code>5</code></td>
<td><code>40px</code></td>
</tr>
<tr>
<th><code>.usa-icon--size-6</code></th>
<td>
<svg class="usa-icon usa-icon--size-6" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../dist/img/sprite.svg#accessibility_new"></use>
</svg>
</td>
<td><code>6</code></td>
<td><code>48px</code></td>
</tr>
<tr>
<th><code>.usa-icon--size-7</code></th>
<td>
<svg class="usa-icon usa-icon--size-7" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../dist/img/sprite.svg#accessibility_new"></use>
</svg>
</td>
<td><code>7</code></td>
<td><code>56px</code></td>
</tr>
<tr>
<th><code>.usa-icon--size-8</code></th>
<td>
<svg class="usa-icon usa-icon--size-8" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../dist/img/sprite.svg#accessibility_new"></use>
</svg>
</td>
<td><code>8</code></td>
<td><code>64px</code></td>
</tr>
<tr>
<th><code>.usa-icon--size-9</code></th>
<td>
<svg class="usa-icon usa-icon--size-9" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../dist/img/sprite.svg#accessibility_new"></use>
</svg>
</td>
<td><code>9</code></td>
<td><code>72px</code></td>
</tr>
</tbody>
</table>
</div>
No notes defined.
package:
name: metro-digital-design-system-demo
version: 0.1.0
uswds:
path: ../../../dist
placeholderLink: javascript:void()
icons:
sizes:
- units: '3'
pixels: 24px
- units: '4'
pixels: 32px
- units: '5'
pixels: 40px
- units: '6'
pixels: 48px
- units: '7'
pixels: 56px
- units: '8'
pixels: 64px
- units: '9'
pixels: 72px
items:
- name: high-visibility-crosswalk
meta: high visibility crosswalk
- name: accessibility_new
meta: accessible
- name: accessible_forward
meta: accessible wheelchair
- name: account_balance
meta: finance institution
- name: account_box
meta: user identity identification
- name: account_circle
meta: user
- name: add
meta: plus open
- name: add_circle
meta: plus open
- name: add_circle_outline
meta: plus open
- name: alarm
meta: clock time
- name: alternate_email
meta: at-sign
- name: announcement
meta: exclamation
- name: arrow_back
meta: navigation direction
- name: arrow_downward
meta: navigation direction
- name: arrow_drop_down
meta: carrot caret
- name: arrow_drop_up
meta: carrot caret
- name: arrow_forward
meta: navigation direction
- name: arrow_upward
meta: navigation direction
- name: api
meta: application programming interface
- name: assessment
meta: metrics bar chart test results
- name: attach_file
meta: paperclip
- name: attach_money
meta: dollar sign cash financial
- name: autorenew
meta: refresh
- name: backpack
meta: bag emergency kit
- name: bathtub
meta: bathe shower hygiene
- name: bedding
meta: blanket
- name: bookmark
meta: ''
- name: bug_report
meta: ''
- name: build
meta: wrench
- name: calendar_today
meta: date
- name: campaign
meta: bullhorn
- name: camping
meta: tent shelter
- name: cancel
meta: x close
- name: chat
meta: comment
- name: check
meta: done complete
- name: check_box_outline_blank
meta: square
- name: check_circle
meta: done complete
- name: check_circle_outline
meta: done complete
- name: checkroom
meta: coathanger
- name: clean_hands
meta: sanitize wash soap
- name: clothes
meta: shirt sweater clothing
- name: close
meta: x
- name: closed_caption
meta: cc video accessiblity
- name: cloud
meta: ''
- name: code
meta: ''
- name: comment
meta: chat
- name: connect_without_contact
meta: ''
- name: construction
meta: tool
- name: construction_worker
meta: maintenance
- name: contact_page
meta: ''
- name: content_copy
meta: ''
- name: coronavirus
meta: ''
- name: credit_card
meta: payment
- name: deck
meta: patio dine dining bar
- name: delete
meta: trash
- name: device_thermostat
meta: ''
- name: directions
meta: arrow
- name: directions_bike
meta: bicycle transportation
- name: directions_bus
meta: public transportation
- name: directions_car
meta: automobile transportation
- name: directions_walk
meta: ''
- name: do_not_disturb
meta: none disallowed cross-out no block
- name: do_not_touch
meta: no touch
- name: drag_handle
meta: dragger
- name: eco
meta: leaf
- name: edit
meta: pen write pencil
- name: electrical_services
meta: electricity power
- name: emoji_events
meta: trophy
- name: error
meta: exclamation
- name: error_outline
meta: exclamation
- name: event
meta: calendar
- name: expand_less
meta: chevron arrow up
- name: expand_more
meta: chevron arrow down
- name: facebook
meta: social media
- name: fast_forward
meta: arrow direction right
- name: fast_rewind
meta: arrow direction left
- name: favorite
meta: heart
- name: favorite_border
meta: heart
- name: file_download
meta: arrow save
- name: file_present
meta: paperclip
- name: file_upload
meta: post arrow
- name: filter_alt
meta: ''
- name: filter_list
meta: ''
- name: fingerprint
meta: biometric
- name: first_page
meta: arrow
- name: flag
meta: important
- name: flickr
meta: social media
- name: flight
meta: airplane jet
- name: flooding
meta: water weather flood
- name: folder
meta: ''
- name: folder_open
meta: ''
- name: format_quote
meta: blockquote quotation
- name: format_size
meta: ''
- name: forum
meta: chat conversation
- name: github
meta: social media
- name: grid_view
meta: ''
- name: group_add
meta: users
- name: groups
meta: users
- name: hearing
meta: accessibility
- name: help
meta: question mark
- name: help_outline
meta: question mark
- name: highlight_off
meta: x close
- name: history
meta: clock
- name: home
meta: house
- name: hospital
meta: emergency doctor help
- name: hotel
meta: motel lodging
- name: hourglass_empty
meta: ''
- name: hurricane
meta: weather storm
- name: identification
meta: id card document
- name: image
meta: photo picture
- name: info
meta: information status
- name: info_outline
meta: information status
- name: insights
meta: ''
- name: instagram
meta: social media
- name: keyboard
meta: ''
- name: label
meta: ''
- name: language
meta: translate localize world globe
- name: last_page
meta: arrow left
- name: launch
meta: external link new window
- name: lightbulb
meta: idea insight
- name: lightbulb_outline
meta: idea insight
- name: link
meta: hyperlink
- name: link_off
meta: hyperlink
- name: list
meta: bullet
- name: local_cafe
meta: coffee cup
- name: local_fire_department
meta: ''
- name: local_gas_station
meta: fuel
- name: local_grocery_store
meta: cart
- name: local_hospital
meta: health help
- name: local_laundry_service
meta: laundromat wash
- name: local_library
meta: book
- name: local_offer
meta: tag category
- name: local_parking
meta: ''
- name: local_pharmacy
meta: prescription medication medicine drugs
- name: local_police
meta: law shield
- name: local_taxi
meta: cab transportation
- name: location_city
meta: buildings
- name: location_on
meta: marker pin map
- name: lock
meta: ''
- name: lock_open
meta: ''
- name: lock_outline
meta: ''
- name: login
meta: ''
- name: logout
meta: ''
- name: loop
meta: repeat
- name: mail
meta: envelope message
- name: mail_outline
meta: envelope message
- name: map
meta: direction
- name: masks
meta: ''
- name: medical_services
meta: first aid kit
- name: menu
meta: hamburger navigation
- name: military_tech
meta: ''
- name: more_horiz
meta: menu navigation
- name: more_vert
meta: menu navigation
- name: my_location
meta: map geolocate
- name: navigate_before
meta: chevron arrow left direction
- name: navigate_next
meta: chevron arrow right direction
- name: navigate_far_before
meta: chevron double arrow left direction
- name: navigate_far_next
meta: chevron double arrow right direction
- name: near_me
meta: location compass proximity
- name: notifications
meta: bell
- name: notifications_active
meta: bell
- name: notifications_none
meta: bell
- name: notifications_off
meta: bell
- name: park
meta: tree
- name: people
meta: users
- name: person
meta: user
- name: pets
meta: dog cat paw
- name: phone
meta: telephone
- name: photo_camera
meta: image picture
- name: print
meta: printer
- name: priority_high
meta: exclamation error notice
- name: public
meta: world globe earth language
- name: push_pin
meta: save
- name: radio_button_unchecked
meta: circle check box
- name: rain
meta: weather water storm
- name: reduce_capacity
meta: occupancy
- name: remove
meta: minus collapse
- name: report
meta: exclamation danger stop
- name: restaurant
meta: dining food
- name: rss_feed
meta: ''
- name: safety_divider
meta: barrier
- name: sanitizer
meta: hand clean
- name: save_alt
meta: arrow
- name: severe_weather
meta: storm
- name: schedule
meta: clock
- name: school
meta: education graduation
- name: science
meta: ''
- name: search
meta: magnifying glass find
- name: security
meta: shield
- name: send
meta: mail deliver
- name: sentiment_dissatisfied
meta: face review feeling customer frown
- name: sentiment_neutral
meta: face reate review feeling customer
- name: sentiment_satisfied
meta: face reate review feeling customer smile
- name: sentiment_satisfied_alt
meta: face reate review feeling customer smile
- name: sentiment_very_dissatisfied
meta: face reate review feeling customer frown
- name: settings
meta: gear cog
- name: share
meta: social
- name: shield
meta: ''
- name: shopping_basket
meta: cart purchase
- name: snow
meta: storm weather winter emergency blizzard
- name: soap
meta: sanitize safety hand wash
- name: social_distance
meta: ''
- name: sort_arrow
meta: direction up down
- name: spellcheck
meta: edit
- name: star
meta: review rate
- name: star_half
meta: review rate
- name: star_outline
meta: review rate
- name: store
meta: business
- name: support
meta: help life preserver
- name: support_agent
meta: ''
- name: text_fields
meta: edit
- name: thumb_down_alt
meta: rate review
- name: thumb_up_alt
meta: rate review
- name: timer
meta: countdown
- name: toggle_off
meta: switch
- name: toggle_on
meta: switch
- name: topic
meta: folder
- name: tornado
meta: storm weather wind emergency
- name: translate
meta: ''
- name: trending_down
meta: arrow
- name: trending_up
meta: arrow
- name: twitter
meta: social media
- name: undo
meta: edit arrow
- name: unfold_less
meta: arrows collapse
- name: unfold_more
meta: arrows expand
- name: update
meta: clock
- name: upload_file
meta: ''
- name: verified
meta: check
- name: verified_user
meta: check
- name: visibility
meta: eye remove_red-eye
- name: visibility_off
meta: eye hidden masked
- name: volume_off
meta: speaker
- name: warning
meta: exclamation triangle
- name: wash
meta: sanitize hand
- name: wifi
meta: signal
- name: work
meta: briefcase
- name: youtube
meta: social media
- name: zoom_in
meta: expand enlarge magnifying glass
- name: zoom_out_map
meta: expand fullscreen
- name: zoom_out
meta: shrink magnifying glass