Icon (icon)
Icons help communicate meaning, actions, status, or feedback.
🔗 External documentation.
| ID | Label | Description | Schema |
|---|---|---|---|
| sprite_path | Sprite path | Path to the sprite. |
|
| icon_name | Icon Name | Will be pulled from sprite.svg. |
|
id: icon
label: Icon
description: 'Icons help communicate meaning, actions, status, or feedback.'
group: Other
homepage: 'https://designsystem.digital.gov/components/icon/'
variants:
default:
id: default
label: Default
size_3:
id: size_3
label: 'Size 3'
description: '3 unit x 3 unit icon.'
size_4:
id: size_4
label: 'Size 4'
description: '4 unit x 4 unit icon.'
size_5:
id: size_5
label: 'Size 5'
description: '5 unit x 5 unit icon.'
size_6:
id: size_6
label: 'Size 6'
description: '6 unit x 6 unit icon.'
size_7:
id: size_7
label: 'Size 7'
description: '7 unit x 7 unit icon.'
size_8:
id: size_8
label: 'Size 8'
description: '8 unit x 8 unit icon.'
size_9:
id: size_9
label: 'Size 9'
description: '9 unit x 9 unit icon.'
props:
sprite_path:
id: sprite_path
label: 'Sprite path'
description: 'Path to the sprite.'
schema:
type: string
icon_name:
id: icon_name
label: 'Icon Name'
description: 'Will be pulled from sprite.svg.'
schema:
type: string
enum:
- accessibility_new
- accessible_forward
- account_balance
- account_box
- account_circle
- add
- add_circle
- add_circle_outline
- alarm
- alternate_email
- announcement
- api
- arrow_back
- arrow_downward
- arrow_drop_down
- arrow_drop_up
- arrow_forward
- arrow_upward
- assessment
- attach_file
- attach_money
- autorenew
- backpack
- bathtub
- bedding
- bookmark
- bug_report
- build
- calendar_today
- campaign
- camping
- cancel
- chat
- check
- check_box_outline_blank
- check_circle
- check_circle_outline
- checkroom
- chevron_left
- chevron_right
- clean_hands
- close
- closed_caption
- clothes
- cloud
- code
- comment
- connect_without_contact
- construction
- construction_worker
- contact_page
- content_copy
- coronavirus
- credit_card
- deck
- delete
- device_thermostat
- directions
- directions_bike
- directions_bus
- directions_car
- directions_walk
- do_not_disturb
- do_not_touch
- drag_handle
- eco
- edit
- electrical_services
- emoji_events
- error
- error_outline
- event
- expand_less
- expand_more
- facebook
- fast_forward
- fast_rewind
- favorite
- favorite_border
- fax
- file_download
- file_present
- file_upload
- filter_alt
- filter_list
- fingerprint
- first_page
- flag
- flickr
- flight
- flooding
- folder
- folder_open
- format_quote
- format_size
- forum
- github
- grid_view
- group_add
- groups
- hearing
- help
- help_outline
- highlight_off
- history
- home
- hospital
- hotel
- hourglass_empty
- hurricane
- identification
- image
- info
- info_outline
- insights
- instagram
- keyboard
- label
- language
- last_page
- launch
- lightbulb
- lightbulb_outline
- link
- link_off
- linkedin
- list
- local_cafe
- local_fire_department
- local_gas_station
- local_grocery_store
- local_hospital
- local_laundry_service
- local_library
- local_offer
- local_parking
- local_pharmacy
- local_police
- local_taxi
- location_city
- location_on
- lock
- lock_open
- lock_outline
- login
- logout
- loop
- mail
- mail_outline
- map
- masks
- medical_services
- menu
- military_tech
- more_horiz
- more_vert
- my_location
- navigate_before
- navigate_far_before
- navigate_far_next
- navigate_next
- near_me
- notifications
- notifications_active
- notifications_none
- notifications_off
- park
- people
- person
- pets
- phone
- photo_camera
- print
- priority_high
- public
- push_pin
- radio_button_unchecked
- rain
- reduce_capacity
- remove
- remove_circle
- report
- restaurant
- rss_feed
- safety_divider
- sanitizer
- save_alt
- schedule
- school
- science
- search
- security
- send
- sentiment_dissatisfied
- sentiment_neutral
- sentiment_satisfied
- sentiment_satisfied_alt
- sentiment_very_dissatisfied
- settings
- severe_weather
- share
- shield
- shopping_basket
- snow
- soap
- social_distance
- sort_arrow
- spellcheck
- star
- star_half
- star_outline
- store
- support
- support_agent
- text_fields
- thumb_down_alt
- thumb_up_alt
- timer
- toggle_off
- toggle_on
- topic
- tornado
- translate
- trending_down
- trending_up
- twitter
- undo
- unfold_less
- unfold_more
- update
- upload_file
- verified
- verified_user
- visibility
- visibility_off
- volume_off
- warning
- wash
- wifi
- work
- youtube
- zoom_in
- zoom_out
- zoom_out_map
examples:
preview:
id: preview
label: Preview
renderable:
'@component': icon
sprite_path: 'https://data.dilla.io/uswds_3/assets/images/sprite.svg'
icon_name: sort_arrow
Default
(
default
)
Size 3
(
size_3
)
3 unit x 3 unit icon.
Size 4
(
size_4
)
4 unit x 4 unit icon.
Size 5
(
size_5
)
5 unit x 5 unit icon.
Size 6
(
size_6
)
6 unit x 6 unit icon.
Size 7
(
size_7
)
7 unit x 7 unit icon.
Size 8
(
size_8
)
8 unit x 8 unit icon.
Size 9
(
size_9
)
9 unit x 9 unit icon.