Install the heroicons-lwc package in your project with yarn or npm.
// with npm
npm install heroicons-lwc
// with yarn
yarn add heroicons-lwcOr copy the component source (src/icons/heroicons) to your local project.
component.html
<template>
<icons-heroicons icon-name="x_circle_outline"></icons-heroicons>
</template>Note the syntax for icon names uses underscores (instead of dashes) followed by the type (outline or solid) separated by an underscore.
To build the latest version of Heroicons from source:
npm run build:icons↳ academic_cap_outline
↳ academic_cap_solid
↳ adjustments_outline
↳ adjustments_solid
↳ annotation_outline
↳ annotation_solid
↳ archive_outline
↳ archive_solid
↳ arrow_circle_down_outline
↳ arrow_circle_down_solid
↳ arrow_circle_left_outline
↳ arrow_circle_left_solid
↳ arrow_circle_right_outline
↳ arrow_circle_right_solid
↳ arrow_circle_up_outline
↳ arrow_circle_up_solid
↳ arrow_down_outline
↳ arrow_down_solid
↳ arrow_left_outline
↳ arrow_left_solid
↳ arrow_narrow_down_outline
↳ arrow_narrow_down_solid
↳ arrow_narrow_left_outline
↳ arrow_narrow_left_solid
↳ arrow_narrow_right_outline
↳ arrow_narrow_right_solid
↳ arrow_narrow_up_outline
↳ arrow_narrow_up_solid
↳ arrow_right_outline
↳ arrow_right_solid
↳ arrows_expand_outline
↳ arrows_expand_solid
↳ arrow_sm_down_outline
↳ arrow_sm_down_solid
↳ arrow_sm_left_outline
↳ arrow_sm_left_solid
↳ arrow_sm_right_outline
↳ arrow_sm_right_solid
↳ arrow_sm_up_outline
↳ arrow_sm_up_solid
↳ arrow_up_outline
↳ arrow_up_solid
↳ at_symbol_outline
↳ at_symbol_solid
↳ backspace_outline
↳ backspace_solid
↳ badge_check_outline
↳ badge_check_solid
↳ ban_outline
↳ ban_solid
↳ beaker_outline
↳ beaker_solid
↳ bell_outline
↳ bell_solid
↳ bookmark_alt_outline
↳ bookmark_alt_solid
↳ bookmark_outline
↳ bookmark_solid
↳ book_open_outline
↳ book_open_solid
↳ briefcase_outline
↳ briefcase_solid
↳ cake_outline
↳ cake_solid
↳ calculator_outline
↳ calculator_solid
↳ calendar_outline
↳ calendar_solid
↳ camera_outline
↳ camera_solid
↳ cash_outline
↳ cash_solid
↳ chart_bar_outline
↳ chart_bar_solid
↳ chart_pie_outline
↳ chart_pie_solid
↳ chart_square_bar_outline
↳ chart_square_bar_solid
↳ chat_alt_2_outline
↳ chat_alt_2_solid
↳ chat_alt_outline
↳ chat_alt_solid
↳ chat_outline
↳ chat_solid
↳ check_circle_outline
↳ check_circle_solid
↳ check_outline
↳ check_solid
↳ chevron_double_down_outline
↳ chevron_double_down_solid
↳ chevron_double_left_outline
↳ chevron_double_left_solid
↳ chevron_double_right_outline
↳ chevron_double_right_solid
↳ chevron_double_up_outline
↳ chevron_double_up_solid
↳ chevron_down_outline
↳ chevron_down_solid
↳ chevron_left_outline
↳ chevron_left_solid
↳ chevron_right_outline
↳ chevron_right_solid
↳ chevron_up_outline
↳ chevron_up_solid
↳ chip_outline
↳ chip_solid
↳ clipboard_check_outline
↳ clipboard_check_solid
↳ clipboard_copy_outline
↳ clipboard_copy_solid
↳ clipboard_list_outline
↳ clipboard_list_solid
↳ clipboard_outline
↳ clipboard_solid
↳ clock_outline
↳ clock_solid
↳ cloud_download_outline
↳ cloud_download_solid
↳ cloud_outline
↳ cloud_solid
↳ cloud_upload_outline
↳ cloud_upload_solid
↳ code_outline
↳ code_solid
↳ cog_outline
↳ cog_solid
↳ collection_outline
↳ collection_solid
↳ color_swatch_outline
↳ color_swatch_solid
↳ credit_card_outline
↳ credit_card_solid
↳ cube_outline
↳ cube_solid
↳ cube_transparent_outline
↳ cube_transparent_solid
↳ currency_bangladeshi_outline
↳ currency_bangladeshi_solid
↳ currency_dollar_outline
↳ currency_dollar_solid
↳ currency_euro_outline
↳ currency_euro_solid
↳ currency_pound_outline
↳ currency_pound_solid
↳ currency_rupee_outline
↳ currency_rupee_solid
↳ currency_yen_outline
↳ currency_yen_solid
↳ cursor_click_outline
↳ cursor_click_solid
↳ database_outline
↳ database_solid
↳ desktop_computer_outline
↳ desktop_computer_solid
↳ device_mobile_outline
↳ device_mobile_solid
↳ device_tablet_outline
↳ device_tablet_solid
↳ document_add_outline
↳ document_add_solid
↳ document_download_outline
↳ document_download_solid
↳ document_duplicate_outline
↳ document_duplicate_solid
↳ document_outline
↳ document_remove_outline
↳ document_remove_solid
↳ document_report_outline
↳ document_report_solid
↳ document_search_outline
↳ document_search_solid
↳ document_solid
↳ document_text_outline
↳ document_text_solid
↳ dots_circle_horizontal_outline
↳ dots_circle_horizontal_solid
↳ dots_horizontal_outline
↳ dots_horizontal_solid
↳ dots_vertical_outline
↳ dots_vertical_solid
↳ download_outline
↳ download_solid
↳ duplicate_outline
↳ duplicate_solid
↳ emoji_happy_outline
↳ emoji_happy_solid
↳ emoji_sad_outline
↳ emoji_sad_solid
↳ exclamation_circle_outline
↳ exclamation_circle_solid
↳ exclamation_outline
↳ exclamation_solid
↳ external_link_outline
↳ external_link_solid
↳ eye_off_outline
↳ eye_off_solid
↳ eye_outline
↳ eye_solid
↳ fast_forward_outline
↳ fast_forward_solid
↳ film_outline
↳ film_solid
↳ filter_outline
↳ filter_solid
↳ finger_print_outline
↳ finger_print_solid
↳ fire_outline
↳ fire_solid
↳ flag_outline
↳ flag_solid
↳ folder_add_outline
↳ folder_add_solid
↳ folder_download_outline
↳ folder_download_solid
↳ folder_open_outline
↳ folder_open_solid
↳ folder_outline
↳ folder_remove_outline
↳ folder_remove_solid
↳ folder_solid
↳ gift_outline
↳ gift_solid
↳ globe_alt_outline
↳ globe_alt_solid
↳ globe_outline
↳ globe_solid
↳ hand_outline
↳ hand_solid
↳ hashtag_outline
↳ hashtag_solid
↳ heart_outline
↳ heart_solid
↳ home_outline
↳ home_solid
↳ identification_outline
↳ identification_solid
↳ inbox_in_outline
↳ inbox_in_solid
↳ inbox_outline
↳ inbox_solid
↳ information_circle_outline
↳ information_circle_solid
↳ key_outline
↳ key_solid
↳ library_outline
↳ library_solid
↳ light_bulb_outline
↳ light_bulb_solid
↳ lightning_bolt_outline
↳ lightning_bolt_solid
↳ link_outline
↳ link_solid
↳ location_marker_outline
↳ location_marker_solid
↳ lock_closed_outline
↳ lock_closed_solid
↳ lock_open_outline
↳ lock_open_solid
↳ login_outline
↳ login_solid
↳ logout_outline
↳ logout_solid
↳ mail_open_outline
↳ mail_open_solid
↳ mail_outline
↳ mail_solid
↳ map_outline
↳ map_solid
↳ menu_alt_1_outline
↳ menu_alt_1_solid
↳ menu_alt_2_outline
↳ menu_alt_2_solid
↳ menu_alt_3_outline
↳ menu_alt_3_solid
↳ menu_alt_4_outline
↳ menu_alt_4_solid
↳ menu_outline
↳ menu_solid
↳ microphone_outline
↳ microphone_solid
↳ minus_circle_outline
↳ minus_circle_solid
↳ minus_outline
↳ minus_sm_outline
↳ minus_sm_solid
↳ minus_solid
↳ moon_outline
↳ moon_solid
↳ music_note_outline
↳ music_note_solid
↳ newspaper_outline
↳ newspaper_solid
↳ office_building_outline
↳ office_building_solid
↳ paper_airplane_outline
↳ paper_airplane_solid
↳ paper_clip_outline
↳ paper_clip_solid
↳ pause_outline
↳ pause_solid
↳ pencil_alt_outline
↳ pencil_alt_solid
↳ pencil_outline
↳ pencil_solid
↳ phone_incoming_outline
↳ phone_incoming_solid
↳ phone_missed_call_outline
↳ phone_missed_call_solid
↳ phone_outgoing_outline
↳ phone_outgoing_solid
↳ phone_outline
↳ phone_solid
↳ photograph_outline
↳ photograph_solid
↳ play_outline
↳ play_solid
↳ plus_circle_outline
↳ plus_circle_solid
↳ plus_outline
↳ plus_sm_outline
↳ plus_sm_solid
↳ plus_solid
↳ presentation_chart_bar_outline
↳ presentation_chart_bar_solid
↳ presentation_chart_line_outline
↳ presentation_chart_line_solid
↳ printer_outline
↳ printer_solid
↳ puzzle_outline
↳ puzzle_solid
↳ qrcode_outline
↳ qrcode_solid
↳ question_mark_circle_outline
↳ question_mark_circle_solid
↳ receipt_refund_outline
↳ receipt_refund_solid
↳ receipt_tax_outline
↳ receipt_tax_solid
↳ refresh_outline
↳ refresh_solid
↳ reply_outline
↳ reply_solid
↳ rewind_outline
↳ rewind_solid
↳ rss_outline
↳ rss_solid
↳ save_as_outline
↳ save_as_solid
↳ save_outline
↳ save_solid
↳ scale_outline
↳ scale_solid
↳ scissors_outline
↳ scissors_solid
↳ search_circle_outline
↳ search_circle_solid
↳ search_outline
↳ search_solid
↳ selector_outline
↳ selector_solid
↳ server_outline
↳ server_solid
↳ share_outline
↳ share_solid
↳ shield_check_outline
↳ shield_check_solid
↳ shield_exclamation_outline
↳ shield_exclamation_solid
↳ shopping_bag_outline
↳ shopping_bag_solid
↳ shopping_cart_outline
↳ shopping_cart_solid
↳ sort_ascending_outline
↳ sort_ascending_solid
↳ sort_descending_outline
↳ sort_descending_solid
↳ sparkles_outline
↳ sparkles_solid
↳ speakerphone_outline
↳ speakerphone_solid
↳ star_outline
↳ star_solid
↳ status_offline_outline
↳ status_offline_solid
↳ status_online_outline
↳ status_online_solid
↳ stop_outline
↳ stop_solid
↳ sun_outline
↳ sun_solid
↳ support_outline
↳ support_solid
↳ switch_horizontal_outline
↳ switch_horizontal_solid
↳ switch_vertical_outline
↳ switch_vertical_solid
↳ table_outline
↳ table_solid
↳ tag_outline
↳ tag_solid
↳ template_outline
↳ template_solid
↳ terminal_outline
↳ terminal_solid
↳ thumb_down_outline
↳ thumb_down_solid
↳ thumb_up_outline
↳ thumb_up_solid
↳ ticket_outline
↳ ticket_solid
↳ translate_outline
↳ translate_solid
↳ trash_outline
↳ trash_solid
↳ trending_down_outline
↳ trending_down_solid
↳ trending_up_outline
↳ trending_up_solid
↳ truck_outline
↳ truck_solid
↳ upload_outline
↳ upload_solid
↳ user_add_outline
↳ user_add_solid
↳ user_circle_outline
↳ user_circle_solid
↳ user_group_outline
↳ user_group_solid
↳ user_outline
↳ user_remove_outline
↳ user_remove_solid
↳ user_solid
↳ users_outline
↳ users_solid
↳ variable_outline
↳ variable_solid
↳ video_camera_outline
↳ video_camera_solid
↳ view_boards_outline
↳ view_boards_solid
↳ view_grid_add_outline
↳ view_grid_add_solid
↳ view_grid_outline
↳ view_grid_solid
↳ view_list_outline
↳ view_list_solid
↳ volume_off_outline
↳ volume_off_solid
↳ volume_up_outline
↳ volume_up_solid
↳ wifi_outline
↳ wifi_solid
↳ x_circle_outline
↳ x_circle_solid
↳ x_outline
↳ x_solid
↳ zoom_in_outline
↳ zoom_in_solid
↳ zoom_out_outline
↳ zoom_out_solid