Icon

An SVG icon component backed by a built-in icon set. Accepts a name attribute to render a named icon, or a default slot for custom SVG content.

Preview

Show code Copy

Installation

npm install @nana-tec/ui-components

Import

import "@nana-tec/ui-components/icon";

Basic usage

<nana-icon name="edit"></nana-icon>
<nana-icon name="link"></nana-icon>
<nana-icon name="image"></nana-icon>

API

Properties

Property	Attribute	Type	Default	Description
label	—	string	""	Accessible label. Set to "" when the icon is decorative.
name	—	IconName | ""	""	Named icon from the built-in set
size	—	Size	"md"	Size preset

Slots

Slot	Description
(default)	Custom SVG content (used when `name` is not provided)

Slots

Slot	Description
(default)	Custom SVG content (used when name is not provided)

All icons

Every icon in the built-in set. Search by name and click any icon to copy its name — no guessing what exists.

346 of 346 icons

Navigation & layout

menu apps dashboard home widgets grid_on view_list view_module more_horiz more_vert drag_handle arrow_back arrow_forward arrow_upward arrow_downward arrow_drop_down arrow_right_alt chevron_left chevron_right expand_less expand_more unfold_less unfold_more first_page last_page fullscreen fullscreen_exit maximize minimize open_in_new launch

Actions

add add_circle add_circle_outline remove remove_circle close close_small edit delete delete_forever save content_copy download upload file_download print share link push_pin undo redo refresh cached sync sync_alt restore update search zoom_in zoom_out filter_list sort tune select_all visibility visibility_off power_settings_new swap_horiz swap_vert

Status & alerts

check check_small check_circle done_all task_alt verified cancel block do_not_disturb error warning info help highlight_off pending priority_high new_releases bug_report hourglass_empty autorenew published_with_changes notification_important

Selection & rating

check_box check_box_outline_blank radio_button_checked radio_button_unchecked toggle_on toggle_off star star_border star_half favorite favorite_border bookmark bookmark_border thumb_up thumb_down flag

Communication

chat chat_bubble comment forum feedback mail drafts email alternate_email sms phone send reply notifications notifications_off support inbox

Media & playback

play_arrow pause stop skip_next skip_previous fast_forward fast_rewind replay repeat shuffle playlist_add volume_up volume_down volume_off mic headphones music_note videocam photo_camera image collections

Files & documents

folder folder_open create_new_folder description article assignment note_add archive attach_file attachment list label summarize fact_check rule pending_actions picture_as_pdf policy approval

Text & formatting

format_bold format_italic format_underlined strikethrough_s format_quote format_list_bulleted format_list_numbered title text_fields link_off translate code

Finance

account_balance account_balance_wallet attach_money euro_symbol monetization_on payments savings receipt_long request_quote credit_card wallet account_tree menu_book balance calculate currency_exchange paid price_check point_of_sale local_atm money_off percent credit_score request_page price_change payment add_card card_membership assured_workload real_estate_agent

Analytics & data

bar_chart show_chart pie_chart donut_large bubble_chart insights leaderboard timeline assessment data_usage equalizer table_chart trending_up trending_flat trending_down insert_chart query_stats table_view

Commerce & logistics

shopping_cart shopping_bag store storefront sell local_offer local_shipping inventory qr_code_scanner handshake redeem business corporate_fare

People & accounts

person people person_add group_add account_circle face login logout admin_panel_settings how_to_reg assignment_ind gavel person_search support_agent

Time & calendar

schedule timer alarm history event calendar_today date_range today

Maps & places

map location_on gps_fixed explore navigation layers flight restaurant

Transportation

directions_car directions_bus directions_bike directions_walk

Weather & nature

wb_sunny wb_cloudy ac_unit thermostat water_drop eco

Health & medical

local_hospital medical_services medication fitness_center

Food & drink

restaurant_menu local_cafe cake

Devices & hardware

computer desktop_windows smartphone tablet memory storage battery_full

Connectivity

wifi bluetooth cloud language web web_asset hub

System & settings

settings build construction extension palette dark_mode light_mode lock lock_open key security shield verified_user lock_reset vpn_key

Misc

lightbulb tips_and_updates science school speed touch_app whatshot emoji_events category accessibility

Other

blockquote bold checklist code_block format_align_center format_align_justify format_align_left format_align_right format_clear format_color_fill format_color_text highlight horizontal_rule indent italic ordered_list outdent strikethrough subscript superscript underline unordered_list

Related components

• Table
• Carousel
• Carousel Item
• Image Comparer
• QR Code

Storybook

Explore Icon interactively Every state, prop, and edge case — with live controls — in Storybook.

View in Storybook