<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