diff --git a/app/assets/stylesheets/_uswds.scss b/app/assets/stylesheets/_uswds.scss
index 18a3348ec68..112d447f187 100644
--- a/app/assets/stylesheets/_uswds.scss
+++ b/app/assets/stylesheets/_uswds.scss
@@ -9,7 +9,6 @@
@forward 'usa-collection';
@forward 'usa-form';
@forward 'usa-header';
-@forward 'usa-icon';
@forward 'usa-layout-grid';
@forward 'usa-link';
@forward 'usa-list';
diff --git a/app/assets/stylesheets/components/_index.scss b/app/assets/stylesheets/components/_index.scss
index d9a3bed2f35..76200b99c87 100644
--- a/app/assets/stylesheets/components/_index.scss
+++ b/app/assets/stylesheets/components/_index.scss
@@ -11,7 +11,6 @@
@forward 'form';
@forward 'full-screen';
@forward 'hr';
-@forward 'icon';
@forward 'language-picker';
@forward 'modal';
@forward 'nav';
diff --git a/app/assets/stylesheets/components/_icon.scss b/app/components/icon_component.scss
similarity index 94%
rename from app/assets/stylesheets/components/_icon.scss
rename to app/components/icon_component.scss
index 661fd037fb0..6b0bdc27e2a 100644
--- a/app/assets/stylesheets/components/_icon.scss
+++ b/app/components/icon_component.scss
@@ -1,5 +1,7 @@
@use 'uswds-core' as *;
-@use '../variables/app' as *;
+@use 'variables/app' as *;
+
+@forward 'usa-icon';
$icon-min-padding: 2px;
diff --git a/app/javascript/packages/components/button.spec.tsx b/app/javascript/packages/components/button.spec.tsx
index 85388d32952..5659cdf75d2 100644
--- a/app/javascript/packages/components/button.spec.tsx
+++ b/app/javascript/packages/components/button.spec.tsx
@@ -119,13 +119,4 @@ describe('Button', () => {
expect(button.classList.contains('my-button')).to.be.true();
});
-
- it('renders icon', () => {
- const { getByRole } = render();
-
- const icon = getByRole('img', { hidden: true });
-
- expect(icon.classList.contains('usa-icon')).to.be.true();
- expect(icon.querySelector('use')!.getAttribute('href')).to.match(/#add$/);
- });
});
diff --git a/app/javascript/packages/components/button.tsx b/app/javascript/packages/components/button.tsx
index 9741325e3bc..a3a064c3d57 100644
--- a/app/javascript/packages/components/button.tsx
+++ b/app/javascript/packages/components/button.tsx
@@ -1,7 +1,5 @@
import { createElement } from 'react';
import type { AnchorHTMLAttributes, ButtonHTMLAttributes, MouseEvent, ReactNode } from 'react';
-import Icon from './icon';
-import type { DesignSystemIcon } from './icon';
type ButtonType = 'button' | 'reset' | 'submit';
@@ -56,11 +54,6 @@ export interface ButtonProps {
*/
isUnstyled?: boolean;
- /**
- * Icon to show next to button text.
- */
- icon?: DesignSystemIcon;
-
/**
* Optional additional class names.
*/
@@ -77,7 +70,6 @@ function Button({
isOutline,
isDisabled,
isUnstyled,
- icon,
className,
...htmlAttributes
}: ButtonProps &
@@ -100,7 +92,6 @@ function Button({
return createElement(
tagName,
{ type, href, disabled: isDisabled, className: classes, ...htmlAttributes },
- icon && ,
children,
);
}
diff --git a/app/javascript/packages/components/icon.spec.tsx b/app/javascript/packages/components/icon.spec.tsx
deleted file mode 100644
index e093cef583f..00000000000
--- a/app/javascript/packages/components/icon.spec.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { render } from '@testing-library/react';
-import Icon from './icon';
-
-describe('Icon', () => {
- it('renders given icon', () => {
- const { getByRole } = render();
-
- const icon = getByRole('img', { hidden: true });
-
- expect(icon.classList.contains('usa-icon')).to.be.true();
- expect(icon.querySelector('use')!.getAttribute('href')).to.match(/#add$/);
- });
-
- context('with className prop', () => {
- it('renders with additional CSS class', () => {
- const { getByRole } = render();
-
- const icon = getByRole('img', { hidden: true });
-
- expect(Array.from(icon.classList.values())).to.include.members([
- 'usa-icon',
- 'my-custom-class',
- ]);
- });
- });
-});
diff --git a/app/javascript/packages/components/icon.tsx b/app/javascript/packages/components/icon.tsx
deleted file mode 100644
index a0b57b7e74e..00000000000
--- a/app/javascript/packages/components/icon.tsx
+++ /dev/null
@@ -1,270 +0,0 @@
-import { getAssetPath } from '@18f/identity-assets';
-
-const SPRITE_URL = getAssetPath('sprite.svg');
-
-export type DesignSystemIcon =
- | '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'
- | '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'
- | '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'
- | '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';
-
-interface IconProps {
- /**
- * Optional class name to apply to SVG element.
- */
- className?: string;
-
- /**
- * Name of design system icon to show.
- */
- icon: DesignSystemIcon;
-}
-
-function Icon({ icon, className }: IconProps) {
- const classes = ['usa-icon', className].filter(Boolean).join(' ');
-
- return (
-
- );
-}
-
-export default Icon;
diff --git a/app/javascript/packages/components/index.ts b/app/javascript/packages/components/index.ts
index b3aad40de90..02355023733 100644
--- a/app/javascript/packages/components/index.ts
+++ b/app/javascript/packages/components/index.ts
@@ -2,7 +2,6 @@ export { default as Alert } from './alert';
export { default as BlockLink } from './block-link';
export { default as Button } from './button';
export { default as FullScreen } from './full-screen';
-export { default as Icon } from './icon';
export { default as Link } from './link';
export { default as PageFooter } from './page-footer';
export { default as PageHeading } from './page-heading';