From de855d8d4335645eef6a12a108ac7483ca7438df Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Tue, 12 Oct 2021 19:32:51 -0400
Subject: [PATCH 01/12] Fix typo in Icon name

- Unify spacing in files with large lists of icons
- Add convenience hoc for internal use in deprecating components. Particularly useful for Icons which are generated.
- Deprecate IconVisiblity, to remove on next major release.
---
 example/src/pages/Icons.tsx                   |   4 +-
 src/components/Icon/Icon.stories.tsx          | 225 +++++++++++++++++-
 src/components/Icon/Icons.stories.tsx         |   4 +-
 src/components/Icon/Icons.ts                  | 201 +++++++++++++++-
 .../hoc/withDeprecationWarning.test.tsx       |  31 +++
 src/components/hoc/withDeprecationWarning.tsx |  17 ++
 6 files changed, 474 insertions(+), 8 deletions(-)
 create mode 100644 src/components/hoc/withDeprecationWarning.test.tsx
 create mode 100644 src/components/hoc/withDeprecationWarning.tsx

diff --git a/example/src/pages/Icons.tsx b/example/src/pages/Icons.tsx
index f54533dfa5..124334d719 100644
--- a/example/src/pages/Icons.tsx
+++ b/example/src/pages/Icons.tsx
@@ -228,7 +228,7 @@ import {
   IconUploadFile,
   IconVerified,
   IconVerifiedUser,
-  IconVisiblity,
+  IconVisibility,
   IconVisibilityOff,
   IconVolumeOff,
   IconWarning,
@@ -479,7 +479,7 @@ const IconsPage = (): React.ReactElement => {
         <IconUploadFile {...args} />
         <IconVerified {...args} />
         <IconVerifiedUser {...args} />
-        <IconVisiblity {...args} />
+        <IconVisibility {...args} />
         <IconVisibilityOff {...args} />
         <IconVolumeOff {...args} />
         <IconWarning {...args} />
diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx
index 223018c78d..8f13363c1a 100644
--- a/src/components/Icon/Icon.stories.tsx
+++ b/src/components/Icon/Icon.stories.tsx
@@ -228,7 +228,7 @@ import {
   IconUploadFile,
   IconVerified,
   IconVerifiedUser,
-  IconVisiblity,
+  IconVisibility,
   IconVisibilityOff,
   IconVolumeOff,
   IconWarning,
@@ -296,138 +296,181 @@ export const add = (args: StorybookArgs): React.ReactElement => (
 export const addCircle = (args: StorybookArgs): React.ReactElement => (
   <IconAddCircle {...args} />
 )
+
 export const addCircleOutline = (args: StorybookArgs): React.ReactElement => (
   <IconAddCircleOutline {...args} />
 )
+
 export const alarm = (args: StorybookArgs): React.ReactElement => (
   <IconAlarm {...args} />
 )
+
 export const alternateEmail = (args: StorybookArgs): React.ReactElement => (
   <IconAlternateEmail {...args} />
 )
+
 export const announcement = (args: StorybookArgs): React.ReactElement => (
   <IconAnnouncement {...args} />
 )
+
 export const arrowBack = (args: StorybookArgs): React.ReactElement => (
   <IconArrowBack {...args} />
 )
+
 export const arrowDownward = (args: StorybookArgs): React.ReactElement => (
   <IconArrowDownward {...args} />
 )
+
 export const arrowDropDown = (args: StorybookArgs): React.ReactElement => (
   <IconArrowDropDown {...args} />
 )
+
 export const arrowDropUp = (args: StorybookArgs): React.ReactElement => (
   <IconArrowDropUp {...args} />
 )
+
 export const arrowForward = (args: StorybookArgs): React.ReactElement => (
   <IconArrowForward {...args} />
 )
+
 export const arrowUpward = (args: StorybookArgs): React.ReactElement => (
   <IconArrowUpward {...args} />
 )
+
 export const api = (args: StorybookArgs): React.ReactElement => (
   <IconApi {...args} />
 )
+
 export const assessment = (args: StorybookArgs): React.ReactElement => (
   <IconAssessment {...args} />
 )
+
 export const attachFile = (args: StorybookArgs): React.ReactElement => (
   <IconAttachFile {...args} />
 )
+
 export const attachMoney = (args: StorybookArgs): React.ReactElement => (
   <IconAttachMoney {...args} />
 )
+
 export const autorenew = (args: StorybookArgs): React.ReactElement => (
   <IconAutorenew {...args} />
 )
+
 export const backpack = (args: StorybookArgs): React.ReactElement => (
   <IconBackpack {...args} />
 )
+
 export const bathtub = (args: StorybookArgs): React.ReactElement => (
   <IconBathtub {...args} />
 )
+
 export const bedding = (args: StorybookArgs): React.ReactElement => (
   <IconBedding {...args} />
 )
+
 export const bookmark = (args: StorybookArgs): React.ReactElement => (
   <IconBookmark {...args} />
 )
+
 export const bugReport = (args: StorybookArgs): React.ReactElement => (
   <IconBugReport {...args} />
 )
+
 export const build = (args: StorybookArgs): React.ReactElement => (
   <IconBuild {...args} />
 )
+
 export const calendarToday = (args: StorybookArgs): React.ReactElement => (
   <IconCalendarToday {...args} />
 )
+
 export const campaign = (args: StorybookArgs): React.ReactElement => (
   <IconCampaign {...args} />
 )
+
 export const camping = (args: StorybookArgs): React.ReactElement => (
   <IconCamping {...args} />
 )
+
 export const cancel = (args: StorybookArgs): React.ReactElement => (
   <IconCancel {...args} />
 )
+
 export const chat = (args: StorybookArgs): React.ReactElement => (
   <IconChat {...args} />
 )
+
 export const check = (args: StorybookArgs): React.ReactElement => (
   <IconCheck {...args} />
 )
+
 export const checkBoxOutlineBlank = (
   args: StorybookArgs
 ): React.ReactElement => <IconCheckBoxOutlineBlank {...args} />
 export const checkCircle = (args: StorybookArgs): React.ReactElement => (
   <IconCheckCircle {...args} />
 )
+
 export const checkCircleOutline = (args: StorybookArgs): React.ReactElement => (
   <IconCheckCircleOutline {...args} />
 )
+
 export const checkroom = (args: StorybookArgs): React.ReactElement => (
   <IconCheckroom {...args} />
 )
+
 export const cleanHands = (args: StorybookArgs): React.ReactElement => (
   <IconCleanHands {...args} />
 )
+
 export const clothes = (args: StorybookArgs): React.ReactElement => (
   <IconClothes {...args} />
 )
+
 export const close = (args: StorybookArgs): React.ReactElement => (
   <IconClose {...args} />
 )
+
 export const closedCaption = (args: StorybookArgs): React.ReactElement => (
   <IconClosedCaption {...args} />
 )
+
 export const cloud = (args: StorybookArgs): React.ReactElement => (
   <IconCloud {...args} />
 )
+
 export const code = (args: StorybookArgs): React.ReactElement => (
   <IconCode {...args} />
 )
+
 export const comment = (args: StorybookArgs): React.ReactElement => (
   <IconComment {...args} />
 )
+
 export const connectWithoutContact = (
   args: StorybookArgs
 ): React.ReactElement => <IconConnectWithoutContact {...args} />
 export const construction = (args: StorybookArgs): React.ReactElement => (
   <IconConstruction {...args} />
 )
+
 export const constructionWorker = (args: StorybookArgs): React.ReactElement => (
   <IconConstructionWorker {...args} />
 )
+
 export const contactPage = (args: StorybookArgs): React.ReactElement => (
   <IconContactPage {...args} />
 )
+
 export const contentCopy = (args: StorybookArgs): React.ReactElement => (
   <IconContentCopy {...args} />
 )
+
 export const coronavirus = (args: StorybookArgs): React.ReactElement => (
   <IconCoronavirus {...args} />
 )
+
 export const creditCard = (args: StorybookArgs): React.ReactElement => (
   <IconCreditCard {...args} />
 )
@@ -435,420 +478,554 @@ export const creditCard = (args: StorybookArgs): React.ReactElement => (
 export const deck = (args: StorybookArgs): React.ReactElement => (
   <IconDeck {...args} />
 )
+
 export const deleteIcon = (args: StorybookArgs): React.ReactElement => (
   <IconDelete {...args} />
 )
+
 export const deviceThermostat = (args: StorybookArgs): React.ReactElement => (
   <IconDeviceThermostat {...args} />
 )
+
 export const directions = (args: StorybookArgs): React.ReactElement => (
   <IconDirections {...args} />
 )
+
 export const directionsBike = (args: StorybookArgs): React.ReactElement => (
   <IconDirectionsBike {...args} />
 )
+
 export const directionsBus = (args: StorybookArgs): React.ReactElement => (
   <IconDirectionsBus {...args} />
 )
+
 export const directionsCar = (args: StorybookArgs): React.ReactElement => (
   <IconDirectionsCar {...args} />
 )
+
 export const directionsWalk = (args: StorybookArgs): React.ReactElement => (
   <IconDirectionsWalk {...args} />
 )
+
 export const doNotDisturb = (args: StorybookArgs): React.ReactElement => (
   <IconDoNotDisturb {...args} />
 )
+
 export const doNotTouch = (args: StorybookArgs): React.ReactElement => (
   <IconDoNotTouch {...args} />
 )
+
 export const dragHandle = (args: StorybookArgs): React.ReactElement => (
   <IconDragHandle {...args} />
 )
+
 export const eco = (args: StorybookArgs): React.ReactElement => (
   <IconEco {...args} />
 )
+
 export const electricalServices = (args: StorybookArgs): React.ReactElement => (
   <IconElectricalServices {...args} />
 )
+
 export const emojiEvents = (args: StorybookArgs): React.ReactElement => (
   <IconEmojiEvents {...args} />
 )
+
 export const error = (args: StorybookArgs): React.ReactElement => (
   <IconError {...args} />
 )
+
 export const errorOutline = (args: StorybookArgs): React.ReactElement => (
   <IconErrorOutline {...args} />
 )
+
 export const event = (args: StorybookArgs): React.ReactElement => (
   <IconEvent {...args} />
 )
+
 export const expandLess = (args: StorybookArgs): React.ReactElement => (
   <IconExpandLess {...args} />
 )
+
 export const expandMore = (args: StorybookArgs): React.ReactElement => (
   <IconExpandMore {...args} />
 )
+
 export const facebook = (args: StorybookArgs): React.ReactElement => (
   <IconFacebook {...args} />
 )
+
 export const fastForward = (args: StorybookArgs): React.ReactElement => (
   <IconFastForward {...args} />
 )
+
 export const fastRewind = (args: StorybookArgs): React.ReactElement => (
   <IconFastRewind {...args} />
 )
+
 export const favorite = (args: StorybookArgs): React.ReactElement => (
   <IconFavorite {...args} />
 )
+
 export const favoriteBorder = (args: StorybookArgs): React.ReactElement => (
   <IconFavoriteBorder {...args} />
 )
+
 export const fileDownload = (args: StorybookArgs): React.ReactElement => (
   <IconFileDownload {...args} />
 )
+
 export const filePresent = (args: StorybookArgs): React.ReactElement => (
   <IconFilePresent {...args} />
 )
+
 export const fileUpload = (args: StorybookArgs): React.ReactElement => (
   <IconFileUpload {...args} />
 )
+
 export const filterAlt = (args: StorybookArgs): React.ReactElement => (
   <IconFilterAlt {...args} />
 )
+
 export const filterList = (args: StorybookArgs): React.ReactElement => (
   <IconFilterList {...args} />
 )
+
 export const fingerprint = (args: StorybookArgs): React.ReactElement => (
   <IconFingerprint {...args} />
 )
+
 export const firstPage = (args: StorybookArgs): React.ReactElement => (
   <IconFirstPage {...args} />
 )
+
 export const flag = (args: StorybookArgs): React.ReactElement => (
   <IconFlag {...args} />
 )
+
 export const flickr = (args: StorybookArgs): React.ReactElement => (
   <IconFlickr {...args} />
 )
+
 export const flight = (args: StorybookArgs): React.ReactElement => (
   <IconFlight {...args} />
 )
+
 export const flooding = (args: StorybookArgs): React.ReactElement => (
   <IconFlooding {...args} />
 )
+
 export const folder = (args: StorybookArgs): React.ReactElement => (
   <IconFolder {...args} />
 )
+
 export const folderOpen = (args: StorybookArgs): React.ReactElement => (
   <IconFolderOpen {...args} />
 )
+
 export const formatQuote = (args: StorybookArgs): React.ReactElement => (
   <IconFormatQuote {...args} />
 )
+
 export const formatSize = (args: StorybookArgs): React.ReactElement => (
   <IconFormatSize {...args} />
 )
+
 export const forum = (args: StorybookArgs): React.ReactElement => (
   <IconForum {...args} />
 )
+
 export const github = (args: StorybookArgs): React.ReactElement => (
   <IconGithub {...args} />
 )
+
 export const gridView = (args: StorybookArgs): React.ReactElement => (
   <IconGridView {...args} />
 )
+
 export const groupAdd = (args: StorybookArgs): React.ReactElement => (
   <IconGroupAdd {...args} />
 )
+
 export const groups = (args: StorybookArgs): React.ReactElement => (
   <IconGroups {...args} />
 )
+
 export const hearing = (args: StorybookArgs): React.ReactElement => (
   <IconHearing {...args} />
 )
+
 export const help = (args: StorybookArgs): React.ReactElement => (
   <IconHelp {...args} />
 )
+
 export const helpOutline = (args: StorybookArgs): React.ReactElement => (
   <IconHelpOutline {...args} />
 )
+
 export const highlightOff = (args: StorybookArgs): React.ReactElement => (
   <IconHighlightOff {...args} />
 )
+
 export const history = (args: StorybookArgs): React.ReactElement => (
   <IconHistory {...args} />
 )
+
 export const home = (args: StorybookArgs): React.ReactElement => (
   <IconHome {...args} />
 )
+
 export const hospital = (args: StorybookArgs): React.ReactElement => (
   <IconHospital {...args} />
 )
+
 export const hotel = (args: StorybookArgs): React.ReactElement => (
   <IconHotel {...args} />
 )
+
 export const hourglassEmpty = (args: StorybookArgs): React.ReactElement => (
   <IconHourglassEmpty {...args} />
 )
+
 export const hurricane = (args: StorybookArgs): React.ReactElement => (
   <IconHurricane {...args} />
 )
+
 export const identification = (args: StorybookArgs): React.ReactElement => (
   <IconIdentification {...args} />
 )
+
 export const image = (args: StorybookArgs): React.ReactElement => (
   <IconImage {...args} />
 )
+
 export const info = (args: StorybookArgs): React.ReactElement => (
   <IconInfo {...args} />
 )
+
 export const infoOutline = (args: StorybookArgs): React.ReactElement => (
   <IconInfoOutline {...args} />
 )
+
 export const insights = (args: StorybookArgs): React.ReactElement => (
   <IconInsights {...args} />
 )
+
 export const instagram = (args: StorybookArgs): React.ReactElement => (
   <IconInstagram {...args} />
 )
+
 export const keyboard = (args: StorybookArgs): React.ReactElement => (
   <IconKeyboard {...args} />
 )
+
 export const label = (args: StorybookArgs): React.ReactElement => (
   <IconLabel {...args} />
 )
+
 export const language = (args: StorybookArgs): React.ReactElement => (
   <IconLanguage {...args} />
 )
+
 export const lastPage = (args: StorybookArgs): React.ReactElement => (
   <IconLastPage {...args} />
 )
+
 export const launch = (args: StorybookArgs): React.ReactElement => (
   <IconLaunch {...args} />
 )
+
 export const lightbulb = (args: StorybookArgs): React.ReactElement => (
   <IconLightbulb {...args} />
 )
+
 export const lightbulbOutline = (args: StorybookArgs): React.ReactElement => (
   <IconLightbulbOutline {...args} />
 )
+
 export const link = (args: StorybookArgs): React.ReactElement => (
   <IconLink {...args} />
 )
+
 export const linkOff = (args: StorybookArgs): React.ReactElement => (
   <IconLinkOff {...args} />
 )
+
 export const list = (args: StorybookArgs): React.ReactElement => (
   <IconList {...args} />
 )
+
 export const localCafe = (args: StorybookArgs): React.ReactElement => (
   <IconLocalCafe {...args} />
 )
+
 export const localFireDepartment = (
   args: StorybookArgs
 ): React.ReactElement => <IconLocalFireDepartment {...args} />
 export const localGasStation = (args: StorybookArgs): React.ReactElement => (
   <IconLocalGasStation {...args} />
 )
+
 export const localGroceryStore = (args: StorybookArgs): React.ReactElement => (
   <IconLocalGroceryStore {...args} />
 )
+
 export const localHospital = (args: StorybookArgs): React.ReactElement => (
   <IconLocalHospital {...args} />
 )
+
 export const localLaundryService = (
   args: StorybookArgs
 ): React.ReactElement => <IconLocalLaundryService {...args} />
 export const localLibrary = (args: StorybookArgs): React.ReactElement => (
   <IconLocalLibrary {...args} />
 )
+
 export const localOffer = (args: StorybookArgs): React.ReactElement => (
   <IconLocalOffer {...args} />
 )
+
 export const localParking = (args: StorybookArgs): React.ReactElement => (
   <IconLocalParking {...args} />
 )
+
 export const localPharmacy = (args: StorybookArgs): React.ReactElement => (
   <IconLocalPharmacy {...args} />
 )
+
 export const localPolice = (args: StorybookArgs): React.ReactElement => (
   <IconLocalPolice {...args} />
 )
+
 export const localTaxi = (args: StorybookArgs): React.ReactElement => (
   <IconLocalTaxi {...args} />
 )
+
 export const locationCity = (args: StorybookArgs): React.ReactElement => (
   <IconLocationCity {...args} />
 )
+
 export const locationOn = (args: StorybookArgs): React.ReactElement => (
   <IconLocationOn {...args} />
 )
+
 export const lock = (args: StorybookArgs): React.ReactElement => (
   <IconLock {...args} />
 )
+
 export const lockOpen = (args: StorybookArgs): React.ReactElement => (
   <IconLockOpen {...args} />
 )
+
 export const lockOutline = (args: StorybookArgs): React.ReactElement => (
   <IconLockOutline {...args} />
 )
+
 export const login = (args: StorybookArgs): React.ReactElement => (
   <IconLogin {...args} />
 )
+
 export const logout = (args: StorybookArgs): React.ReactElement => (
   <IconLogout {...args} />
 )
+
 export const loop = (args: StorybookArgs): React.ReactElement => (
   <IconLoop {...args} />
 )
+
 export const mail = (args: StorybookArgs): React.ReactElement => (
   <IconMail {...args} />
 )
+
 export const mailOutline = (args: StorybookArgs): React.ReactElement => (
   <IconMailOutline {...args} />
 )
+
 export const map = (args: StorybookArgs): React.ReactElement => (
   <IconMap {...args} />
 )
+
 export const masks = (args: StorybookArgs): React.ReactElement => (
   <IconMasks {...args} />
 )
+
 export const medicalServices = (args: StorybookArgs): React.ReactElement => (
   <IconMedicalServices {...args} />
 )
+
 export const menu = (args: StorybookArgs): React.ReactElement => (
   <IconMenu {...args} />
 )
+
 export const militaryTech = (args: StorybookArgs): React.ReactElement => (
   <IconMilitaryTech {...args} />
 )
+
 export const moreHoriz = (args: StorybookArgs): React.ReactElement => (
   <IconMoreHoriz {...args} />
 )
+
 export const moreVert = (args: StorybookArgs): React.ReactElement => (
   <IconMoreVert {...args} />
 )
+
 export const myLocation = (args: StorybookArgs): React.ReactElement => (
   <IconMyLocation {...args} />
 )
+
 export const navigateBefore = (args: StorybookArgs): React.ReactElement => (
   <IconNavigateBefore {...args} />
 )
+
 export const navigateNext = (args: StorybookArgs): React.ReactElement => (
   <IconNavigateNext {...args} />
 )
+
 export const navigateFarBefore = (args: StorybookArgs): React.ReactElement => (
   <IconNavigateFarBefore {...args} />
 )
+
 export const navigateFarNext = (args: StorybookArgs): React.ReactElement => (
   <IconNavigateFarNext {...args} />
 )
+
 export const nearMe = (args: StorybookArgs): React.ReactElement => (
   <IconNearMe {...args} />
 )
+
 export const notifications = (args: StorybookArgs): React.ReactElement => (
   <IconNotifications {...args} />
 )
+
 export const notificationsActive = (
   args: StorybookArgs
 ): React.ReactElement => <IconNotificationsActive {...args} />
 export const notificationsNone = (args: StorybookArgs): React.ReactElement => (
   <IconNotificationsNone {...args} />
 )
+
 export const notificationsOff = (args: StorybookArgs): React.ReactElement => (
   <IconNotificationsOff {...args} />
 )
+
 export const park = (args: StorybookArgs): React.ReactElement => (
   <IconPark {...args} />
 )
+
 export const people = (args: StorybookArgs): React.ReactElement => (
   <IconPeople {...args} />
 )
+
 export const person = (args: StorybookArgs): React.ReactElement => (
   <IconPerson {...args} />
 )
+
 export const pets = (args: StorybookArgs): React.ReactElement => (
   <IconPets {...args} />
 )
+
 export const phone = (args: StorybookArgs): React.ReactElement => (
   <IconPhone {...args} />
 )
+
 export const photoCamera = (args: StorybookArgs): React.ReactElement => (
   <IconPhotoCamera {...args} />
 )
+
 export const print = (args: StorybookArgs): React.ReactElement => (
   <IconPrint {...args} />
 )
+
 export const priorityHigh = (args: StorybookArgs): React.ReactElement => (
   <IconPriorityHigh {...args} />
 )
+
 export const publicIcon = (args: StorybookArgs): React.ReactElement => (
   <IconPublic {...args} />
 )
+
 export const pushPin = (args: StorybookArgs): React.ReactElement => (
   <IconPushPin {...args} />
 )
+
 export const radioButtonUnchecked = (
   args: StorybookArgs
 ): React.ReactElement => <IconRadioButtonUnchecked {...args} />
 export const rain = (args: StorybookArgs): React.ReactElement => (
   <IconRain {...args} />
 )
+
 export const reduceCapacity = (args: StorybookArgs): React.ReactElement => (
   <IconReduceCapacity {...args} />
 )
+
 export const remove = (args: StorybookArgs): React.ReactElement => (
   <IconRemove {...args} />
 )
+
 export const report = (args: StorybookArgs): React.ReactElement => (
   <IconReport {...args} />
 )
+
 export const restaurant = (args: StorybookArgs): React.ReactElement => (
   <IconRestaurant {...args} />
 )
+
 export const rssFeed = (args: StorybookArgs): React.ReactElement => (
   <IconRssFeed {...args} />
 )
+
 export const safetyDivider = (args: StorybookArgs): React.ReactElement => (
   <IconSafetyDivider {...args} />
 )
+
 export const sanitizer = (args: StorybookArgs): React.ReactElement => (
   <IconSanitizer {...args} />
 )
+
 export const saveAlt = (args: StorybookArgs): React.ReactElement => (
   <IconSaveAlt {...args} />
 )
+
 export const severeWeather = (args: StorybookArgs): React.ReactElement => (
   <IconSevereWeather {...args} />
 )
+
 export const schedule = (args: StorybookArgs): React.ReactElement => (
   <IconSchedule {...args} />
 )
+
 export const school = (args: StorybookArgs): React.ReactElement => (
   <IconSchool {...args} />
 )
+
 export const science = (args: StorybookArgs): React.ReactElement => (
   <IconScience {...args} />
 )
+
 export const search = (args: StorybookArgs): React.ReactElement => (
   <IconSearch {...args} />
 )
+
 export const security = (args: StorybookArgs): React.ReactElement => (
   <IconSecurity {...args} />
 )
+
 export const send = (args: StorybookArgs): React.ReactElement => (
   <IconSend {...args} />
 )
+
 export const sentimentDissatisfied = (
   args: StorybookArgs
 ): React.ReactElement => <IconSentimentDissatisfied {...args} />
 export const sentimentNeutral = (args: StorybookArgs): React.ReactElement => (
   <IconSentimentNeutral {...args} />
 )
+
 export const sentimentSatisfied = (args: StorybookArgs): React.ReactElement => (
   <IconSentimentSatisfied {...args} />
 )
+
 export const sentimentSatisfiedAlt = (
   args: StorybookArgs
 ): React.ReactElement => <IconSentimentSatisfiedAlt {...args} />
@@ -858,135 +1035,179 @@ export const sentimentVeryDissatisfied = (
 export const settings = (args: StorybookArgs): React.ReactElement => (
   <IconSettings {...args} />
 )
+
 export const share = (args: StorybookArgs): React.ReactElement => (
   <IconShare {...args} />
 )
+
 export const shield = (args: StorybookArgs): React.ReactElement => (
   <IconShield {...args} />
 )
+
 export const shoppingBasket = (args: StorybookArgs): React.ReactElement => (
   <IconShoppingBasket {...args} />
 )
+
 export const snow = (args: StorybookArgs): React.ReactElement => (
   <IconSnow {...args} />
 )
+
 export const soap = (args: StorybookArgs): React.ReactElement => (
   <IconSoap {...args} />
 )
+
 export const socialDistance = (args: StorybookArgs): React.ReactElement => (
   <IconSocialDistance {...args} />
 )
+
 export const sortArrow = (args: StorybookArgs): React.ReactElement => (
   <IconSortArrow {...args} />
 )
+
 export const spellcheck = (args: StorybookArgs): React.ReactElement => (
   <IconSpellcheck {...args} />
 )
+
 export const star = (args: StorybookArgs): React.ReactElement => (
   <IconStar {...args} />
 )
+
 export const starHalf = (args: StorybookArgs): React.ReactElement => (
   <IconStarHalf {...args} />
 )
+
 export const starOutline = (args: StorybookArgs): React.ReactElement => (
   <IconStarOutline {...args} />
 )
+
 export const store = (args: StorybookArgs): React.ReactElement => (
   <IconStore {...args} />
 )
+
 export const support = (args: StorybookArgs): React.ReactElement => (
   <IconSupport {...args} />
 )
+
 export const supportAgent = (args: StorybookArgs): React.ReactElement => (
   <IconSupportAgent {...args} />
 )
+
 export const textFields = (args: StorybookArgs): React.ReactElement => (
   <IconTextFields {...args} />
 )
+
 export const thumbDownAlt = (args: StorybookArgs): React.ReactElement => (
   <IconThumbDownAlt {...args} />
 )
+
 export const thumbUpAlt = (args: StorybookArgs): React.ReactElement => (
   <IconThumbUpAlt {...args} />
 )
+
 export const timer = (args: StorybookArgs): React.ReactElement => (
   <IconTimer {...args} />
 )
+
 export const toggleOff = (args: StorybookArgs): React.ReactElement => (
   <IconToggleOff {...args} />
 )
+
 export const toggleOn = (args: StorybookArgs): React.ReactElement => (
   <IconToggleOn {...args} />
 )
+
 export const topic = (args: StorybookArgs): React.ReactElement => (
   <IconTopic {...args} />
 )
+
 export const tornado = (args: StorybookArgs): React.ReactElement => (
   <IconTornado {...args} />
 )
+
 export const translate = (args: StorybookArgs): React.ReactElement => (
   <IconTranslate {...args} />
 )
+
 export const trendingDown = (args: StorybookArgs): React.ReactElement => (
   <IconTrendingDown {...args} />
 )
+
 export const trendingUp = (args: StorybookArgs): React.ReactElement => (
   <IconTrendingUp {...args} />
 )
+
 export const twitter = (args: StorybookArgs): React.ReactElement => (
   <IconTwitter {...args} />
 )
+
 export const undo = (args: StorybookArgs): React.ReactElement => (
   <IconUndo {...args} />
 )
+
 export const unfoldLess = (args: StorybookArgs): React.ReactElement => (
   <IconUnfoldLess {...args} />
 )
+
 export const unfoldMore = (args: StorybookArgs): React.ReactElement => (
   <IconUnfoldMore {...args} />
 )
+
 export const update = (args: StorybookArgs): React.ReactElement => (
   <IconUpdate {...args} />
 )
+
 export const uploadFile = (args: StorybookArgs): React.ReactElement => (
   <IconUploadFile {...args} />
 )
+
 export const verified = (args: StorybookArgs): React.ReactElement => (
   <IconVerified {...args} />
 )
+
 export const verifiedUser = (args: StorybookArgs): React.ReactElement => (
   <IconVerifiedUser {...args} />
 )
+
 export const visibility = (args: StorybookArgs): React.ReactElement => (
-  <IconVisiblity {...args} />
+  <IconVisibility {...args} />
 )
+
 export const visibilityOff = (args: StorybookArgs): React.ReactElement => (
   <IconVisibilityOff {...args} />
 )
+
 export const volumeOff = (args: StorybookArgs): React.ReactElement => (
   <IconVolumeOff {...args} />
 )
+
 export const warning = (args: StorybookArgs): React.ReactElement => (
   <IconWarning {...args} />
 )
+
 export const wash = (args: StorybookArgs): React.ReactElement => (
   <IconWash {...args} />
 )
+
 export const wifi = (args: StorybookArgs): React.ReactElement => (
   <IconWifi {...args} />
 )
+
 export const work = (args: StorybookArgs): React.ReactElement => (
   <IconWork {...args} />
 )
+
 export const youtube = (args: StorybookArgs): React.ReactElement => (
   <IconYoutube {...args} />
 )
+
 export const zoomIn = (args: StorybookArgs): React.ReactElement => (
   <IconZoomIn {...args} />
 )
+
 export const zoomOutMap = (args: StorybookArgs): React.ReactElement => (
   <IconZoomOutMap {...args} />
 )
+
 export const zoomOut = (args: StorybookArgs): React.ReactElement => (
   <IconZoomOut {...args} />
 )
diff --git a/src/components/Icon/Icons.stories.tsx b/src/components/Icon/Icons.stories.tsx
index 61e52ee3f9..10fabc82b0 100644
--- a/src/components/Icon/Icons.stories.tsx
+++ b/src/components/Icon/Icons.stories.tsx
@@ -228,7 +228,7 @@ import {
   IconUploadFile,
   IconVerified,
   IconVerifiedUser,
-  IconVisiblity,
+  IconVisibility,
   IconVisibilityOff,
   IconVolumeOff,
   IconWarning,
@@ -497,7 +497,7 @@ export const allIcons = (args: StorybookArgs): React.ReactElement => (
     <IconUploadFile {...args} />
     <IconVerified {...args} />
     <IconVerifiedUser {...args} />
-    <IconVisiblity {...args} />
+    <IconVisibility {...args} />
     <IconVisibilityOff {...args} />
     <IconVolumeOff {...args} />
     <IconWarning {...args} />
diff --git a/src/components/Icon/Icons.ts b/src/components/Icon/Icons.ts
index 94272e418e..a33863cb3d 100644
--- a/src/components/Icon/Icons.ts
+++ b/src/components/Icon/Icons.ts
@@ -226,7 +226,7 @@ import UpdateSvg from 'uswds/dist/img/usa-icons/update.svg?svgr'
 import UploadFileSvg from 'uswds/dist/img/usa-icons/upload_file.svg?svgr'
 import VerifiedSvg from 'uswds/dist/img/usa-icons/verified.svg?svgr'
 import VerifiedUserSvg from 'uswds/dist/img/usa-icons/verified_user.svg?svgr'
-import VisiblitySvg from 'uswds/dist/img/usa-icons/visibility.svg?svgr'
+import VisibilitySvg from 'uswds/dist/img/usa-icons/visibility.svg?svgr'
 import VisibilityOffSvg from 'uswds/dist/img/usa-icons/visibility_off.svg?svgr'
 import VolumeOffSvg from 'uswds/dist/img/usa-icons/volume_off.svg?svgr'
 import WarningSvg from 'uswds/dist/img/usa-icons/warning.svg?svgr'
@@ -240,6 +240,7 @@ import ZoomOutSvg from 'uswds/dist/img/usa-icons/zoom_out.svg?svgr'
 
 import { makeUSWDSIcon, IconProps } from './Icon'
 import React from 'react'
+import { withDeprecationWarning } from '../hoc/withDeprecationWarning'
 
 export const IconAccessibilityNew: React.ComponentType<IconProps> =
   makeUSWDSIcon(AccessibilityNewSvg)
@@ -312,133 +313,204 @@ export const IconBathtub: React.ComponentType<IconProps> =
 
 export const IconBedding: React.ComponentType<IconProps> =
   makeUSWDSIcon(BeddingSvg)
+
 export const IconBookmark: React.ComponentType<IconProps> =
   makeUSWDSIcon(BookmarkSvg)
+
 export const IconBugReport: React.ComponentType<IconProps> =
   makeUSWDSIcon(BugReportSvg)
+
 export const IconBuild: React.ComponentType<IconProps> = makeUSWDSIcon(BuildSvg)
+
 export const IconCalendarToday: React.ComponentType<IconProps> =
   makeUSWDSIcon(CalendarTodaySvg)
+
 export const IconCampaign: React.ComponentType<IconProps> =
   makeUSWDSIcon(CampaignSvg)
+
 export const IconCamping: React.ComponentType<IconProps> =
   makeUSWDSIcon(CampingSvg)
+
 export const IconCancel: React.ComponentType<IconProps> =
   makeUSWDSIcon(CancelSvg)
+
 export const IconChat: React.ComponentType<IconProps> = makeUSWDSIcon(ChatSvg)
+
 export const IconCheck: React.ComponentType<IconProps> = makeUSWDSIcon(CheckSvg)
+
 export const IconCheckBoxOutlineBlank: React.ComponentType<IconProps> =
   makeUSWDSIcon(CheckBoxOutlineBlankSvg)
+
 export const IconCheckCircle: React.ComponentType<IconProps> =
   makeUSWDSIcon(CheckCircleSvg)
+
 export const IconCheckCircleOutline: React.ComponentType<IconProps> =
   makeUSWDSIcon(CheckCircleOutlineSvg)
+
 export const IconCheckroom: React.ComponentType<IconProps> =
   makeUSWDSIcon(CheckroomSvg)
+
 export const IconCleanHands: React.ComponentType<IconProps> =
   makeUSWDSIcon(CleanHandsSvg)
+
 export const IconClothes: React.ComponentType<IconProps> =
   makeUSWDSIcon(ClothesSvg)
+
 export const IconClose: React.ComponentType<IconProps> = makeUSWDSIcon(CloseSvg)
+
 export const IconClosedCaption: React.ComponentType<IconProps> =
   makeUSWDSIcon(ClosedCaptionSvg)
+
 export const IconCloud: React.ComponentType<IconProps> = makeUSWDSIcon(CloudSvg)
+
 export const IconCode: React.ComponentType<IconProps> = makeUSWDSIcon(CodeSvg)
+
 export const IconComment: React.ComponentType<IconProps> =
   makeUSWDSIcon(CommentSvg)
+
 export const IconConnectWithoutContact: React.ComponentType<IconProps> =
   makeUSWDSIcon(ConnectWithoutContactSvg)
+
 export const IconConstruction: React.ComponentType<IconProps> =
   makeUSWDSIcon(ConstructionSvg)
+
 export const IconConstructionWorker: React.ComponentType<IconProps> =
   makeUSWDSIcon(ConstructionWorkerSvg)
+
 export const IconContactPage: React.ComponentType<IconProps> =
   makeUSWDSIcon(ContactPageSvg)
+
 export const IconContentCopy: React.ComponentType<IconProps> =
   makeUSWDSIcon(ContentCopySvg)
+
 export const IconCoronavirus: React.ComponentType<IconProps> =
   makeUSWDSIcon(CoronavirusSvg)
+
 export const IconCreditCard: React.ComponentType<IconProps> =
   makeUSWDSIcon(CreditCardSvg)
+
 export const IconDeck: React.ComponentType<IconProps> = makeUSWDSIcon(DeckSvg)
+
 export const IconDelete: React.ComponentType<IconProps> =
   makeUSWDSIcon(DeleteSvg)
+
 export const IconDeviceThermostat: React.ComponentType<IconProps> =
   makeUSWDSIcon(DeviceThermostatSvg)
+
 export const IconDirections: React.ComponentType<IconProps> =
   makeUSWDSIcon(DirectionsSvg)
+
 export const IconDirectionsBike: React.ComponentType<IconProps> =
   makeUSWDSIcon(DirectionsBikeSvg)
+
 export const IconDirectionsBus: React.ComponentType<IconProps> =
   makeUSWDSIcon(DirectionsBusSvg)
+
 export const IconDirectionsCar: React.ComponentType<IconProps> =
   makeUSWDSIcon(DirectionsCarSvg)
+
 export const IconDirectionsWalk: React.ComponentType<IconProps> =
   makeUSWDSIcon(DirectionsWalkSvg)
+
 export const IconDoNotDisturb: React.ComponentType<IconProps> =
   makeUSWDSIcon(DoNotDisturbSvg)
+
 export const IconDoNotTouch: React.ComponentType<IconProps> =
   makeUSWDSIcon(DoNotTouchSvg)
+
 export const IconDragHandle: React.ComponentType<IconProps> =
   makeUSWDSIcon(DragHandleSvg)
+
 export const IconEco: React.ComponentType<IconProps> = makeUSWDSIcon(EcoSvg)
+
 export const IconEdit: React.ComponentType<IconProps> = makeUSWDSIcon(EditSvg)
+
 export const IconElectricalServices: React.ComponentType<IconProps> =
   makeUSWDSIcon(ElectricalServicesSvg)
+
 export const IconEmojiEvents: React.ComponentType<IconProps> =
   makeUSWDSIcon(EmojiEventsSvg)
+
 export const IconError: React.ComponentType<IconProps> = makeUSWDSIcon(ErrorSvg)
+
 export const IconErrorOutline: React.ComponentType<IconProps> =
   makeUSWDSIcon(ErrorOutlineSvg)
+
 export const IconEvent: React.ComponentType<IconProps> = makeUSWDSIcon(EventSvg)
+
 export const IconExpandLess: React.ComponentType<IconProps> =
   makeUSWDSIcon(ExpandLessSvg)
+
 export const IconExpandMore: React.ComponentType<IconProps> =
   makeUSWDSIcon(ExpandMoreSvg)
+
 export const IconFacebook: React.ComponentType<IconProps> =
   makeUSWDSIcon(FacebookSvg)
+
 export const IconFastForward: React.ComponentType<IconProps> =
   makeUSWDSIcon(FastForwardSvg)
+
 export const IconFastRewind: React.ComponentType<IconProps> =
   makeUSWDSIcon(FastRewindSvg)
+
 export const IconFavorite: React.ComponentType<IconProps> =
   makeUSWDSIcon(FavoriteSvg)
+
 export const IconFavoriteBorder: React.ComponentType<IconProps> =
   makeUSWDSIcon(FavoriteBorderSvg)
+
 export const IconFileDownload: React.ComponentType<IconProps> =
   makeUSWDSIcon(FileDownloadSvg)
+
 export const IconFilePresent: React.ComponentType<IconProps> =
   makeUSWDSIcon(FilePresentSvg)
+
 export const IconFileUpload: React.ComponentType<IconProps> =
   makeUSWDSIcon(FileUploadSvg)
+
 export const IconFilterAlt: React.ComponentType<IconProps> =
   makeUSWDSIcon(FilterAltSvg)
+
 export const IconFilterList: React.ComponentType<IconProps> =
   makeUSWDSIcon(FilterListSvg)
+
 export const IconFingerprint: React.ComponentType<IconProps> =
   makeUSWDSIcon(FingerprintSvg)
+
 export const IconFirstPage: React.ComponentType<IconProps> =
   makeUSWDSIcon(FirstPageSvg)
+
 export const IconFlag: React.ComponentType<IconProps> = makeUSWDSIcon(FlagSvg)
+
 export const IconFlickr: React.ComponentType<IconProps> =
   makeUSWDSIcon(FlickrSvg)
+
 export const IconFlight: React.ComponentType<IconProps> =
   makeUSWDSIcon(FlightSvg)
+
 export const IconFlooding: React.ComponentType<IconProps> =
   makeUSWDSIcon(FloodingSvg)
+
 export const IconFolder: React.ComponentType<IconProps> =
   makeUSWDSIcon(FolderSvg)
+
 export const IconFolderOpen: React.ComponentType<IconProps> =
   makeUSWDSIcon(FolderOpenSvg)
+
 export const IconFormatQuote: React.ComponentType<IconProps> =
   makeUSWDSIcon(FormatQuoteSvg)
+
 export const IconFormatSize: React.ComponentType<IconProps> =
   makeUSWDSIcon(FormatSizeSvg)
+
 export const IconForum: React.ComponentType<IconProps> = makeUSWDSIcon(ForumSvg)
+
 export const IconGithub: React.ComponentType<IconProps> =
   makeUSWDSIcon(GithubSvg)
+
 export const IconGridView: React.ComponentType<IconProps> =
   makeUSWDSIcon(GridViewSvg)
+
 export const IconGroupAdd: React.ComponentType<IconProps> =
   makeUSWDSIcon(GroupAddSvg)
 
@@ -509,214 +581,339 @@ export const IconLightbulbOutline: React.ComponentType<IconProps> =
   makeUSWDSIcon(LightbulbOutlineSvg)
 
 export const IconLink: React.ComponentType<IconProps> = makeUSWDSIcon(LinkSvg)
+
 export const IconLinkOff: React.ComponentType<IconProps> =
   makeUSWDSIcon(LinkOffSvg)
+
 export const IconList: React.ComponentType<IconProps> = makeUSWDSIcon(ListSvg)
+
 export const IconLocalCafe: React.ComponentType<IconProps> =
   makeUSWDSIcon(LocalCafeSvg)
+
 export const IconLocalFireDepartment: React.ComponentType<IconProps> =
   makeUSWDSIcon(LocalFireDepartmentSvg)
+
 export const IconLocalGasStation: React.ComponentType<IconProps> =
   makeUSWDSIcon(LocalGasStationSvg)
+
 export const IconLocalGroceryStore: React.ComponentType<IconProps> =
   makeUSWDSIcon(LocalGroceryStoreSvg)
+
 export const IconLocalHospital: React.ComponentType<IconProps> =
   makeUSWDSIcon(LocalHospitalSvg)
+
 export const IconLocalLaundryService: React.ComponentType<IconProps> =
   makeUSWDSIcon(LocalLaundryServiceSvg)
+
 export const IconLocalLibrary: React.ComponentType<IconProps> =
   makeUSWDSIcon(LocalLibrarySvg)
+
 export const IconLocalOffer: React.ComponentType<IconProps> =
   makeUSWDSIcon(LocalOfferSvg)
+
 export const IconLocalParking: React.ComponentType<IconProps> =
   makeUSWDSIcon(LocalParkingSvg)
+
 export const IconLocalPharmacy: React.ComponentType<IconProps> =
   makeUSWDSIcon(LocalPharmacySvg)
+
 export const IconLocalPolice: React.ComponentType<IconProps> =
   makeUSWDSIcon(LocalPoliceSvg)
+
 export const IconLocalTaxi: React.ComponentType<IconProps> =
   makeUSWDSIcon(LocalTaxiSvg)
+
 export const IconLocationCity: React.ComponentType<IconProps> =
   makeUSWDSIcon(LocationCitySvg)
+
 export const IconLocationOn: React.ComponentType<IconProps> =
   makeUSWDSIcon(LocationOnSvg)
+
 export const IconLock: React.ComponentType<IconProps> = makeUSWDSIcon(LockSvg)
+
 export const IconLockOpen: React.ComponentType<IconProps> =
   makeUSWDSIcon(LockOpenSvg)
+
 export const IconLockOutline: React.ComponentType<IconProps> =
   makeUSWDSIcon(LockOutlineSvg)
+
 export const IconLogin: React.ComponentType<IconProps> = makeUSWDSIcon(LoginSvg)
+
 export const IconLogout: React.ComponentType<IconProps> =
   makeUSWDSIcon(LogoutSvg)
+
 export const IconLoop: React.ComponentType<IconProps> = makeUSWDSIcon(LoopSvg)
+
 export const IconMail: React.ComponentType<IconProps> = makeUSWDSIcon(MailSvg)
+
 export const IconMailOutline: React.ComponentType<IconProps> =
   makeUSWDSIcon(MailOutlineSvg)
+
 export const IconMap: React.ComponentType<IconProps> = makeUSWDSIcon(MapSvg)
+
 export const IconMasks: React.ComponentType<IconProps> = makeUSWDSIcon(MasksSvg)
+
 export const IconMedicalServices: React.ComponentType<IconProps> =
   makeUSWDSIcon(MedicalServicesSvg)
+
 export const IconMenu: React.ComponentType<IconProps> = makeUSWDSIcon(MenuSvg)
+
 export const IconMilitaryTech: React.ComponentType<IconProps> =
   makeUSWDSIcon(MilitaryTechSvg)
+
 export const IconMoreHoriz: React.ComponentType<IconProps> =
   makeUSWDSIcon(MoreHorizSvg)
+
 export const IconMoreVert: React.ComponentType<IconProps> =
   makeUSWDSIcon(MoreVertSvg)
+
 export const IconMyLocation: React.ComponentType<IconProps> =
   makeUSWDSIcon(MyLocationSvg)
+
 export const IconNavigateBefore: React.ComponentType<IconProps> =
   makeUSWDSIcon(NavigateBeforeSvg)
+
 export const IconNavigateNext: React.ComponentType<IconProps> =
   makeUSWDSIcon(NavigateNextSvg)
+
 export const IconNavigateFarBefore: React.ComponentType<IconProps> =
   makeUSWDSIcon(NavigateFarBeforeSvg)
+
 export const IconNavigateFarNext: React.ComponentType<IconProps> =
   makeUSWDSIcon(NavigateFarNextSvg)
+
 export const IconNearMe: React.ComponentType<IconProps> =
   makeUSWDSIcon(NearMeSvg)
+
 export const IconNotifications: React.ComponentType<IconProps> =
   makeUSWDSIcon(NotificationsSvg)
+
 export const IconNotificationsActive: React.ComponentType<IconProps> =
   makeUSWDSIcon(NotificationsActiveSvg)
+
 export const IconNotificationsNone: React.ComponentType<IconProps> =
   makeUSWDSIcon(NotificationsNoneSvg)
+
 export const IconNotificationsOff: React.ComponentType<IconProps> =
   makeUSWDSIcon(NotificationsOffSvg)
+
 export const IconPark: React.ComponentType<IconProps> = makeUSWDSIcon(ParkSvg)
+
 export const IconPeople: React.ComponentType<IconProps> =
   makeUSWDSIcon(PeopleSvg)
+
 export const IconPerson: React.ComponentType<IconProps> =
   makeUSWDSIcon(PersonSvg)
+
 export const IconPets: React.ComponentType<IconProps> = makeUSWDSIcon(PetsSvg)
+
 export const IconPhone: React.ComponentType<IconProps> = makeUSWDSIcon(PhoneSvg)
+
 export const IconPhotoCamera: React.ComponentType<IconProps> =
   makeUSWDSIcon(PhotoCameraSvg)
+
 export const IconPrint: React.ComponentType<IconProps> = makeUSWDSIcon(PrintSvg)
+
 export const IconPriorityHigh: React.ComponentType<IconProps> =
   makeUSWDSIcon(PriorityHighSvg)
+
 export const IconPublic: React.ComponentType<IconProps> =
   makeUSWDSIcon(PublicSvg)
+
 export const IconPushPin: React.ComponentType<IconProps> =
   makeUSWDSIcon(PushPinSvg)
+
 export const IconRadioButtonUnchecked: React.ComponentType<IconProps> =
   makeUSWDSIcon(RadioButtonUncheckedSvg)
+
 export const IconRain: React.ComponentType<IconProps> = makeUSWDSIcon(RainSvg)
+
 export const IconReduceCapacity: React.ComponentType<IconProps> =
   makeUSWDSIcon(ReduceCapacitySvg)
+
 export const IconRemove: React.ComponentType<IconProps> =
   makeUSWDSIcon(RemoveSvg)
+
 export const IconReport: React.ComponentType<IconProps> =
   makeUSWDSIcon(ReportSvg)
+
 export const IconRestaurant: React.ComponentType<IconProps> =
   makeUSWDSIcon(RestaurantSvg)
+
 export const IconRssFeed: React.ComponentType<IconProps> =
   makeUSWDSIcon(RssFeedSvg)
+
 export const IconSafetyDivider: React.ComponentType<IconProps> =
   makeUSWDSIcon(SafetyDividerSvg)
+
 export const IconSanitizer: React.ComponentType<IconProps> =
   makeUSWDSIcon(SanitizerSvg)
+
 export const IconSaveAlt: React.ComponentType<IconProps> =
   makeUSWDSIcon(SaveAltSvg)
+
 export const IconSevereWeather: React.ComponentType<IconProps> =
   makeUSWDSIcon(SevereWeatherSvg)
+
 export const IconSchedule: React.ComponentType<IconProps> =
   makeUSWDSIcon(ScheduleSvg)
+
 export const IconSchool: React.ComponentType<IconProps> =
   makeUSWDSIcon(SchoolSvg)
+
 export const IconScience: React.ComponentType<IconProps> =
   makeUSWDSIcon(ScienceSvg)
+
 export const IconSearch: React.ComponentType<IconProps> =
   makeUSWDSIcon(SearchSvg)
+
 export const IconSecurity: React.ComponentType<IconProps> =
   makeUSWDSIcon(SecuritySvg)
+
 export const IconSend: React.ComponentType<IconProps> = makeUSWDSIcon(SendSvg)
+
 export const IconSentimentDissatisfied: React.ComponentType<IconProps> =
   makeUSWDSIcon(SentimentDissatisfiedSvg)
+
 export const IconSentimentNeutral: React.ComponentType<IconProps> =
   makeUSWDSIcon(SentimentNeutralSvg)
+
 export const IconSentimentSatisfied: React.ComponentType<IconProps> =
   makeUSWDSIcon(SentimentSatisfiedSvg)
+
 export const IconSentimentSatisfiedAlt: React.ComponentType<IconProps> =
   makeUSWDSIcon(SentimentSatisfiedAltSvg)
+
 export const IconSentimentVeryDissatisfied: React.ComponentType<IconProps> =
   makeUSWDSIcon(SentimentVeryDissatisfiedSvg)
+
 export const IconSettings: React.ComponentType<IconProps> =
   makeUSWDSIcon(SettingsSvg)
+
 export const IconShare: React.ComponentType<IconProps> = makeUSWDSIcon(ShareSvg)
+
 export const IconShield: React.ComponentType<IconProps> =
   makeUSWDSIcon(ShieldSvg)
+
 export const IconShoppingBasket: React.ComponentType<IconProps> =
   makeUSWDSIcon(ShoppingBasketSvg)
+
 export const IconSnow: React.ComponentType<IconProps> = makeUSWDSIcon(SnowSvg)
+
 export const IconSoap: React.ComponentType<IconProps> = makeUSWDSIcon(SoapSvg)
+
 export const IconSocialDistance: React.ComponentType<IconProps> =
   makeUSWDSIcon(SocialDistanceSvg)
+
 export const IconSortArrow: React.ComponentType<IconProps> =
   makeUSWDSIcon(SortArrowSvg)
+
 export const IconSpellcheck: React.ComponentType<IconProps> =
   makeUSWDSIcon(SpellcheckSvg)
+
 export const IconStar: React.ComponentType<IconProps> = makeUSWDSIcon(StarSvg)
+
 export const IconStarHalf: React.ComponentType<IconProps> =
   makeUSWDSIcon(StarHalfSvg)
+
 export const IconStarOutline: React.ComponentType<IconProps> =
   makeUSWDSIcon(StarOutlineSvg)
+
 export const IconStore: React.ComponentType<IconProps> = makeUSWDSIcon(StoreSvg)
+
 export const IconSupport: React.ComponentType<IconProps> =
   makeUSWDSIcon(SupportSvg)
+
 export const IconSupportAgent: React.ComponentType<IconProps> =
   makeUSWDSIcon(SupportAgentSvg)
+
 export const IconTextFields: React.ComponentType<IconProps> =
   makeUSWDSIcon(TextFieldsSvg)
+
 export const IconThumbDownAlt: React.ComponentType<IconProps> =
   makeUSWDSIcon(ThumbDownAltSvg)
+
 export const IconThumbUpAlt: React.ComponentType<IconProps> =
   makeUSWDSIcon(ThumbUpAltSvg)
+
 export const IconTimer: React.ComponentType<IconProps> = makeUSWDSIcon(TimerSvg)
+
 export const IconToggleOff: React.ComponentType<IconProps> =
   makeUSWDSIcon(ToggleOffSvg)
+
 export const IconToggleOn: React.ComponentType<IconProps> =
   makeUSWDSIcon(ToggleOnSvg)
+
 export const IconTopic: React.ComponentType<IconProps> = makeUSWDSIcon(TopicSvg)
+
 export const IconTornado: React.ComponentType<IconProps> =
   makeUSWDSIcon(TornadoSvg)
+
 export const IconTranslate: React.ComponentType<IconProps> =
   makeUSWDSIcon(TranslateSvg)
+
 export const IconTrendingDown: React.ComponentType<IconProps> =
   makeUSWDSIcon(TrendingDownSvg)
+
 export const IconTrendingUp: React.ComponentType<IconProps> =
   makeUSWDSIcon(TrendingUpSvg)
+
 export const IconTwitter: React.ComponentType<IconProps> =
   makeUSWDSIcon(TwitterSvg)
+
 export const IconUndo: React.ComponentType<IconProps> = makeUSWDSIcon(UndoSvg)
+
 export const IconUnfoldLess: React.ComponentType<IconProps> =
   makeUSWDSIcon(UnfoldLessSvg)
+
 export const IconUnfoldMore: React.ComponentType<IconProps> =
   makeUSWDSIcon(UnfoldMoreSvg)
+
 export const IconUpdate: React.ComponentType<IconProps> =
   makeUSWDSIcon(UpdateSvg)
+
 export const IconUploadFile: React.ComponentType<IconProps> =
   makeUSWDSIcon(UploadFileSvg)
+
 export const IconVerified: React.ComponentType<IconProps> =
   makeUSWDSIcon(VerifiedSvg)
+
 export const IconVerifiedUser: React.ComponentType<IconProps> =
   makeUSWDSIcon(VerifiedUserSvg)
+
+export const IconVisibility: React.ComponentType<IconProps> =
+  makeUSWDSIcon(VisibilitySvg)
+
+/** @deprecated, use IconVisibility */
 export const IconVisiblity: React.ComponentType<IconProps> =
-  makeUSWDSIcon(VisiblitySvg)
+  withDeprecationWarning(
+    IconVisibility,
+    '`IconVisiblity` is deprecated and will be removed in the next major release. Please use `IconVisibility`.'
+  )
+
 export const IconVisibilityOff: React.ComponentType<IconProps> =
   makeUSWDSIcon(VisibilityOffSvg)
+
 export const IconVolumeOff: React.ComponentType<IconProps> =
   makeUSWDSIcon(VolumeOffSvg)
+
 export const IconWarning: React.ComponentType<IconProps> =
   makeUSWDSIcon(WarningSvg)
+
 export const IconWash: React.ComponentType<IconProps> = makeUSWDSIcon(WashSvg)
+
 export const IconWifi: React.ComponentType<IconProps> = makeUSWDSIcon(WifiSvg)
+
 export const IconWork: React.ComponentType<IconProps> = makeUSWDSIcon(WorkSvg)
+
 export const IconYoutube: React.ComponentType<IconProps> =
   makeUSWDSIcon(YoutubeSvg)
+
 export const IconZoomIn: React.ComponentType<IconProps> =
   makeUSWDSIcon(ZoomInSvg)
+
 export const IconZoomOutMap: React.ComponentType<IconProps> =
   makeUSWDSIcon(ZoomOutMapSvg)
+
 export const IconZoomOut: React.ComponentType<IconProps> =
   makeUSWDSIcon(ZoomOutSvg)
diff --git a/src/components/hoc/withDeprecationWarning.test.tsx b/src/components/hoc/withDeprecationWarning.test.tsx
new file mode 100644
index 0000000000..fe1573322b
--- /dev/null
+++ b/src/components/hoc/withDeprecationWarning.test.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+jest.mock('../../deprecation')
+import { deprecationWarning } from '../../deprecation'
+import { Button } from '../Button/Button'
+import { withDeprecationWarning } from './withDeprecationWarning'
+
+describe('withDeprecationWarning HOC', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should call deprecationWarning before rendering the wrapped component', () => {
+    const deprecationWarningMessage = 'That component is deprecated!'
+    const DeprecatedButton = withDeprecationWarning(
+      Button,
+      deprecationWarningMessage
+    )
+    const buttonText = 'Deprecated Button'
+    const { queryByTestId } = render(
+      <DeprecatedButton type="button">{buttonText}</DeprecatedButton>
+    )
+
+    const renderedButton = queryByTestId('button')
+    expect(renderedButton).toBeInTheDocument()
+    expect(renderedButton).toHaveTextContent(buttonText)
+    expect(deprecationWarning).toHaveBeenCalledTimes(1)
+    expect(deprecationWarning).toHaveBeenCalledWith(deprecationWarningMessage)
+  })
+})
diff --git a/src/components/hoc/withDeprecationWarning.tsx b/src/components/hoc/withDeprecationWarning.tsx
new file mode 100644
index 0000000000..7811fb9632
--- /dev/null
+++ b/src/components/hoc/withDeprecationWarning.tsx
@@ -0,0 +1,17 @@
+import React, { ComponentType, useEffect } from 'react'
+
+import { deprecationWarning } from '../../deprecation'
+
+export function withDeprecationWarning<P>(
+  Component: ComponentType<P>,
+  warning: string
+) {
+  // eslint-disable-next-line react/display-name
+  return (props: P): JSX.Element => {
+    useEffect(() => {
+      deprecationWarning(warning)
+    }, [])
+
+    return <Component {...props} />
+  }
+}

From c15a5391c53891a344c2ef061c64dd9b23eaf7b8 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Wed, 13 Oct 2021 14:56:26 -0400
Subject: [PATCH 02/12] First pass of IconList

---
 src/components/IconList/IconList.stories.tsx  | 147 ++++++++++++++++++
 src/components/IconList/IconList.tsx          |  19 +++
 .../IconList/IconListItem/IconListItem.tsx    |  41 +++++
 .../IconList/IconListTitle/IconListTitle.tsx  |  37 +++++
 4 files changed, 244 insertions(+)
 create mode 100644 src/components/IconList/IconList.stories.tsx
 create mode 100644 src/components/IconList/IconList.tsx
 create mode 100644 src/components/IconList/IconListItem/IconListItem.tsx
 create mode 100644 src/components/IconList/IconListTitle/IconListTitle.tsx

diff --git a/src/components/IconList/IconList.stories.tsx b/src/components/IconList/IconList.stories.tsx
new file mode 100644
index 0000000000..0d248557f8
--- /dev/null
+++ b/src/components/IconList/IconList.stories.tsx
@@ -0,0 +1,147 @@
+import React, { ReactElement } from 'react'
+import {
+  IconAttachMoney,
+  IconCancel,
+  IconCheckCircle,
+  IconHelp,
+  IconThumbUpAlt,
+} from '../Icon/Icons'
+import { IconList } from './IconList'
+import { IconListItem } from './IconListItem/IconListItem'
+import { IconListTitle } from './IconListTitle/IconListTitle'
+
+export default {
+  title: 'Components/Icon list',
+  parameters: {
+    docs: {
+      description: {
+        component: `
+###USWDS 2.0 Icon list component
+Source: https://designsystem.digital.gov/components/icon-list/
+`,
+      },
+    },
+  },
+}
+
+export const Default = (): ReactElement => (
+  <IconList>
+    <IconListItem icon={IconCheckCircle} iconDivClassName="text-green">
+      Wash your hands for 20 seconds with soap
+    </IconListItem>
+    <IconListItem icon={IconCheckCircle} iconDivClassName="text-green">
+      Stay six feet away from others
+    </IconListItem>
+    <IconListItem icon={IconCancel} iconDivClassName="text-red">
+      Avoid large gatherings
+    </IconListItem>
+  </IconList>
+)
+
+export const SimpleContent = (): ReactElement => (
+  <>
+    <p className="margin-bottom-2">Benefits of joining Global Entry program:</p>
+    <IconList className="usa-icon-list--primary">
+      <IconListItem icon={IconThumbUpAlt}>No processing lines</IconListItem>
+      <IconListItem icon={IconThumbUpAlt}>
+        Access to expedited entry benefits in other countries
+      </IconListItem>
+      <IconListItem icon={IconThumbUpAlt}>
+        Available at major U.S. airports
+      </IconListItem>
+      <IconListItem icon={IconThumbUpAlt}>Reduced wait times</IconListItem>
+    </IconList>
+  </>
+)
+
+export const RichContent = (): ReactElement => (
+  <IconList>
+    <IconListItem icon={IconCheckCircle} iconDivClassName="text-ink">
+      <IconListTitle type="h3">Donate cash when possible.</IconListTitle>
+      <p>
+        Financial contributions to recognized disaster relief organizations are
+        the fastest, most flexible and most effective method of donating.
+        Organizations on the ground know what items and quantities are needed,
+        often buy in bulk with discounts and, if possible, purchase through
+        businesses local to the disaster, which supports economic recovery.
+      </p>
+    </IconListItem>
+    <IconListItem icon={IconCheckCircle} iconDivClassName="text-ink">
+      <IconListTitle type="h3">
+        Confirm what donations are needed.
+      </IconListTitle>
+      <p>
+        Unneeded and unsolicited goods burden local organizations’ ability to
+        meet survivors’ confirmed needs, drawing away valuable volunteer labor,
+        transportation and warehouse space.
+      </p>
+    </IconListItem>
+    <IconListItem icon={IconCheckCircle} iconDivClassName="text-ink">
+      <IconListTitle type="h3">
+        Talk to trusted organizations about volunteering.
+      </IconListTitle>
+      <p>
+        Financial contributions to recognized disaster relief organizations are
+        the fastest, most flexible and most effective method of donating.
+        Organizations on the ground know what items and quantities are needed,
+        often buy in bulk with discounts and, if possible, purchase through
+        businesses local to the disaster, which supports economic recovery.
+      </p>
+    </IconListItem>
+  </IconList>
+)
+
+export const CustomSizeWithRichContent = (): ReactElement => (
+  <>
+    <p className="margin-bottom-2">
+      Here are a few easy ways you can help reduce energy use and costs while
+      spending more time at home.
+    </p>
+    <IconList className="usa-icon-list--size-lg">
+      <IconListItem icon={IconAttachMoney} iconDivClassName="text-green">
+        <IconListTitle type="h3">Let the sun shine.</IconListTitle>
+        <p>
+          On sunny days, open your curtains to allow the sun to naturally warm
+          the rooms of your home without using electricity. Natural sunlight can
+          also lift your mood to help brighten your day. On warm days, close
+          your curtains to help keep your house cool.
+        </p>
+      </IconListItem>
+      <IconListItem icon={IconAttachMoney} iconDivClassName="text-green">
+        <IconListTitle type="h3">Adjust your schedule.</IconListTitle>
+        <p>
+          Instead of running high-energy-use appliances such as dishwashers and
+          clothes dryers during mid-afternoon or early evening hours, operate
+          them early in the morning or late at night. Some utilities charge less
+          at off-peak times, which will help reduce your costs.
+        </p>
+      </IconListItem>
+      <IconListItem icon={IconAttachMoney} iconDivClassName="text-green">
+        <IconListTitle type="h3">Fill it up.</IconListTitle>
+        <p>
+          Wash full loads, whether it’s clothes or dishes. Washing multiple
+          small loads means you’re using and heating more water, which can
+          increase your expenses. Using cold water for clothes washing can also
+          help lower your costs.
+        </p>
+      </IconListItem>
+    </IconList>
+  </>
+)
+
+export const CustomSize = (): ReactElement => (
+  <IconList className="usa-icon-list--size-lg">
+    <IconListItem icon={IconHelp} iconDivClassName="text-blue">
+      <span className="text-bold">Timing.</span> Is now the right time to start
+      a business?
+    </IconListItem>
+    <IconListItem icon={IconHelp} iconDivClassName="text-blue">
+      <span className="text-bold">Funding.</span> Do I have enough money to
+      launch a business?
+    </IconListItem>
+    <IconListItem icon={IconHelp} iconDivClassName="text-blue">
+      <span className="text-bold">Need.</span> Will this business fill a real
+      need for my customers?
+    </IconListItem>
+  </IconList>
+)
diff --git a/src/components/IconList/IconList.tsx b/src/components/IconList/IconList.tsx
new file mode 100644
index 0000000000..1b370d2a02
--- /dev/null
+++ b/src/components/IconList/IconList.tsx
@@ -0,0 +1,19 @@
+import React, { ReactElement } from 'react'
+import classnames from 'classnames'
+
+// TODO: Size, Color?
+interface IconListProps {
+  children: React.ReactNode // TODO: Constrain further?
+  className?: string
+}
+
+export const IconList = ({
+  children,
+  className,
+}: IconListProps & JSX.IntrinsicElements['ul']): ReactElement => {
+  const classes = classnames(className, 'usa-icon-list')
+
+  return <ul className={classes}>{children}</ul>
+}
+
+export default IconList
diff --git a/src/components/IconList/IconListItem/IconListItem.tsx b/src/components/IconList/IconListItem/IconListItem.tsx
new file mode 100644
index 0000000000..b09c2cfa35
--- /dev/null
+++ b/src/components/IconList/IconListItem/IconListItem.tsx
@@ -0,0 +1,41 @@
+import React, { ComponentType, ReactElement, ReactNode } from 'react'
+import classnames from 'classnames'
+import { IconProps } from '../../Icon/Icon'
+
+interface IconListItemProps {
+  icon: ComponentType<IconProps>
+  iconClassName?: string
+  iconDivClassName?: string
+  contentDivClassName?: string
+  className?: string
+  children: ReactNode
+}
+
+export const IconListItem = ({
+  icon,
+  iconClassName,
+  iconDivClassName,
+  contentDivClassName,
+  className,
+  children,
+}: IconListItemProps & JSX.IntrinsicElements['li']): ReactElement => {
+  const classes = classnames(className, 'usa-icon-list__item')
+  const iconClasses = classnames(iconDivClassName, 'usa-icon-list__icon') // TODO: Extract into own component (whether or not that is externally exposed)?
+  const contentClasses = classnames(
+    // TODO: Extract into own component (whether or not that is externally exposed)?
+    contentDivClassName,
+    'usa-icon-list__content'
+  )
+  const Icon = icon
+
+  return (
+    <li className={classes}>
+      <div className={iconClasses}>
+        <Icon className={iconClassName} />
+      </div>
+      <div className={contentClasses}>{children}</div>
+    </li>
+  )
+}
+
+export default IconListItem
diff --git a/src/components/IconList/IconListTitle/IconListTitle.tsx b/src/components/IconList/IconListTitle/IconListTitle.tsx
new file mode 100644
index 0000000000..218ced4028
--- /dev/null
+++ b/src/components/IconList/IconListTitle/IconListTitle.tsx
@@ -0,0 +1,37 @@
+import React, { ReactElement } from 'react'
+import classnames from 'classnames'
+
+interface BaseIconListTitleProps {
+  type: string
+  children: React.ReactNode
+  className?: string
+}
+
+interface HeadingIconListTitleProps extends BaseIconListTitleProps {
+  type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+}
+
+interface ParagraphIconListTitleProps extends BaseIconListTitleProps {
+  type: 'p'
+}
+
+type IconListHeadingTitleProps = HeadingIconListTitleProps &
+  React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLHeadingElement>,
+    HTMLHeadingElement
+  >
+
+type IconListParagraphTitleProps = ParagraphIconListTitleProps &
+  JSX.IntrinsicElements['p']
+
+export const IconListTitle = ({
+  type,
+  children,
+  className,
+}: IconListParagraphTitleProps | IconListHeadingTitleProps): ReactElement => {
+  const classes = classnames(className, 'usa-icon-list__title')
+  const Tag = type
+  return <Tag className={classes}>{children}</Tag>
+}
+
+export default IconListTitle

From e7543edc629287de0068dac7d81844b65d053600 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Wed, 13 Oct 2021 15:00:36 -0400
Subject: [PATCH 03/12] Export components from Index.ts

---
 src/index.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/index.ts b/src/index.ts
index a1f9fc05fa..a11bd565c8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -63,6 +63,11 @@ export { NavDropDownButton } from './components/header/NavDropDownButton/NavDrop
 export { PrimaryNav } from './components/header/PrimaryNav/PrimaryNav'
 export { Title } from './components/header/Title/Title'
 
+// IconList
+export { IconList as IconListCONFLICT } from './components/IconList/IconList'
+export { IconListItem } from './components/IconList/IconListItem/IconListItem'
+export { IconListTitle } from './components/IconList/IconListTitle/IconListTitle'
+
 // Icons
 export * from './components/Icon/Icons'
 

From 0f77b10c2c08c7b334489ad4c8adb457e2006b7c Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Mon, 25 Oct 2021 14:20:43 -0400
Subject: [PATCH 04/12] feat!: Use "dot" syntax for Icons  to avoid name
 collision

---
 example/src/pages/Icons.tsx                   | 717 +++++----------
 src/components/Icon/Icon.stories.tsx          | 717 +++++----------
 src/components/Icon/Icon.test.tsx             |  10 +-
 src/components/Icon/Icons.stories.tsx         | 717 +++++----------
 src/components/Icon/Icons.ts                  | 870 +++++++++---------
 .../ModalCloseButton/ModalCloseButton.tsx     |   7 +-
 src/index.ts                                  |   2 +-
 7 files changed, 1160 insertions(+), 1880 deletions(-)

diff --git a/example/src/pages/Icons.tsx b/example/src/pages/Icons.tsx
index 124334d719..6da2c6eff6 100644
--- a/example/src/pages/Icons.tsx
+++ b/example/src/pages/Icons.tsx
@@ -1,245 +1,6 @@
 import React from 'react'
 
-import {
-  IconAccessibilityNew,
-  IconAccessibleForward,
-  IconAccountBalance,
-  IconAccountBox,
-  IconAccountCircle,
-  IconAdd,
-  IconAddCircle,
-  IconAddCircleOutline,
-  IconAlarm,
-  IconAlternateEmail,
-  IconAnnouncement,
-  IconArrowBack,
-  IconArrowDownward,
-  IconArrowDropDown,
-  IconArrowDropUp,
-  IconArrowForward,
-  IconArrowUpward,
-  IconApi,
-  IconAssessment,
-  IconAttachFile,
-  IconAttachMoney,
-  IconAutorenew,
-  IconBackpack,
-  IconBathtub,
-  IconBedding,
-  IconBookmark,
-  IconBugReport,
-  IconBuild,
-  IconCalendarToday,
-  IconCampaign,
-  IconCamping,
-  IconCancel,
-  IconChat,
-  IconCheck,
-  IconCheckBoxOutlineBlank,
-  IconCheckCircle,
-  IconCheckCircleOutline,
-  IconCheckroom,
-  IconCleanHands,
-  IconClothes,
-  IconClose,
-  IconClosedCaption,
-  IconCloud,
-  IconCode,
-  IconComment,
-  IconConnectWithoutContact,
-  IconConstruction,
-  IconConstructionWorker,
-  IconContactPage,
-  IconContentCopy,
-  IconCoronavirus,
-  IconCreditCard,
-  IconDeck,
-  IconDelete,
-  IconDeviceThermostat,
-  IconDirections,
-  IconDirectionsBike,
-  IconDirectionsBus,
-  IconDirectionsCar,
-  IconDirectionsWalk,
-  IconDoNotDisturb,
-  IconDoNotTouch,
-  IconDragHandle,
-  IconEco,
-  IconElectricalServices,
-  IconEmojiEvents,
-  IconError,
-  IconErrorOutline,
-  IconEvent,
-  IconExpandLess,
-  IconExpandMore,
-  IconFacebook,
-  IconFastForward,
-  IconFastRewind,
-  IconFavorite,
-  IconFavoriteBorder,
-  IconFileDownload,
-  IconFilePresent,
-  IconFileUpload,
-  IconFilterAlt,
-  IconFilterList,
-  IconFingerprint,
-  IconFirstPage,
-  IconFlag,
-  IconFlickr,
-  IconFlight,
-  IconFlooding,
-  IconFolder,
-  IconFolderOpen,
-  IconFormatQuote,
-  IconFormatSize,
-  IconForum,
-  IconGithub,
-  IconGridView,
-  IconGroupAdd,
-  IconGroups,
-  IconHearing,
-  IconHelp,
-  IconHelpOutline,
-  IconHighlightOff,
-  IconHistory,
-  IconHome,
-  IconHospital,
-  IconHotel,
-  IconHourglassEmpty,
-  IconHurricane,
-  IconIdentification,
-  IconImage,
-  IconInfo,
-  IconInfoOutline,
-  IconInsights,
-  IconInstagram,
-  IconKeyboard,
-  IconLabel,
-  IconLanguage,
-  IconLastPage,
-  IconLaunch,
-  IconLightbulb,
-  IconLightbulbOutline,
-  IconLink,
-  IconLinkOff,
-  IconList,
-  IconLocalCafe,
-  IconLocalFireDepartment,
-  IconLocalGasStation,
-  IconLocalGroceryStore,
-  IconLocalHospital,
-  IconLocalLaundryService,
-  IconLocalLibrary,
-  IconLocalOffer,
-  IconLocalParking,
-  IconLocalPharmacy,
-  IconLocalPolice,
-  IconLocalTaxi,
-  IconLocationCity,
-  IconLocationOn,
-  IconLock,
-  IconLockOpen,
-  IconLockOutline,
-  IconLogin,
-  IconLogout,
-  IconLoop,
-  IconMail,
-  IconMailOutline,
-  IconMap,
-  IconMasks,
-  IconMedicalServices,
-  IconMenu,
-  IconMilitaryTech,
-  IconMoreHoriz,
-  IconMoreVert,
-  IconMyLocation,
-  IconNavigateBefore,
-  IconNavigateNext,
-  IconNavigateFarBefore,
-  IconNavigateFarNext,
-  IconNearMe,
-  IconNotifications,
-  IconNotificationsActive,
-  IconNotificationsNone,
-  IconNotificationsOff,
-  IconPark,
-  IconPeople,
-  IconPerson,
-  IconPets,
-  IconPhone,
-  IconPhotoCamera,
-  IconPrint,
-  IconPriorityHigh,
-  IconPublic,
-  IconPushPin,
-  IconRadioButtonUnchecked,
-  IconRain,
-  IconReduceCapacity,
-  IconRemove,
-  IconReport,
-  IconRestaurant,
-  IconRssFeed,
-  IconSafetyDivider,
-  IconSanitizer,
-  IconSaveAlt,
-  IconSevereWeather,
-  IconSchedule,
-  IconSchool,
-  IconScience,
-  IconSearch,
-  IconSecurity,
-  IconSend,
-  IconSentimentDissatisfied,
-  IconSentimentNeutral,
-  IconSentimentSatisfied,
-  IconSentimentSatisfiedAlt,
-  IconSentimentVeryDissatisfied,
-  IconSettings,
-  IconShare,
-  IconShield,
-  IconShoppingBasket,
-  IconSnow,
-  IconSoap,
-  IconSocialDistance,
-  IconSortArrow,
-  IconSpellcheck,
-  IconStar,
-  IconStarHalf,
-  IconStarOutline,
-  IconStore,
-  IconSupport,
-  IconSupportAgent,
-  IconTextFields,
-  IconThumbDownAlt,
-  IconThumbUpAlt,
-  IconTimer,
-  IconToggleOff,
-  IconToggleOn,
-  IconTopic,
-  IconTornado,
-  IconTranslate,
-  IconTrendingDown,
-  IconTrendingUp,
-  IconTwitter,
-  IconUndo,
-  IconUnfoldLess,
-  IconUnfoldMore,
-  IconUpdate,
-  IconUploadFile,
-  IconVerified,
-  IconVerifiedUser,
-  IconVisibility,
-  IconVisibilityOff,
-  IconVolumeOff,
-  IconWarning,
-  IconWash,
-  IconWifi,
-  IconWork,
-  IconYoutube,
-  IconZoomIn,
-  IconZoomOutMap,
-  IconZoomOut,
-} from '@trussworks/react-uswds'
+import { Icon } from '@trussworks/react-uswds'
 
 const IconsPage = (): React.ReactElement => {
   const args = { size: 6 } as const
@@ -252,244 +13,244 @@ const IconsPage = (): React.ReactElement => {
       </p>
 
       <div>
-        <IconAccessibilityNew {...args} />
-        <IconAccessibleForward {...args} />
-        <IconAccountBalance {...args} />
-        <IconAccountBox {...args} />
-        <IconAccountCircle {...args} />
-        <IconAdd {...args} />
-        <IconAddCircle {...args} />
-        <IconAddCircleOutline {...args} />
-        <IconAlarm {...args} />
-        <IconAlternateEmail {...args} />
-        <IconAnnouncement {...args} />
-        <IconArrowBack {...args} />
-        <IconArrowDownward {...args} />
-        <IconArrowDropDown {...args} />
-        <IconArrowDropUp {...args} />
-        <IconArrowForward {...args} />
-        <IconArrowUpward {...args} />
-        <IconApi {...args} />
-        <IconAssessment {...args} />
-        <IconAttachFile {...args} />
-        <IconAttachMoney {...args} />
-        <IconAutorenew {...args} />
-        <IconBackpack {...args} />
-        <IconBathtub {...args} />
-        <IconBedding {...args} />
-        <IconBookmark {...args} />
-        <IconBugReport {...args} />
-        <IconBuild {...args} />
-        <IconCalendarToday {...args} />
-        <IconCampaign {...args} />
-        <IconCamping {...args} />
-        <IconCancel {...args} />
-        <IconChat {...args} />
-        <IconCheck {...args} />
-        <IconCheckBoxOutlineBlank {...args} />
-        <IconCheckCircle {...args} />
-        <IconCheckCircleOutline {...args} />
-        <IconCheckroom {...args} />
-        <IconCleanHands {...args} />
-        <IconClothes {...args} />
-        <IconClose {...args} />
-        <IconClosedCaption {...args} />
-        <IconCloud {...args} />
-        <IconCode {...args} />
-        <IconComment {...args} />
-        <IconConnectWithoutContact {...args} />
-        <IconConstruction {...args} />
-        <IconConstructionWorker {...args} />
-        <IconContactPage {...args} />
-        <IconContentCopy {...args} />
-        <IconCoronavirus {...args} />
-        <IconCreditCard {...args} />
-        <IconDeck {...args} />
-        <IconDelete {...args} />
-        <IconDeviceThermostat {...args} />
-        <IconDirections {...args} />
-        <IconDirectionsBike {...args} />
-        <IconDirectionsBus {...args} />
-        <IconDirectionsCar {...args} />
-        <IconDirectionsWalk {...args} />
-        <IconDoNotDisturb {...args} />
-        <IconDoNotTouch {...args} />
-        <IconDragHandle {...args} />
-        <IconEco {...args} />
-        <IconElectricalServices {...args} />
-        <IconEmojiEvents {...args} />
-        <IconError {...args} />
-        <IconErrorOutline {...args} />
-        <IconEvent {...args} />
-        <IconExpandLess {...args} />
-        <IconExpandMore {...args} />
-        <IconFacebook {...args} />
-        <IconFastForward {...args} />
-        <IconFastRewind {...args} />
-        <IconFavorite {...args} />
-        <IconFavoriteBorder {...args} />
-        <IconFileDownload {...args} />
-        <IconFilePresent {...args} />
-        <IconFileUpload {...args} />
-        <IconFilterAlt {...args} />
-        <IconFilterList {...args} />
-        <IconFingerprint {...args} />
-        <IconFirstPage {...args} />
-        <IconFlag {...args} />
-        <IconFlickr {...args} />
-        <IconFlight {...args} />
-        <IconFlooding {...args} />
-        <IconFolder {...args} />
-        <IconFolderOpen {...args} />
-        <IconFormatQuote {...args} />
-        <IconFormatSize {...args} />
-        <IconForum {...args} />
-        <IconGithub {...args} />
-        <IconGridView {...args} />
-        <IconGroupAdd {...args} />
-        <IconGroups {...args} />
-        <IconHearing {...args} />
-        <IconHelp {...args} />
-        <IconHelpOutline {...args} />
-        <IconHighlightOff {...args} />
-        <IconHistory {...args} />
-        <IconHome {...args} />
-        <IconHospital {...args} />
-        <IconHotel {...args} />
-        <IconHourglassEmpty {...args} />
-        <IconHurricane {...args} />
-        <IconIdentification {...args} />
-        <IconImage {...args} />
-        <IconInfo {...args} />
-        <IconInfoOutline {...args} />
-        <IconInsights {...args} />
-        <IconInstagram {...args} />
-        <IconKeyboard {...args} />
-        <IconLabel {...args} />
-        <IconLanguage {...args} />
-        <IconLastPage {...args} />
-        <IconLaunch {...args} />
-        <IconLightbulb {...args} />
-        <IconLightbulbOutline {...args} />
-        <IconLink {...args} />
-        <IconLinkOff {...args} />
-        <IconList {...args} />
-        <IconLocalCafe {...args} />
-        <IconLocalFireDepartment {...args} />
-        <IconLocalGasStation {...args} />
-        <IconLocalGroceryStore {...args} />
-        <IconLocalHospital {...args} />
-        <IconLocalLaundryService {...args} />
-        <IconLocalLibrary {...args} />
-        <IconLocalOffer {...args} />
-        <IconLocalParking {...args} />
-        <IconLocalPharmacy {...args} />
-        <IconLocalPolice {...args} />
-        <IconLocalTaxi {...args} />
-        <IconLocationCity {...args} />
-        <IconLocationOn {...args} />
-        <IconLock {...args} />
-        <IconLockOpen {...args} />
-        <IconLockOutline {...args} />
-        <IconLogin {...args} />
-        <IconLogout {...args} />
-        <IconLoop {...args} />
-        <IconMail {...args} />
-        <IconMailOutline {...args} />
-        <IconMap {...args} />
-        <IconMasks {...args} />
-        <IconMedicalServices {...args} />
-        <IconMenu {...args} />
-        <IconMilitaryTech {...args} />
-        <IconMoreHoriz {...args} />
-        <IconMoreVert {...args} />
-        <IconMyLocation {...args} />
-        <IconNavigateBefore {...args} />
-        <IconNavigateNext {...args} />
-        <IconNavigateFarBefore {...args} />
-        <IconNavigateFarNext {...args} />
-        <IconNearMe {...args} />
-        <IconNotifications {...args} />
-        <IconNotificationsActive {...args} />
-        <IconNotificationsNone {...args} />
-        <IconNotificationsOff {...args} />
-        <IconPark {...args} />
-        <IconPeople {...args} />
-        <IconPerson {...args} />
-        <IconPets {...args} />
-        <IconPhone {...args} />
-        <IconPhotoCamera {...args} />
-        <IconPrint {...args} />
-        <IconPriorityHigh {...args} />
-        <IconPublic {...args} />
-        <IconPushPin {...args} />
-        <IconRadioButtonUnchecked {...args} />
-        <IconRain {...args} />
-        <IconReduceCapacity {...args} />
-        <IconRemove {...args} />
-        <IconReport {...args} />
-        <IconRestaurant {...args} />
-        <IconRssFeed {...args} />
-        <IconSafetyDivider {...args} />
-        <IconSanitizer {...args} />
-        <IconSaveAlt {...args} />
-        <IconSevereWeather {...args} />
-        <IconSchedule {...args} />
-        <IconSchool {...args} />
-        <IconScience {...args} />
-        <IconSearch {...args} />
-        <IconSecurity {...args} />
-        <IconSend {...args} />
-        <IconSentimentDissatisfied {...args} />
-        <IconSentimentNeutral {...args} />
-        <IconSentimentSatisfied {...args} />
-        <IconSentimentSatisfiedAlt {...args} />
-        <IconSentimentVeryDissatisfied {...args} />
-        <IconSettings {...args} />
-        <IconShare {...args} />
-        <IconShield {...args} />
-        <IconShoppingBasket {...args} />
-        <IconSnow {...args} />
-        <IconSoap {...args} />
-        <IconSocialDistance {...args} />
-        <IconSortArrow {...args} />
-        <IconSpellcheck {...args} />
-        <IconStar {...args} />
-        <IconStarHalf {...args} />
-        <IconStarOutline {...args} />
-        <IconStore {...args} />
-        <IconSupport {...args} />
-        <IconSupportAgent {...args} />
-        <IconTextFields {...args} />
-        <IconThumbDownAlt {...args} />
-        <IconThumbUpAlt {...args} />
-        <IconTimer {...args} />
-        <IconToggleOff {...args} />
-        <IconToggleOn {...args} />
-        <IconTopic {...args} />
-        <IconTornado {...args} />
-        <IconTranslate {...args} />
-        <IconTrendingDown {...args} />
-        <IconTrendingUp {...args} />
-        <IconTwitter {...args} />
-        <IconUndo {...args} />
-        <IconUnfoldLess {...args} />
-        <IconUnfoldMore {...args} />
-        <IconUpdate {...args} />
-        <IconUploadFile {...args} />
-        <IconVerified {...args} />
-        <IconVerifiedUser {...args} />
-        <IconVisibility {...args} />
-        <IconVisibilityOff {...args} />
-        <IconVolumeOff {...args} />
-        <IconWarning {...args} />
-        <IconWash {...args} />
-        <IconWifi {...args} />
-        <IconWork {...args} />
-        <IconYoutube {...args} />
-        <IconZoomIn {...args} />
-        <IconZoomOutMap {...args} />
-        <IconZoomOut {...args} />
+        <Icon.AccessibilityNew {...args} />
+        <Icon.AccessibleForward {...args} />
+        <Icon.AccountBalance {...args} />
+        <Icon.AccountBox {...args} />
+        <Icon.AccountCircle {...args} />
+        <Icon.Add {...args} />
+        <Icon.AddCircle {...args} />
+        <Icon.AddCircleOutline {...args} />
+        <Icon.Alarm {...args} />
+        <Icon.AlternateEmail {...args} />
+        <Icon.Announcement {...args} />
+        <Icon.ArrowBack {...args} />
+        <Icon.ArrowDownward {...args} />
+        <Icon.ArrowDropDown {...args} />
+        <Icon.ArrowDropUp {...args} />
+        <Icon.ArrowForward {...args} />
+        <Icon.ArrowUpward {...args} />
+        <Icon.Api {...args} />
+        <Icon.Assessment {...args} />
+        <Icon.AttachFile {...args} />
+        <Icon.AttachMoney {...args} />
+        <Icon.Autorenew {...args} />
+        <Icon.Backpack {...args} />
+        <Icon.Bathtub {...args} />
+        <Icon.Bedding {...args} />
+        <Icon.Bookmark {...args} />
+        <Icon.BugReport {...args} />
+        <Icon.Build {...args} />
+        <Icon.CalendarToday {...args} />
+        <Icon.Campaign {...args} />
+        <Icon.Camping {...args} />
+        <Icon.Cancel {...args} />
+        <Icon.Chat {...args} />
+        <Icon.Check {...args} />
+        <Icon.CheckBoxOutlineBlank {...args} />
+        <Icon.CheckCircle {...args} />
+        <Icon.CheckCircleOutline {...args} />
+        <Icon.Checkroom {...args} />
+        <Icon.CleanHands {...args} />
+        <Icon.Clothes {...args} />
+        <Icon.Close {...args} />
+        <Icon.ClosedCaption {...args} />
+        <Icon.Cloud {...args} />
+        <Icon.Code {...args} />
+        <Icon.Comment {...args} />
+        <Icon.ConnectWithoutContact {...args} />
+        <Icon.Construction {...args} />
+        <Icon.ConstructionWorker {...args} />
+        <Icon.ContactPage {...args} />
+        <Icon.ContentCopy {...args} />
+        <Icon.Coronavirus {...args} />
+        <Icon.CreditCard {...args} />
+        <Icon.Deck {...args} />
+        <Icon.Delete {...args} />
+        <Icon.DeviceThermostat {...args} />
+        <Icon.Directions {...args} />
+        <Icon.DirectionsBike {...args} />
+        <Icon.DirectionsBus {...args} />
+        <Icon.DirectionsCar {...args} />
+        <Icon.DirectionsWalk {...args} />
+        <Icon.DoNotDisturb {...args} />
+        <Icon.DoNotTouch {...args} />
+        <Icon.DragHandle {...args} />
+        <Icon.Eco {...args} />
+        <Icon.ElectricalServices {...args} />
+        <Icon.EmojiEvents {...args} />
+        <Icon.Error {...args} />
+        <Icon.ErrorOutline {...args} />
+        <Icon.Event {...args} />
+        <Icon.ExpandLess {...args} />
+        <Icon.ExpandMore {...args} />
+        <Icon.Facebook {...args} />
+        <Icon.FastForward {...args} />
+        <Icon.FastRewind {...args} />
+        <Icon.Favorite {...args} />
+        <Icon.FavoriteBorder {...args} />
+        <Icon.FileDownload {...args} />
+        <Icon.FilePresent {...args} />
+        <Icon.FileUpload {...args} />
+        <Icon.FilterAlt {...args} />
+        <Icon.FilterList {...args} />
+        <Icon.Fingerprint {...args} />
+        <Icon.FirstPage {...args} />
+        <Icon.Flag {...args} />
+        <Icon.Flickr {...args} />
+        <Icon.Flight {...args} />
+        <Icon.Flooding {...args} />
+        <Icon.Folder {...args} />
+        <Icon.FolderOpen {...args} />
+        <Icon.FormatQuote {...args} />
+        <Icon.FormatSize {...args} />
+        <Icon.Forum {...args} />
+        <Icon.Github {...args} />
+        <Icon.GridView {...args} />
+        <Icon.GroupAdd {...args} />
+        <Icon.Groups {...args} />
+        <Icon.Hearing {...args} />
+        <Icon.Help {...args} />
+        <Icon.HelpOutline {...args} />
+        <Icon.HighlightOff {...args} />
+        <Icon.History {...args} />
+        <Icon.Home {...args} />
+        <Icon.Hospital {...args} />
+        <Icon.Hotel {...args} />
+        <Icon.HourglassEmpty {...args} />
+        <Icon.Hurricane {...args} />
+        <Icon.Identification {...args} />
+        <Icon.Image {...args} />
+        <Icon.Info {...args} />
+        <Icon.InfoOutline {...args} />
+        <Icon.Insights {...args} />
+        <Icon.Instagram {...args} />
+        <Icon.Keyboard {...args} />
+        <Icon.Label {...args} />
+        <Icon.Language {...args} />
+        <Icon.LastPage {...args} />
+        <Icon.Launch {...args} />
+        <Icon.Lightbulb {...args} />
+        <Icon.LightbulbOutline {...args} />
+        <Icon.Link {...args} />
+        <Icon.LinkOff {...args} />
+        <Icon.List {...args} />
+        <Icon.LocalCafe {...args} />
+        <Icon.LocalFireDepartment {...args} />
+        <Icon.LocalGasStation {...args} />
+        <Icon.LocalGroceryStore {...args} />
+        <Icon.LocalHospital {...args} />
+        <Icon.LocalLaundryService {...args} />
+        <Icon.LocalLibrary {...args} />
+        <Icon.LocalOffer {...args} />
+        <Icon.LocalParking {...args} />
+        <Icon.LocalPharmacy {...args} />
+        <Icon.LocalPolice {...args} />
+        <Icon.LocalTaxi {...args} />
+        <Icon.LocationCity {...args} />
+        <Icon.LocationOn {...args} />
+        <Icon.Lock {...args} />
+        <Icon.LockOpen {...args} />
+        <Icon.LockOutline {...args} />
+        <Icon.Login {...args} />
+        <Icon.Logout {...args} />
+        <Icon.Loop {...args} />
+        <Icon.Mail {...args} />
+        <Icon.MailOutline {...args} />
+        <Icon.Map {...args} />
+        <Icon.Masks {...args} />
+        <Icon.MedicalServices {...args} />
+        <Icon.Menu {...args} />
+        <Icon.MilitaryTech {...args} />
+        <Icon.MoreHoriz {...args} />
+        <Icon.MoreVert {...args} />
+        <Icon.MyLocation {...args} />
+        <Icon.NavigateBefore {...args} />
+        <Icon.NavigateNext {...args} />
+        <Icon.NavigateFarBefore {...args} />
+        <Icon.NavigateFarNext {...args} />
+        <Icon.NearMe {...args} />
+        <Icon.Notifications {...args} />
+        <Icon.NotificationsActive {...args} />
+        <Icon.NotificationsNone {...args} />
+        <Icon.NotificationsOff {...args} />
+        <Icon.Park {...args} />
+        <Icon.People {...args} />
+        <Icon.Person {...args} />
+        <Icon.Pets {...args} />
+        <Icon.Phone {...args} />
+        <Icon.PhotoCamera {...args} />
+        <Icon.Print {...args} />
+        <Icon.PriorityHigh {...args} />
+        <Icon.Public {...args} />
+        <Icon.PushPin {...args} />
+        <Icon.RadioButtonUnchecked {...args} />
+        <Icon.Rain {...args} />
+        <Icon.ReduceCapacity {...args} />
+        <Icon.Remove {...args} />
+        <Icon.Report {...args} />
+        <Icon.Restaurant {...args} />
+        <Icon.RssFeed {...args} />
+        <Icon.SafetyDivider {...args} />
+        <Icon.Sanitizer {...args} />
+        <Icon.SaveAlt {...args} />
+        <Icon.SevereWeather {...args} />
+        <Icon.Schedule {...args} />
+        <Icon.School {...args} />
+        <Icon.Science {...args} />
+        <Icon.Search {...args} />
+        <Icon.Security {...args} />
+        <Icon.Send {...args} />
+        <Icon.SentimentDissatisfied {...args} />
+        <Icon.SentimentNeutral {...args} />
+        <Icon.SentimentSatisfied {...args} />
+        <Icon.SentimentSatisfiedAlt {...args} />
+        <Icon.SentimentVeryDissatisfied {...args} />
+        <Icon.Settings {...args} />
+        <Icon.Share {...args} />
+        <Icon.Shield {...args} />
+        <Icon.ShoppingBasket {...args} />
+        <Icon.Snow {...args} />
+        <Icon.Soap {...args} />
+        <Icon.SocialDistance {...args} />
+        <Icon.SortArrow {...args} />
+        <Icon.Spellcheck {...args} />
+        <Icon.Star {...args} />
+        <Icon.StarHalf {...args} />
+        <Icon.StarOutline {...args} />
+        <Icon.Store {...args} />
+        <Icon.Support {...args} />
+        <Icon.SupportAgent {...args} />
+        <Icon.TextFields {...args} />
+        <Icon.ThumbDownAlt {...args} />
+        <Icon.ThumbUpAlt {...args} />
+        <Icon.Timer {...args} />
+        <Icon.ToggleOff {...args} />
+        <Icon.ToggleOn {...args} />
+        <Icon.Topic {...args} />
+        <Icon.Tornado {...args} />
+        <Icon.Translate {...args} />
+        <Icon.TrendingDown {...args} />
+        <Icon.TrendingUp {...args} />
+        <Icon.Twitter {...args} />
+        <Icon.Undo {...args} />
+        <Icon.UnfoldLess {...args} />
+        <Icon.UnfoldMore {...args} />
+        <Icon.Update {...args} />
+        <Icon.UploadFile {...args} />
+        <Icon.Verified {...args} />
+        <Icon.VerifiedUser {...args} />
+        <Icon.Visibility {...args} />
+        <Icon.VisibilityOff {...args} />
+        <Icon.VolumeOff {...args} />
+        <Icon.Warning {...args} />
+        <Icon.Wash {...args} />
+        <Icon.Wifi {...args} />
+        <Icon.Work {...args} />
+        <Icon.Youtube {...args} />
+        <Icon.ZoomIn {...args} />
+        <Icon.ZoomOutMap {...args} />
+        <Icon.ZoomOut {...args} />
       </div>
     </section>
   )
diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx
index 8f13363c1a..a643ed662f 100644
--- a/src/components/Icon/Icon.stories.tsx
+++ b/src/components/Icon/Icon.stories.tsx
@@ -1,245 +1,6 @@
 import React from 'react'
 
-import {
-  IconAccessibilityNew,
-  IconAccessibleForward,
-  IconAccountBalance,
-  IconAccountBox,
-  IconAccountCircle,
-  IconAdd,
-  IconAddCircle,
-  IconAddCircleOutline,
-  IconAlarm,
-  IconAlternateEmail,
-  IconAnnouncement,
-  IconArrowBack,
-  IconArrowDownward,
-  IconArrowDropDown,
-  IconArrowDropUp,
-  IconArrowForward,
-  IconArrowUpward,
-  IconApi,
-  IconAssessment,
-  IconAttachFile,
-  IconAttachMoney,
-  IconAutorenew,
-  IconBackpack,
-  IconBathtub,
-  IconBedding,
-  IconBookmark,
-  IconBugReport,
-  IconBuild,
-  IconCalendarToday,
-  IconCampaign,
-  IconCamping,
-  IconCancel,
-  IconChat,
-  IconCheck,
-  IconCheckBoxOutlineBlank,
-  IconCheckCircle,
-  IconCheckCircleOutline,
-  IconCheckroom,
-  IconCleanHands,
-  IconClothes,
-  IconClose,
-  IconClosedCaption,
-  IconCloud,
-  IconCode,
-  IconComment,
-  IconConnectWithoutContact,
-  IconConstruction,
-  IconConstructionWorker,
-  IconContactPage,
-  IconContentCopy,
-  IconCoronavirus,
-  IconCreditCard,
-  IconDeck,
-  IconDelete,
-  IconDeviceThermostat,
-  IconDirections,
-  IconDirectionsBike,
-  IconDirectionsBus,
-  IconDirectionsCar,
-  IconDirectionsWalk,
-  IconDoNotDisturb,
-  IconDoNotTouch,
-  IconDragHandle,
-  IconEco,
-  IconElectricalServices,
-  IconEmojiEvents,
-  IconError,
-  IconErrorOutline,
-  IconEvent,
-  IconExpandLess,
-  IconExpandMore,
-  IconFacebook,
-  IconFastForward,
-  IconFastRewind,
-  IconFavorite,
-  IconFavoriteBorder,
-  IconFileDownload,
-  IconFilePresent,
-  IconFileUpload,
-  IconFilterAlt,
-  IconFilterList,
-  IconFingerprint,
-  IconFirstPage,
-  IconFlag,
-  IconFlickr,
-  IconFlight,
-  IconFlooding,
-  IconFolder,
-  IconFolderOpen,
-  IconFormatQuote,
-  IconFormatSize,
-  IconForum,
-  IconGithub,
-  IconGridView,
-  IconGroupAdd,
-  IconGroups,
-  IconHearing,
-  IconHelp,
-  IconHelpOutline,
-  IconHighlightOff,
-  IconHistory,
-  IconHome,
-  IconHospital,
-  IconHotel,
-  IconHourglassEmpty,
-  IconHurricane,
-  IconIdentification,
-  IconImage,
-  IconInfo,
-  IconInfoOutline,
-  IconInsights,
-  IconInstagram,
-  IconKeyboard,
-  IconLabel,
-  IconLanguage,
-  IconLastPage,
-  IconLaunch,
-  IconLightbulb,
-  IconLightbulbOutline,
-  IconLink,
-  IconLinkOff,
-  IconList,
-  IconLocalCafe,
-  IconLocalFireDepartment,
-  IconLocalGasStation,
-  IconLocalGroceryStore,
-  IconLocalHospital,
-  IconLocalLaundryService,
-  IconLocalLibrary,
-  IconLocalOffer,
-  IconLocalParking,
-  IconLocalPharmacy,
-  IconLocalPolice,
-  IconLocalTaxi,
-  IconLocationCity,
-  IconLocationOn,
-  IconLock,
-  IconLockOpen,
-  IconLockOutline,
-  IconLogin,
-  IconLogout,
-  IconLoop,
-  IconMail,
-  IconMailOutline,
-  IconMap,
-  IconMasks,
-  IconMedicalServices,
-  IconMenu,
-  IconMilitaryTech,
-  IconMoreHoriz,
-  IconMoreVert,
-  IconMyLocation,
-  IconNavigateBefore,
-  IconNavigateNext,
-  IconNavigateFarBefore,
-  IconNavigateFarNext,
-  IconNearMe,
-  IconNotifications,
-  IconNotificationsActive,
-  IconNotificationsNone,
-  IconNotificationsOff,
-  IconPark,
-  IconPeople,
-  IconPerson,
-  IconPets,
-  IconPhone,
-  IconPhotoCamera,
-  IconPrint,
-  IconPriorityHigh,
-  IconPublic,
-  IconPushPin,
-  IconRadioButtonUnchecked,
-  IconRain,
-  IconReduceCapacity,
-  IconRemove,
-  IconReport,
-  IconRestaurant,
-  IconRssFeed,
-  IconSafetyDivider,
-  IconSanitizer,
-  IconSaveAlt,
-  IconSevereWeather,
-  IconSchedule,
-  IconSchool,
-  IconScience,
-  IconSearch,
-  IconSecurity,
-  IconSend,
-  IconSentimentDissatisfied,
-  IconSentimentNeutral,
-  IconSentimentSatisfied,
-  IconSentimentSatisfiedAlt,
-  IconSentimentVeryDissatisfied,
-  IconSettings,
-  IconShare,
-  IconShield,
-  IconShoppingBasket,
-  IconSnow,
-  IconSoap,
-  IconSocialDistance,
-  IconSortArrow,
-  IconSpellcheck,
-  IconStar,
-  IconStarHalf,
-  IconStarOutline,
-  IconStore,
-  IconSupport,
-  IconSupportAgent,
-  IconTextFields,
-  IconThumbDownAlt,
-  IconThumbUpAlt,
-  IconTimer,
-  IconToggleOff,
-  IconToggleOn,
-  IconTopic,
-  IconTornado,
-  IconTranslate,
-  IconTrendingDown,
-  IconTrendingUp,
-  IconTwitter,
-  IconUndo,
-  IconUnfoldLess,
-  IconUnfoldMore,
-  IconUpdate,
-  IconUploadFile,
-  IconVerified,
-  IconVerifiedUser,
-  IconVisibility,
-  IconVisibilityOff,
-  IconVolumeOff,
-  IconWarning,
-  IconWash,
-  IconWifi,
-  IconWork,
-  IconYoutube,
-  IconZoomIn,
-  IconZoomOutMap,
-  IconZoomOut,
-} from './Icons'
+import { Icon } from './Icons'
 
 type StorybookArgs = {
   size: 3 | 4 | 5 | 6 | 7 | 8 | 9
@@ -270,944 +31,944 @@ Source: https://designsystem.digital.gov/components/icon/
 }
 
 export const accessibilityNew = (args: StorybookArgs): React.ReactElement => (
-  <IconAccessibilityNew {...args} />
+  <Icon.AccessibilityNew {...args} />
 )
 
 export const accessibleForward = (args: StorybookArgs): React.ReactElement => (
-  <IconAccessibleForward {...args} />
+  <Icon.AccessibleForward {...args} />
 )
 
 export const accountBalance = (args: StorybookArgs): React.ReactElement => (
-  <IconAccountBalance {...args} />
+  <Icon.AccountBalance {...args} />
 )
 
 export const accountBox = (args: StorybookArgs): React.ReactElement => (
-  <IconAccountBox {...args} />
+  <Icon.AccountBox {...args} />
 )
 
 export const accountCircle = (args: StorybookArgs): React.ReactElement => (
-  <IconAccountCircle {...args} />
+  <Icon.AccountCircle {...args} />
 )
 
 export const add = (args: StorybookArgs): React.ReactElement => (
-  <IconAdd {...args} />
+  <Icon.Add {...args} />
 )
 
 export const addCircle = (args: StorybookArgs): React.ReactElement => (
-  <IconAddCircle {...args} />
+  <Icon.AddCircle {...args} />
 )
 
 export const addCircleOutline = (args: StorybookArgs): React.ReactElement => (
-  <IconAddCircleOutline {...args} />
+  <Icon.AddCircleOutline {...args} />
 )
 
 export const alarm = (args: StorybookArgs): React.ReactElement => (
-  <IconAlarm {...args} />
+  <Icon.Alarm {...args} />
 )
 
 export const alternateEmail = (args: StorybookArgs): React.ReactElement => (
-  <IconAlternateEmail {...args} />
+  <Icon.AlternateEmail {...args} />
 )
 
 export const announcement = (args: StorybookArgs): React.ReactElement => (
-  <IconAnnouncement {...args} />
+  <Icon.Announcement {...args} />
 )
 
 export const arrowBack = (args: StorybookArgs): React.ReactElement => (
-  <IconArrowBack {...args} />
+  <Icon.ArrowBack {...args} />
 )
 
 export const arrowDownward = (args: StorybookArgs): React.ReactElement => (
-  <IconArrowDownward {...args} />
+  <Icon.ArrowDownward {...args} />
 )
 
 export const arrowDropDown = (args: StorybookArgs): React.ReactElement => (
-  <IconArrowDropDown {...args} />
+  <Icon.ArrowDropDown {...args} />
 )
 
 export const arrowDropUp = (args: StorybookArgs): React.ReactElement => (
-  <IconArrowDropUp {...args} />
+  <Icon.ArrowDropUp {...args} />
 )
 
 export const arrowForward = (args: StorybookArgs): React.ReactElement => (
-  <IconArrowForward {...args} />
+  <Icon.ArrowForward {...args} />
 )
 
 export const arrowUpward = (args: StorybookArgs): React.ReactElement => (
-  <IconArrowUpward {...args} />
+  <Icon.ArrowUpward {...args} />
 )
 
 export const api = (args: StorybookArgs): React.ReactElement => (
-  <IconApi {...args} />
+  <Icon.Api {...args} />
 )
 
 export const assessment = (args: StorybookArgs): React.ReactElement => (
-  <IconAssessment {...args} />
+  <Icon.Assessment {...args} />
 )
 
 export const attachFile = (args: StorybookArgs): React.ReactElement => (
-  <IconAttachFile {...args} />
+  <Icon.AttachFile {...args} />
 )
 
 export const attachMoney = (args: StorybookArgs): React.ReactElement => (
-  <IconAttachMoney {...args} />
+  <Icon.AttachMoney {...args} />
 )
 
 export const autorenew = (args: StorybookArgs): React.ReactElement => (
-  <IconAutorenew {...args} />
+  <Icon.Autorenew {...args} />
 )
 
 export const backpack = (args: StorybookArgs): React.ReactElement => (
-  <IconBackpack {...args} />
+  <Icon.Backpack {...args} />
 )
 
 export const bathtub = (args: StorybookArgs): React.ReactElement => (
-  <IconBathtub {...args} />
+  <Icon.Bathtub {...args} />
 )
 
 export const bedding = (args: StorybookArgs): React.ReactElement => (
-  <IconBedding {...args} />
+  <Icon.Bedding {...args} />
 )
 
 export const bookmark = (args: StorybookArgs): React.ReactElement => (
-  <IconBookmark {...args} />
+  <Icon.Bookmark {...args} />
 )
 
 export const bugReport = (args: StorybookArgs): React.ReactElement => (
-  <IconBugReport {...args} />
+  <Icon.BugReport {...args} />
 )
 
 export const build = (args: StorybookArgs): React.ReactElement => (
-  <IconBuild {...args} />
+  <Icon.Build {...args} />
 )
 
 export const calendarToday = (args: StorybookArgs): React.ReactElement => (
-  <IconCalendarToday {...args} />
+  <Icon.CalendarToday {...args} />
 )
 
 export const campaign = (args: StorybookArgs): React.ReactElement => (
-  <IconCampaign {...args} />
+  <Icon.Campaign {...args} />
 )
 
 export const camping = (args: StorybookArgs): React.ReactElement => (
-  <IconCamping {...args} />
+  <Icon.Camping {...args} />
 )
 
 export const cancel = (args: StorybookArgs): React.ReactElement => (
-  <IconCancel {...args} />
+  <Icon.Cancel {...args} />
 )
 
 export const chat = (args: StorybookArgs): React.ReactElement => (
-  <IconChat {...args} />
+  <Icon.Chat {...args} />
 )
 
 export const check = (args: StorybookArgs): React.ReactElement => (
-  <IconCheck {...args} />
+  <Icon.Check {...args} />
 )
 
 export const checkBoxOutlineBlank = (
   args: StorybookArgs
-): React.ReactElement => <IconCheckBoxOutlineBlank {...args} />
+): React.ReactElement => <Icon.CheckBoxOutlineBlank {...args} />
 export const checkCircle = (args: StorybookArgs): React.ReactElement => (
-  <IconCheckCircle {...args} />
+  <Icon.CheckCircle {...args} />
 )
 
 export const checkCircleOutline = (args: StorybookArgs): React.ReactElement => (
-  <IconCheckCircleOutline {...args} />
+  <Icon.CheckCircleOutline {...args} />
 )
 
 export const checkroom = (args: StorybookArgs): React.ReactElement => (
-  <IconCheckroom {...args} />
+  <Icon.Checkroom {...args} />
 )
 
 export const cleanHands = (args: StorybookArgs): React.ReactElement => (
-  <IconCleanHands {...args} />
+  <Icon.CleanHands {...args} />
 )
 
 export const clothes = (args: StorybookArgs): React.ReactElement => (
-  <IconClothes {...args} />
+  <Icon.Clothes {...args} />
 )
 
 export const close = (args: StorybookArgs): React.ReactElement => (
-  <IconClose {...args} />
+  <Icon.Close {...args} />
 )
 
 export const closedCaption = (args: StorybookArgs): React.ReactElement => (
-  <IconClosedCaption {...args} />
+  <Icon.ClosedCaption {...args} />
 )
 
 export const cloud = (args: StorybookArgs): React.ReactElement => (
-  <IconCloud {...args} />
+  <Icon.Cloud {...args} />
 )
 
 export const code = (args: StorybookArgs): React.ReactElement => (
-  <IconCode {...args} />
+  <Icon.Code {...args} />
 )
 
 export const comment = (args: StorybookArgs): React.ReactElement => (
-  <IconComment {...args} />
+  <Icon.Comment {...args} />
 )
 
 export const connectWithoutContact = (
   args: StorybookArgs
-): React.ReactElement => <IconConnectWithoutContact {...args} />
+): React.ReactElement => <Icon.ConnectWithoutContact {...args} />
 export const construction = (args: StorybookArgs): React.ReactElement => (
-  <IconConstruction {...args} />
+  <Icon.Construction {...args} />
 )
 
 export const constructionWorker = (args: StorybookArgs): React.ReactElement => (
-  <IconConstructionWorker {...args} />
+  <Icon.ConstructionWorker {...args} />
 )
 
 export const contactPage = (args: StorybookArgs): React.ReactElement => (
-  <IconContactPage {...args} />
+  <Icon.ContactPage {...args} />
 )
 
 export const contentCopy = (args: StorybookArgs): React.ReactElement => (
-  <IconContentCopy {...args} />
+  <Icon.ContentCopy {...args} />
 )
 
 export const coronavirus = (args: StorybookArgs): React.ReactElement => (
-  <IconCoronavirus {...args} />
+  <Icon.Coronavirus {...args} />
 )
 
 export const creditCard = (args: StorybookArgs): React.ReactElement => (
-  <IconCreditCard {...args} />
+  <Icon.CreditCard {...args} />
 )
 
 export const deck = (args: StorybookArgs): React.ReactElement => (
-  <IconDeck {...args} />
+  <Icon.Deck {...args} />
 )
 
 export const deleteIcon = (args: StorybookArgs): React.ReactElement => (
-  <IconDelete {...args} />
+  <Icon.Delete {...args} />
 )
 
 export const deviceThermostat = (args: StorybookArgs): React.ReactElement => (
-  <IconDeviceThermostat {...args} />
+  <Icon.DeviceThermostat {...args} />
 )
 
 export const directions = (args: StorybookArgs): React.ReactElement => (
-  <IconDirections {...args} />
+  <Icon.Directions {...args} />
 )
 
 export const directionsBike = (args: StorybookArgs): React.ReactElement => (
-  <IconDirectionsBike {...args} />
+  <Icon.DirectionsBike {...args} />
 )
 
 export const directionsBus = (args: StorybookArgs): React.ReactElement => (
-  <IconDirectionsBus {...args} />
+  <Icon.DirectionsBus {...args} />
 )
 
 export const directionsCar = (args: StorybookArgs): React.ReactElement => (
-  <IconDirectionsCar {...args} />
+  <Icon.DirectionsCar {...args} />
 )
 
 export const directionsWalk = (args: StorybookArgs): React.ReactElement => (
-  <IconDirectionsWalk {...args} />
+  <Icon.DirectionsWalk {...args} />
 )
 
 export const doNotDisturb = (args: StorybookArgs): React.ReactElement => (
-  <IconDoNotDisturb {...args} />
+  <Icon.DoNotDisturb {...args} />
 )
 
 export const doNotTouch = (args: StorybookArgs): React.ReactElement => (
-  <IconDoNotTouch {...args} />
+  <Icon.DoNotTouch {...args} />
 )
 
 export const dragHandle = (args: StorybookArgs): React.ReactElement => (
-  <IconDragHandle {...args} />
+  <Icon.DragHandle {...args} />
 )
 
 export const eco = (args: StorybookArgs): React.ReactElement => (
-  <IconEco {...args} />
+  <Icon.Eco {...args} />
 )
 
 export const electricalServices = (args: StorybookArgs): React.ReactElement => (
-  <IconElectricalServices {...args} />
+  <Icon.ElectricalServices {...args} />
 )
 
 export const emojiEvents = (args: StorybookArgs): React.ReactElement => (
-  <IconEmojiEvents {...args} />
+  <Icon.EmojiEvents {...args} />
 )
 
 export const error = (args: StorybookArgs): React.ReactElement => (
-  <IconError {...args} />
+  <Icon.Error {...args} />
 )
 
 export const errorOutline = (args: StorybookArgs): React.ReactElement => (
-  <IconErrorOutline {...args} />
+  <Icon.ErrorOutline {...args} />
 )
 
 export const event = (args: StorybookArgs): React.ReactElement => (
-  <IconEvent {...args} />
+  <Icon.Event {...args} />
 )
 
 export const expandLess = (args: StorybookArgs): React.ReactElement => (
-  <IconExpandLess {...args} />
+  <Icon.ExpandLess {...args} />
 )
 
 export const expandMore = (args: StorybookArgs): React.ReactElement => (
-  <IconExpandMore {...args} />
+  <Icon.ExpandMore {...args} />
 )
 
 export const facebook = (args: StorybookArgs): React.ReactElement => (
-  <IconFacebook {...args} />
+  <Icon.Facebook {...args} />
 )
 
 export const fastForward = (args: StorybookArgs): React.ReactElement => (
-  <IconFastForward {...args} />
+  <Icon.FastForward {...args} />
 )
 
 export const fastRewind = (args: StorybookArgs): React.ReactElement => (
-  <IconFastRewind {...args} />
+  <Icon.FastRewind {...args} />
 )
 
 export const favorite = (args: StorybookArgs): React.ReactElement => (
-  <IconFavorite {...args} />
+  <Icon.Favorite {...args} />
 )
 
 export const favoriteBorder = (args: StorybookArgs): React.ReactElement => (
-  <IconFavoriteBorder {...args} />
+  <Icon.FavoriteBorder {...args} />
 )
 
 export const fileDownload = (args: StorybookArgs): React.ReactElement => (
-  <IconFileDownload {...args} />
+  <Icon.FileDownload {...args} />
 )
 
 export const filePresent = (args: StorybookArgs): React.ReactElement => (
-  <IconFilePresent {...args} />
+  <Icon.FilePresent {...args} />
 )
 
 export const fileUpload = (args: StorybookArgs): React.ReactElement => (
-  <IconFileUpload {...args} />
+  <Icon.FileUpload {...args} />
 )
 
 export const filterAlt = (args: StorybookArgs): React.ReactElement => (
-  <IconFilterAlt {...args} />
+  <Icon.FilterAlt {...args} />
 )
 
 export const filterList = (args: StorybookArgs): React.ReactElement => (
-  <IconFilterList {...args} />
+  <Icon.FilterList {...args} />
 )
 
 export const fingerprint = (args: StorybookArgs): React.ReactElement => (
-  <IconFingerprint {...args} />
+  <Icon.Fingerprint {...args} />
 )
 
 export const firstPage = (args: StorybookArgs): React.ReactElement => (
-  <IconFirstPage {...args} />
+  <Icon.FirstPage {...args} />
 )
 
 export const flag = (args: StorybookArgs): React.ReactElement => (
-  <IconFlag {...args} />
+  <Icon.Flag {...args} />
 )
 
 export const flickr = (args: StorybookArgs): React.ReactElement => (
-  <IconFlickr {...args} />
+  <Icon.Flickr {...args} />
 )
 
 export const flight = (args: StorybookArgs): React.ReactElement => (
-  <IconFlight {...args} />
+  <Icon.Flight {...args} />
 )
 
 export const flooding = (args: StorybookArgs): React.ReactElement => (
-  <IconFlooding {...args} />
+  <Icon.Flooding {...args} />
 )
 
 export const folder = (args: StorybookArgs): React.ReactElement => (
-  <IconFolder {...args} />
+  <Icon.Folder {...args} />
 )
 
 export const folderOpen = (args: StorybookArgs): React.ReactElement => (
-  <IconFolderOpen {...args} />
+  <Icon.FolderOpen {...args} />
 )
 
 export const formatQuote = (args: StorybookArgs): React.ReactElement => (
-  <IconFormatQuote {...args} />
+  <Icon.FormatQuote {...args} />
 )
 
 export const formatSize = (args: StorybookArgs): React.ReactElement => (
-  <IconFormatSize {...args} />
+  <Icon.FormatSize {...args} />
 )
 
 export const forum = (args: StorybookArgs): React.ReactElement => (
-  <IconForum {...args} />
+  <Icon.Forum {...args} />
 )
 
 export const github = (args: StorybookArgs): React.ReactElement => (
-  <IconGithub {...args} />
+  <Icon.Github {...args} />
 )
 
 export const gridView = (args: StorybookArgs): React.ReactElement => (
-  <IconGridView {...args} />
+  <Icon.GridView {...args} />
 )
 
 export const groupAdd = (args: StorybookArgs): React.ReactElement => (
-  <IconGroupAdd {...args} />
+  <Icon.GroupAdd {...args} />
 )
 
 export const groups = (args: StorybookArgs): React.ReactElement => (
-  <IconGroups {...args} />
+  <Icon.Groups {...args} />
 )
 
 export const hearing = (args: StorybookArgs): React.ReactElement => (
-  <IconHearing {...args} />
+  <Icon.Hearing {...args} />
 )
 
 export const help = (args: StorybookArgs): React.ReactElement => (
-  <IconHelp {...args} />
+  <Icon.Help {...args} />
 )
 
 export const helpOutline = (args: StorybookArgs): React.ReactElement => (
-  <IconHelpOutline {...args} />
+  <Icon.HelpOutline {...args} />
 )
 
 export const highlightOff = (args: StorybookArgs): React.ReactElement => (
-  <IconHighlightOff {...args} />
+  <Icon.HighlightOff {...args} />
 )
 
 export const history = (args: StorybookArgs): React.ReactElement => (
-  <IconHistory {...args} />
+  <Icon.History {...args} />
 )
 
 export const home = (args: StorybookArgs): React.ReactElement => (
-  <IconHome {...args} />
+  <Icon.Home {...args} />
 )
 
 export const hospital = (args: StorybookArgs): React.ReactElement => (
-  <IconHospital {...args} />
+  <Icon.Hospital {...args} />
 )
 
 export const hotel = (args: StorybookArgs): React.ReactElement => (
-  <IconHotel {...args} />
+  <Icon.Hotel {...args} />
 )
 
 export const hourglassEmpty = (args: StorybookArgs): React.ReactElement => (
-  <IconHourglassEmpty {...args} />
+  <Icon.HourglassEmpty {...args} />
 )
 
 export const hurricane = (args: StorybookArgs): React.ReactElement => (
-  <IconHurricane {...args} />
+  <Icon.Hurricane {...args} />
 )
 
 export const identification = (args: StorybookArgs): React.ReactElement => (
-  <IconIdentification {...args} />
+  <Icon.Identification {...args} />
 )
 
 export const image = (args: StorybookArgs): React.ReactElement => (
-  <IconImage {...args} />
+  <Icon.Image {...args} />
 )
 
 export const info = (args: StorybookArgs): React.ReactElement => (
-  <IconInfo {...args} />
+  <Icon.Info {...args} />
 )
 
 export const infoOutline = (args: StorybookArgs): React.ReactElement => (
-  <IconInfoOutline {...args} />
+  <Icon.InfoOutline {...args} />
 )
 
 export const insights = (args: StorybookArgs): React.ReactElement => (
-  <IconInsights {...args} />
+  <Icon.Insights {...args} />
 )
 
 export const instagram = (args: StorybookArgs): React.ReactElement => (
-  <IconInstagram {...args} />
+  <Icon.Instagram {...args} />
 )
 
 export const keyboard = (args: StorybookArgs): React.ReactElement => (
-  <IconKeyboard {...args} />
+  <Icon.Keyboard {...args} />
 )
 
 export const label = (args: StorybookArgs): React.ReactElement => (
-  <IconLabel {...args} />
+  <Icon.Label {...args} />
 )
 
 export const language = (args: StorybookArgs): React.ReactElement => (
-  <IconLanguage {...args} />
+  <Icon.Language {...args} />
 )
 
 export const lastPage = (args: StorybookArgs): React.ReactElement => (
-  <IconLastPage {...args} />
+  <Icon.LastPage {...args} />
 )
 
 export const launch = (args: StorybookArgs): React.ReactElement => (
-  <IconLaunch {...args} />
+  <Icon.Launch {...args} />
 )
 
 export const lightbulb = (args: StorybookArgs): React.ReactElement => (
-  <IconLightbulb {...args} />
+  <Icon.Lightbulb {...args} />
 )
 
 export const lightbulbOutline = (args: StorybookArgs): React.ReactElement => (
-  <IconLightbulbOutline {...args} />
+  <Icon.LightbulbOutline {...args} />
 )
 
 export const link = (args: StorybookArgs): React.ReactElement => (
-  <IconLink {...args} />
+  <Icon.Link {...args} />
 )
 
 export const linkOff = (args: StorybookArgs): React.ReactElement => (
-  <IconLinkOff {...args} />
+  <Icon.LinkOff {...args} />
 )
 
 export const list = (args: StorybookArgs): React.ReactElement => (
-  <IconList {...args} />
+  <Icon.List {...args} />
 )
 
 export const localCafe = (args: StorybookArgs): React.ReactElement => (
-  <IconLocalCafe {...args} />
+  <Icon.LocalCafe {...args} />
 )
 
 export const localFireDepartment = (
   args: StorybookArgs
-): React.ReactElement => <IconLocalFireDepartment {...args} />
+): React.ReactElement => <Icon.LocalFireDepartment {...args} />
 export const localGasStation = (args: StorybookArgs): React.ReactElement => (
-  <IconLocalGasStation {...args} />
+  <Icon.LocalGasStation {...args} />
 )
 
 export const localGroceryStore = (args: StorybookArgs): React.ReactElement => (
-  <IconLocalGroceryStore {...args} />
+  <Icon.LocalGroceryStore {...args} />
 )
 
 export const localHospital = (args: StorybookArgs): React.ReactElement => (
-  <IconLocalHospital {...args} />
+  <Icon.LocalHospital {...args} />
 )
 
 export const localLaundryService = (
   args: StorybookArgs
-): React.ReactElement => <IconLocalLaundryService {...args} />
+): React.ReactElement => <Icon.LocalLaundryService {...args} />
 export const localLibrary = (args: StorybookArgs): React.ReactElement => (
-  <IconLocalLibrary {...args} />
+  <Icon.LocalLibrary {...args} />
 )
 
 export const localOffer = (args: StorybookArgs): React.ReactElement => (
-  <IconLocalOffer {...args} />
+  <Icon.LocalOffer {...args} />
 )
 
 export const localParking = (args: StorybookArgs): React.ReactElement => (
-  <IconLocalParking {...args} />
+  <Icon.LocalParking {...args} />
 )
 
 export const localPharmacy = (args: StorybookArgs): React.ReactElement => (
-  <IconLocalPharmacy {...args} />
+  <Icon.LocalPharmacy {...args} />
 )
 
 export const localPolice = (args: StorybookArgs): React.ReactElement => (
-  <IconLocalPolice {...args} />
+  <Icon.LocalPolice {...args} />
 )
 
 export const localTaxi = (args: StorybookArgs): React.ReactElement => (
-  <IconLocalTaxi {...args} />
+  <Icon.LocalTaxi {...args} />
 )
 
 export const locationCity = (args: StorybookArgs): React.ReactElement => (
-  <IconLocationCity {...args} />
+  <Icon.LocationCity {...args} />
 )
 
 export const locationOn = (args: StorybookArgs): React.ReactElement => (
-  <IconLocationOn {...args} />
+  <Icon.LocationOn {...args} />
 )
 
 export const lock = (args: StorybookArgs): React.ReactElement => (
-  <IconLock {...args} />
+  <Icon.Lock {...args} />
 )
 
 export const lockOpen = (args: StorybookArgs): React.ReactElement => (
-  <IconLockOpen {...args} />
+  <Icon.LockOpen {...args} />
 )
 
 export const lockOutline = (args: StorybookArgs): React.ReactElement => (
-  <IconLockOutline {...args} />
+  <Icon.LockOutline {...args} />
 )
 
 export const login = (args: StorybookArgs): React.ReactElement => (
-  <IconLogin {...args} />
+  <Icon.Login {...args} />
 )
 
 export const logout = (args: StorybookArgs): React.ReactElement => (
-  <IconLogout {...args} />
+  <Icon.Logout {...args} />
 )
 
 export const loop = (args: StorybookArgs): React.ReactElement => (
-  <IconLoop {...args} />
+  <Icon.Loop {...args} />
 )
 
 export const mail = (args: StorybookArgs): React.ReactElement => (
-  <IconMail {...args} />
+  <Icon.Mail {...args} />
 )
 
 export const mailOutline = (args: StorybookArgs): React.ReactElement => (
-  <IconMailOutline {...args} />
+  <Icon.MailOutline {...args} />
 )
 
 export const map = (args: StorybookArgs): React.ReactElement => (
-  <IconMap {...args} />
+  <Icon.Map {...args} />
 )
 
 export const masks = (args: StorybookArgs): React.ReactElement => (
-  <IconMasks {...args} />
+  <Icon.Masks {...args} />
 )
 
 export const medicalServices = (args: StorybookArgs): React.ReactElement => (
-  <IconMedicalServices {...args} />
+  <Icon.MedicalServices {...args} />
 )
 
 export const menu = (args: StorybookArgs): React.ReactElement => (
-  <IconMenu {...args} />
+  <Icon.Menu {...args} />
 )
 
 export const militaryTech = (args: StorybookArgs): React.ReactElement => (
-  <IconMilitaryTech {...args} />
+  <Icon.MilitaryTech {...args} />
 )
 
 export const moreHoriz = (args: StorybookArgs): React.ReactElement => (
-  <IconMoreHoriz {...args} />
+  <Icon.MoreHoriz {...args} />
 )
 
 export const moreVert = (args: StorybookArgs): React.ReactElement => (
-  <IconMoreVert {...args} />
+  <Icon.MoreVert {...args} />
 )
 
 export const myLocation = (args: StorybookArgs): React.ReactElement => (
-  <IconMyLocation {...args} />
+  <Icon.MyLocation {...args} />
 )
 
 export const navigateBefore = (args: StorybookArgs): React.ReactElement => (
-  <IconNavigateBefore {...args} />
+  <Icon.NavigateBefore {...args} />
 )
 
 export const navigateNext = (args: StorybookArgs): React.ReactElement => (
-  <IconNavigateNext {...args} />
+  <Icon.NavigateNext {...args} />
 )
 
 export const navigateFarBefore = (args: StorybookArgs): React.ReactElement => (
-  <IconNavigateFarBefore {...args} />
+  <Icon.NavigateFarBefore {...args} />
 )
 
 export const navigateFarNext = (args: StorybookArgs): React.ReactElement => (
-  <IconNavigateFarNext {...args} />
+  <Icon.NavigateFarNext {...args} />
 )
 
 export const nearMe = (args: StorybookArgs): React.ReactElement => (
-  <IconNearMe {...args} />
+  <Icon.NearMe {...args} />
 )
 
 export const notifications = (args: StorybookArgs): React.ReactElement => (
-  <IconNotifications {...args} />
+  <Icon.Notifications {...args} />
 )
 
 export const notificationsActive = (
   args: StorybookArgs
-): React.ReactElement => <IconNotificationsActive {...args} />
+): React.ReactElement => <Icon.NotificationsActive {...args} />
 export const notificationsNone = (args: StorybookArgs): React.ReactElement => (
-  <IconNotificationsNone {...args} />
+  <Icon.NotificationsNone {...args} />
 )
 
 export const notificationsOff = (args: StorybookArgs): React.ReactElement => (
-  <IconNotificationsOff {...args} />
+  <Icon.NotificationsOff {...args} />
 )
 
 export const park = (args: StorybookArgs): React.ReactElement => (
-  <IconPark {...args} />
+  <Icon.Park {...args} />
 )
 
 export const people = (args: StorybookArgs): React.ReactElement => (
-  <IconPeople {...args} />
+  <Icon.People {...args} />
 )
 
 export const person = (args: StorybookArgs): React.ReactElement => (
-  <IconPerson {...args} />
+  <Icon.Person {...args} />
 )
 
 export const pets = (args: StorybookArgs): React.ReactElement => (
-  <IconPets {...args} />
+  <Icon.Pets {...args} />
 )
 
 export const phone = (args: StorybookArgs): React.ReactElement => (
-  <IconPhone {...args} />
+  <Icon.Phone {...args} />
 )
 
 export const photoCamera = (args: StorybookArgs): React.ReactElement => (
-  <IconPhotoCamera {...args} />
+  <Icon.PhotoCamera {...args} />
 )
 
 export const print = (args: StorybookArgs): React.ReactElement => (
-  <IconPrint {...args} />
+  <Icon.Print {...args} />
 )
 
 export const priorityHigh = (args: StorybookArgs): React.ReactElement => (
-  <IconPriorityHigh {...args} />
+  <Icon.PriorityHigh {...args} />
 )
 
 export const publicIcon = (args: StorybookArgs): React.ReactElement => (
-  <IconPublic {...args} />
+  <Icon.Public {...args} />
 )
 
 export const pushPin = (args: StorybookArgs): React.ReactElement => (
-  <IconPushPin {...args} />
+  <Icon.PushPin {...args} />
 )
 
 export const radioButtonUnchecked = (
   args: StorybookArgs
-): React.ReactElement => <IconRadioButtonUnchecked {...args} />
+): React.ReactElement => <Icon.RadioButtonUnchecked {...args} />
 export const rain = (args: StorybookArgs): React.ReactElement => (
-  <IconRain {...args} />
+  <Icon.Rain {...args} />
 )
 
 export const reduceCapacity = (args: StorybookArgs): React.ReactElement => (
-  <IconReduceCapacity {...args} />
+  <Icon.ReduceCapacity {...args} />
 )
 
 export const remove = (args: StorybookArgs): React.ReactElement => (
-  <IconRemove {...args} />
+  <Icon.Remove {...args} />
 )
 
 export const report = (args: StorybookArgs): React.ReactElement => (
-  <IconReport {...args} />
+  <Icon.Report {...args} />
 )
 
 export const restaurant = (args: StorybookArgs): React.ReactElement => (
-  <IconRestaurant {...args} />
+  <Icon.Restaurant {...args} />
 )
 
 export const rssFeed = (args: StorybookArgs): React.ReactElement => (
-  <IconRssFeed {...args} />
+  <Icon.RssFeed {...args} />
 )
 
 export const safetyDivider = (args: StorybookArgs): React.ReactElement => (
-  <IconSafetyDivider {...args} />
+  <Icon.SafetyDivider {...args} />
 )
 
 export const sanitizer = (args: StorybookArgs): React.ReactElement => (
-  <IconSanitizer {...args} />
+  <Icon.Sanitizer {...args} />
 )
 
 export const saveAlt = (args: StorybookArgs): React.ReactElement => (
-  <IconSaveAlt {...args} />
+  <Icon.SaveAlt {...args} />
 )
 
 export const severeWeather = (args: StorybookArgs): React.ReactElement => (
-  <IconSevereWeather {...args} />
+  <Icon.SevereWeather {...args} />
 )
 
 export const schedule = (args: StorybookArgs): React.ReactElement => (
-  <IconSchedule {...args} />
+  <Icon.Schedule {...args} />
 )
 
 export const school = (args: StorybookArgs): React.ReactElement => (
-  <IconSchool {...args} />
+  <Icon.School {...args} />
 )
 
 export const science = (args: StorybookArgs): React.ReactElement => (
-  <IconScience {...args} />
+  <Icon.Science {...args} />
 )
 
 export const search = (args: StorybookArgs): React.ReactElement => (
-  <IconSearch {...args} />
+  <Icon.Search {...args} />
 )
 
 export const security = (args: StorybookArgs): React.ReactElement => (
-  <IconSecurity {...args} />
+  <Icon.Security {...args} />
 )
 
 export const send = (args: StorybookArgs): React.ReactElement => (
-  <IconSend {...args} />
+  <Icon.Send {...args} />
 )
 
 export const sentimentDissatisfied = (
   args: StorybookArgs
-): React.ReactElement => <IconSentimentDissatisfied {...args} />
+): React.ReactElement => <Icon.SentimentDissatisfied {...args} />
 export const sentimentNeutral = (args: StorybookArgs): React.ReactElement => (
-  <IconSentimentNeutral {...args} />
+  <Icon.SentimentNeutral {...args} />
 )
 
 export const sentimentSatisfied = (args: StorybookArgs): React.ReactElement => (
-  <IconSentimentSatisfied {...args} />
+  <Icon.SentimentSatisfied {...args} />
 )
 
 export const sentimentSatisfiedAlt = (
   args: StorybookArgs
-): React.ReactElement => <IconSentimentSatisfiedAlt {...args} />
+): React.ReactElement => <Icon.SentimentSatisfiedAlt {...args} />
 export const sentimentVeryDissatisfied = (
   args: StorybookArgs
-): React.ReactElement => <IconSentimentVeryDissatisfied {...args} />
+): React.ReactElement => <Icon.SentimentVeryDissatisfied {...args} />
 export const settings = (args: StorybookArgs): React.ReactElement => (
-  <IconSettings {...args} />
+  <Icon.Settings {...args} />
 )
 
 export const share = (args: StorybookArgs): React.ReactElement => (
-  <IconShare {...args} />
+  <Icon.Share {...args} />
 )
 
 export const shield = (args: StorybookArgs): React.ReactElement => (
-  <IconShield {...args} />
+  <Icon.Shield {...args} />
 )
 
 export const shoppingBasket = (args: StorybookArgs): React.ReactElement => (
-  <IconShoppingBasket {...args} />
+  <Icon.ShoppingBasket {...args} />
 )
 
 export const snow = (args: StorybookArgs): React.ReactElement => (
-  <IconSnow {...args} />
+  <Icon.Snow {...args} />
 )
 
 export const soap = (args: StorybookArgs): React.ReactElement => (
-  <IconSoap {...args} />
+  <Icon.Soap {...args} />
 )
 
 export const socialDistance = (args: StorybookArgs): React.ReactElement => (
-  <IconSocialDistance {...args} />
+  <Icon.SocialDistance {...args} />
 )
 
 export const sortArrow = (args: StorybookArgs): React.ReactElement => (
-  <IconSortArrow {...args} />
+  <Icon.SortArrow {...args} />
 )
 
 export const spellcheck = (args: StorybookArgs): React.ReactElement => (
-  <IconSpellcheck {...args} />
+  <Icon.Spellcheck {...args} />
 )
 
 export const star = (args: StorybookArgs): React.ReactElement => (
-  <IconStar {...args} />
+  <Icon.Star {...args} />
 )
 
 export const starHalf = (args: StorybookArgs): React.ReactElement => (
-  <IconStarHalf {...args} />
+  <Icon.StarHalf {...args} />
 )
 
 export const starOutline = (args: StorybookArgs): React.ReactElement => (
-  <IconStarOutline {...args} />
+  <Icon.StarOutline {...args} />
 )
 
 export const store = (args: StorybookArgs): React.ReactElement => (
-  <IconStore {...args} />
+  <Icon.Store {...args} />
 )
 
 export const support = (args: StorybookArgs): React.ReactElement => (
-  <IconSupport {...args} />
+  <Icon.Support {...args} />
 )
 
 export const supportAgent = (args: StorybookArgs): React.ReactElement => (
-  <IconSupportAgent {...args} />
+  <Icon.SupportAgent {...args} />
 )
 
 export const textFields = (args: StorybookArgs): React.ReactElement => (
-  <IconTextFields {...args} />
+  <Icon.TextFields {...args} />
 )
 
 export const thumbDownAlt = (args: StorybookArgs): React.ReactElement => (
-  <IconThumbDownAlt {...args} />
+  <Icon.ThumbDownAlt {...args} />
 )
 
 export const thumbUpAlt = (args: StorybookArgs): React.ReactElement => (
-  <IconThumbUpAlt {...args} />
+  <Icon.ThumbUpAlt {...args} />
 )
 
 export const timer = (args: StorybookArgs): React.ReactElement => (
-  <IconTimer {...args} />
+  <Icon.Timer {...args} />
 )
 
 export const toggleOff = (args: StorybookArgs): React.ReactElement => (
-  <IconToggleOff {...args} />
+  <Icon.ToggleOff {...args} />
 )
 
 export const toggleOn = (args: StorybookArgs): React.ReactElement => (
-  <IconToggleOn {...args} />
+  <Icon.ToggleOn {...args} />
 )
 
 export const topic = (args: StorybookArgs): React.ReactElement => (
-  <IconTopic {...args} />
+  <Icon.Topic {...args} />
 )
 
 export const tornado = (args: StorybookArgs): React.ReactElement => (
-  <IconTornado {...args} />
+  <Icon.Tornado {...args} />
 )
 
 export const translate = (args: StorybookArgs): React.ReactElement => (
-  <IconTranslate {...args} />
+  <Icon.Translate {...args} />
 )
 
 export const trendingDown = (args: StorybookArgs): React.ReactElement => (
-  <IconTrendingDown {...args} />
+  <Icon.TrendingDown {...args} />
 )
 
 export const trendingUp = (args: StorybookArgs): React.ReactElement => (
-  <IconTrendingUp {...args} />
+  <Icon.TrendingUp {...args} />
 )
 
 export const twitter = (args: StorybookArgs): React.ReactElement => (
-  <IconTwitter {...args} />
+  <Icon.Twitter {...args} />
 )
 
 export const undo = (args: StorybookArgs): React.ReactElement => (
-  <IconUndo {...args} />
+  <Icon.Undo {...args} />
 )
 
 export const unfoldLess = (args: StorybookArgs): React.ReactElement => (
-  <IconUnfoldLess {...args} />
+  <Icon.UnfoldLess {...args} />
 )
 
 export const unfoldMore = (args: StorybookArgs): React.ReactElement => (
-  <IconUnfoldMore {...args} />
+  <Icon.UnfoldMore {...args} />
 )
 
 export const update = (args: StorybookArgs): React.ReactElement => (
-  <IconUpdate {...args} />
+  <Icon.Update {...args} />
 )
 
 export const uploadFile = (args: StorybookArgs): React.ReactElement => (
-  <IconUploadFile {...args} />
+  <Icon.UploadFile {...args} />
 )
 
 export const verified = (args: StorybookArgs): React.ReactElement => (
-  <IconVerified {...args} />
+  <Icon.Verified {...args} />
 )
 
 export const verifiedUser = (args: StorybookArgs): React.ReactElement => (
-  <IconVerifiedUser {...args} />
+  <Icon.VerifiedUser {...args} />
 )
 
 export const visibility = (args: StorybookArgs): React.ReactElement => (
-  <IconVisibility {...args} />
+  <Icon.Visibility {...args} />
 )
 
 export const visibilityOff = (args: StorybookArgs): React.ReactElement => (
-  <IconVisibilityOff {...args} />
+  <Icon.VisibilityOff {...args} />
 )
 
 export const volumeOff = (args: StorybookArgs): React.ReactElement => (
-  <IconVolumeOff {...args} />
+  <Icon.VolumeOff {...args} />
 )
 
 export const warning = (args: StorybookArgs): React.ReactElement => (
-  <IconWarning {...args} />
+  <Icon.Warning {...args} />
 )
 
 export const wash = (args: StorybookArgs): React.ReactElement => (
-  <IconWash {...args} />
+  <Icon.Wash {...args} />
 )
 
 export const wifi = (args: StorybookArgs): React.ReactElement => (
-  <IconWifi {...args} />
+  <Icon.Wifi {...args} />
 )
 
 export const work = (args: StorybookArgs): React.ReactElement => (
-  <IconWork {...args} />
+  <Icon.Work {...args} />
 )
 
 export const youtube = (args: StorybookArgs): React.ReactElement => (
-  <IconYoutube {...args} />
+  <Icon.Youtube {...args} />
 )
 
 export const zoomIn = (args: StorybookArgs): React.ReactElement => (
-  <IconZoomIn {...args} />
+  <Icon.ZoomIn {...args} />
 )
 
 export const zoomOutMap = (args: StorybookArgs): React.ReactElement => (
-  <IconZoomOutMap {...args} />
+  <Icon.ZoomOutMap {...args} />
 )
 
 export const zoomOut = (args: StorybookArgs): React.ReactElement => (
-  <IconZoomOut {...args} />
+  <Icon.ZoomOut {...args} />
 )
diff --git a/src/components/Icon/Icon.test.tsx b/src/components/Icon/Icon.test.tsx
index e90ad1bf8d..8a8bf90603 100644
--- a/src/components/Icon/Icon.test.tsx
+++ b/src/components/Icon/Icon.test.tsx
@@ -1,29 +1,29 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 
-import { IconAccessibilityNew } from './Icons'
+import { Icon } from './Icons'
 
 describe('Icon component', () => {
   it('renders without errors', () => {
-    render(<IconAccessibilityNew />)
+    render(<Icon.AccessibilityNew />)
 
     expect(screen.getByRole('img')).toBeInTheDocument()
   })
 
   it('accepts a size prop', () => {
-    render(<IconAccessibilityNew size={7} />)
+    render(<Icon.AccessibilityNew size={7} />)
 
     expect(screen.getByRole('img')).toHaveClass('usa-icon--size-7')
   })
 
   it('accepts a className', () => {
-    render(<IconAccessibilityNew className="custom-class" />)
+    render(<Icon.AccessibilityNew className="custom-class" />)
 
     expect(screen.getByRole('img')).toHaveClass('custom-class')
   })
 
   it('accepts an aria-label', () => {
-    render(<IconAccessibilityNew aria-label="build icon component" />)
+    render(<Icon.AccessibilityNew aria-label="build icon component" />)
 
     expect(screen.getByRole('img')).toHaveAttribute(
       'aria-label',
diff --git a/src/components/Icon/Icons.stories.tsx b/src/components/Icon/Icons.stories.tsx
index 10fabc82b0..76051f305a 100644
--- a/src/components/Icon/Icons.stories.tsx
+++ b/src/components/Icon/Icons.stories.tsx
@@ -1,245 +1,6 @@
 import React from 'react'
 
-import {
-  IconAccessibilityNew,
-  IconAccessibleForward,
-  IconAccountBalance,
-  IconAccountBox,
-  IconAccountCircle,
-  IconAdd,
-  IconAddCircle,
-  IconAddCircleOutline,
-  IconAlarm,
-  IconAlternateEmail,
-  IconAnnouncement,
-  IconArrowBack,
-  IconArrowDownward,
-  IconArrowDropDown,
-  IconArrowDropUp,
-  IconArrowForward,
-  IconArrowUpward,
-  IconApi,
-  IconAssessment,
-  IconAttachFile,
-  IconAttachMoney,
-  IconAutorenew,
-  IconBackpack,
-  IconBathtub,
-  IconBedding,
-  IconBookmark,
-  IconBugReport,
-  IconBuild,
-  IconCalendarToday,
-  IconCampaign,
-  IconCamping,
-  IconCancel,
-  IconChat,
-  IconCheck,
-  IconCheckBoxOutlineBlank,
-  IconCheckCircle,
-  IconCheckCircleOutline,
-  IconCheckroom,
-  IconCleanHands,
-  IconClothes,
-  IconClose,
-  IconClosedCaption,
-  IconCloud,
-  IconCode,
-  IconComment,
-  IconConnectWithoutContact,
-  IconConstruction,
-  IconConstructionWorker,
-  IconContactPage,
-  IconContentCopy,
-  IconCoronavirus,
-  IconCreditCard,
-  IconDeck,
-  IconDelete,
-  IconDeviceThermostat,
-  IconDirections,
-  IconDirectionsBike,
-  IconDirectionsBus,
-  IconDirectionsCar,
-  IconDirectionsWalk,
-  IconDoNotDisturb,
-  IconDoNotTouch,
-  IconDragHandle,
-  IconEco,
-  IconElectricalServices,
-  IconEmojiEvents,
-  IconError,
-  IconErrorOutline,
-  IconEvent,
-  IconExpandLess,
-  IconExpandMore,
-  IconFacebook,
-  IconFastForward,
-  IconFastRewind,
-  IconFavorite,
-  IconFavoriteBorder,
-  IconFileDownload,
-  IconFilePresent,
-  IconFileUpload,
-  IconFilterAlt,
-  IconFilterList,
-  IconFingerprint,
-  IconFirstPage,
-  IconFlag,
-  IconFlickr,
-  IconFlight,
-  IconFlooding,
-  IconFolder,
-  IconFolderOpen,
-  IconFormatQuote,
-  IconFormatSize,
-  IconForum,
-  IconGithub,
-  IconGridView,
-  IconGroupAdd,
-  IconGroups,
-  IconHearing,
-  IconHelp,
-  IconHelpOutline,
-  IconHighlightOff,
-  IconHistory,
-  IconHome,
-  IconHospital,
-  IconHotel,
-  IconHourglassEmpty,
-  IconHurricane,
-  IconIdentification,
-  IconImage,
-  IconInfo,
-  IconInfoOutline,
-  IconInsights,
-  IconInstagram,
-  IconKeyboard,
-  IconLabel,
-  IconLanguage,
-  IconLastPage,
-  IconLaunch,
-  IconLightbulb,
-  IconLightbulbOutline,
-  IconLink,
-  IconLinkOff,
-  IconList,
-  IconLocalCafe,
-  IconLocalFireDepartment,
-  IconLocalGasStation,
-  IconLocalGroceryStore,
-  IconLocalHospital,
-  IconLocalLaundryService,
-  IconLocalLibrary,
-  IconLocalOffer,
-  IconLocalParking,
-  IconLocalPharmacy,
-  IconLocalPolice,
-  IconLocalTaxi,
-  IconLocationCity,
-  IconLocationOn,
-  IconLock,
-  IconLockOpen,
-  IconLockOutline,
-  IconLogin,
-  IconLogout,
-  IconLoop,
-  IconMail,
-  IconMailOutline,
-  IconMap,
-  IconMasks,
-  IconMedicalServices,
-  IconMenu,
-  IconMilitaryTech,
-  IconMoreHoriz,
-  IconMoreVert,
-  IconMyLocation,
-  IconNavigateBefore,
-  IconNavigateNext,
-  IconNavigateFarBefore,
-  IconNavigateFarNext,
-  IconNearMe,
-  IconNotifications,
-  IconNotificationsActive,
-  IconNotificationsNone,
-  IconNotificationsOff,
-  IconPark,
-  IconPeople,
-  IconPerson,
-  IconPets,
-  IconPhone,
-  IconPhotoCamera,
-  IconPrint,
-  IconPriorityHigh,
-  IconPublic,
-  IconPushPin,
-  IconRadioButtonUnchecked,
-  IconRain,
-  IconReduceCapacity,
-  IconRemove,
-  IconReport,
-  IconRestaurant,
-  IconRssFeed,
-  IconSafetyDivider,
-  IconSanitizer,
-  IconSaveAlt,
-  IconSevereWeather,
-  IconSchedule,
-  IconSchool,
-  IconScience,
-  IconSearch,
-  IconSecurity,
-  IconSend,
-  IconSentimentDissatisfied,
-  IconSentimentNeutral,
-  IconSentimentSatisfied,
-  IconSentimentSatisfiedAlt,
-  IconSentimentVeryDissatisfied,
-  IconSettings,
-  IconShare,
-  IconShield,
-  IconShoppingBasket,
-  IconSnow,
-  IconSoap,
-  IconSocialDistance,
-  IconSortArrow,
-  IconSpellcheck,
-  IconStar,
-  IconStarHalf,
-  IconStarOutline,
-  IconStore,
-  IconSupport,
-  IconSupportAgent,
-  IconTextFields,
-  IconThumbDownAlt,
-  IconThumbUpAlt,
-  IconTimer,
-  IconToggleOff,
-  IconToggleOn,
-  IconTopic,
-  IconTornado,
-  IconTranslate,
-  IconTrendingDown,
-  IconTrendingUp,
-  IconTwitter,
-  IconUndo,
-  IconUnfoldLess,
-  IconUnfoldMore,
-  IconUpdate,
-  IconUploadFile,
-  IconVerified,
-  IconVerifiedUser,
-  IconVisibility,
-  IconVisibilityOff,
-  IconVolumeOff,
-  IconWarning,
-  IconWash,
-  IconWifi,
-  IconWork,
-  IconYoutube,
-  IconZoomIn,
-  IconZoomOutMap,
-  IconZoomOut,
-} from './Icons'
+import { Icon } from './Icons'
 
 type StorybookArgs = {
   size: 3 | 4 | 5 | 6 | 7 | 8 | 9
@@ -270,243 +31,243 @@ Source: https://designsystem.digital.gov/components/icon/
 
 export const allIcons = (args: StorybookArgs): React.ReactElement => (
   <div>
-    <IconAccessibilityNew {...args} />
-    <IconAccessibleForward {...args} />
-    <IconAccountBalance {...args} />
-    <IconAccountBox {...args} />
-    <IconAccountCircle {...args} />
-    <IconAdd {...args} />
-    <IconAddCircle {...args} />
-    <IconAddCircleOutline {...args} />
-    <IconAlarm {...args} />
-    <IconAlternateEmail {...args} />
-    <IconAnnouncement {...args} />
-    <IconArrowBack {...args} />
-    <IconArrowDownward {...args} />
-    <IconArrowDropDown {...args} />
-    <IconArrowDropUp {...args} />
-    <IconArrowForward {...args} />
-    <IconArrowUpward {...args} />
-    <IconApi {...args} />
-    <IconAssessment {...args} />
-    <IconAttachFile {...args} />
-    <IconAttachMoney {...args} />
-    <IconAutorenew {...args} />
-    <IconBackpack {...args} />
-    <IconBathtub {...args} />
-    <IconBedding {...args} />
-    <IconBookmark {...args} />
-    <IconBugReport {...args} />
-    <IconBuild {...args} />
-    <IconCalendarToday {...args} />
-    <IconCampaign {...args} />
-    <IconCamping {...args} />
-    <IconCancel {...args} />
-    <IconChat {...args} />
-    <IconCheck {...args} />
-    <IconCheckBoxOutlineBlank {...args} />
-    <IconCheckCircle {...args} />
-    <IconCheckCircleOutline {...args} />
-    <IconCheckroom {...args} />
-    <IconCleanHands {...args} />
-    <IconClothes {...args} />
-    <IconClose {...args} />
-    <IconClosedCaption {...args} />
-    <IconCloud {...args} />
-    <IconCode {...args} />
-    <IconComment {...args} />
-    <IconConnectWithoutContact {...args} />
-    <IconConstruction {...args} />
-    <IconConstructionWorker {...args} />
-    <IconContactPage {...args} />
-    <IconContentCopy {...args} />
-    <IconCoronavirus {...args} />
-    <IconCreditCard {...args} />
-    <IconDeck {...args} />
-    <IconDelete {...args} />
-    <IconDeviceThermostat {...args} />
-    <IconDirections {...args} />
-    <IconDirectionsBike {...args} />
-    <IconDirectionsBus {...args} />
-    <IconDirectionsCar {...args} />
-    <IconDirectionsWalk {...args} />
-    <IconDoNotDisturb {...args} />
-    <IconDoNotTouch {...args} />
-    <IconDragHandle {...args} />
-    <IconEco {...args} />
-    <IconElectricalServices {...args} />
-    <IconEmojiEvents {...args} />
-    <IconError {...args} />
-    <IconErrorOutline {...args} />
-    <IconEvent {...args} />
-    <IconExpandLess {...args} />
-    <IconExpandMore {...args} />
-    <IconFacebook {...args} />
-    <IconFastForward {...args} />
-    <IconFastRewind {...args} />
-    <IconFavorite {...args} />
-    <IconFavoriteBorder {...args} />
-    <IconFileDownload {...args} />
-    <IconFilePresent {...args} />
-    <IconFileUpload {...args} />
-    <IconFilterAlt {...args} />
-    <IconFilterList {...args} />
-    <IconFingerprint {...args} />
-    <IconFirstPage {...args} />
-    <IconFlag {...args} />
-    <IconFlickr {...args} />
-    <IconFlight {...args} />
-    <IconFlooding {...args} />
-    <IconFolder {...args} />
-    <IconFolderOpen {...args} />
-    <IconFormatQuote {...args} />
-    <IconFormatSize {...args} />
-    <IconForum {...args} />
-    <IconGithub {...args} />
-    <IconGridView {...args} />
-    <IconGroupAdd {...args} />
-    <IconGroups {...args} />
-    <IconHearing {...args} />
-    <IconHelp {...args} />
-    <IconHelpOutline {...args} />
-    <IconHighlightOff {...args} />
-    <IconHistory {...args} />
-    <IconHome {...args} />
-    <IconHospital {...args} />
-    <IconHotel {...args} />
-    <IconHourglassEmpty {...args} />
-    <IconHurricane {...args} />
-    <IconIdentification {...args} />
-    <IconImage {...args} />
-    <IconInfo {...args} />
-    <IconInfoOutline {...args} />
-    <IconInsights {...args} />
-    <IconInstagram {...args} />
-    <IconKeyboard {...args} />
-    <IconLabel {...args} />
-    <IconLanguage {...args} />
-    <IconLastPage {...args} />
-    <IconLaunch {...args} />
-    <IconLightbulb {...args} />
-    <IconLightbulbOutline {...args} />
-    <IconLink {...args} />
-    <IconLinkOff {...args} />
-    <IconList {...args} />
-    <IconLocalCafe {...args} />
-    <IconLocalFireDepartment {...args} />
-    <IconLocalGasStation {...args} />
-    <IconLocalGroceryStore {...args} />
-    <IconLocalHospital {...args} />
-    <IconLocalLaundryService {...args} />
-    <IconLocalLibrary {...args} />
-    <IconLocalOffer {...args} />
-    <IconLocalParking {...args} />
-    <IconLocalPharmacy {...args} />
-    <IconLocalPolice {...args} />
-    <IconLocalTaxi {...args} />
-    <IconLocationCity {...args} />
-    <IconLocationOn {...args} />
-    <IconLock {...args} />
-    <IconLockOpen {...args} />
-    <IconLockOutline {...args} />
-    <IconLogin {...args} />
-    <IconLogout {...args} />
-    <IconLoop {...args} />
-    <IconMail {...args} />
-    <IconMailOutline {...args} />
-    <IconMap {...args} />
-    <IconMasks {...args} />
-    <IconMedicalServices {...args} />
-    <IconMenu {...args} />
-    <IconMilitaryTech {...args} />
-    <IconMoreHoriz {...args} />
-    <IconMoreVert {...args} />
-    <IconMyLocation {...args} />
-    <IconNavigateBefore {...args} />
-    <IconNavigateNext {...args} />
-    <IconNavigateFarBefore {...args} />
-    <IconNavigateFarNext {...args} />
-    <IconNearMe {...args} />
-    <IconNotifications {...args} />
-    <IconNotificationsActive {...args} />
-    <IconNotificationsNone {...args} />
-    <IconNotificationsOff {...args} />
-    <IconPark {...args} />
-    <IconPeople {...args} />
-    <IconPerson {...args} />
-    <IconPets {...args} />
-    <IconPhone {...args} />
-    <IconPhotoCamera {...args} />
-    <IconPrint {...args} />
-    <IconPriorityHigh {...args} />
-    <IconPublic {...args} />
-    <IconPushPin {...args} />
-    <IconRadioButtonUnchecked {...args} />
-    <IconRain {...args} />
-    <IconReduceCapacity {...args} />
-    <IconRemove {...args} />
-    <IconReport {...args} />
-    <IconRestaurant {...args} />
-    <IconRssFeed {...args} />
-    <IconSafetyDivider {...args} />
-    <IconSanitizer {...args} />
-    <IconSaveAlt {...args} />
-    <IconSevereWeather {...args} />
-    <IconSchedule {...args} />
-    <IconSchool {...args} />
-    <IconScience {...args} />
-    <IconSearch {...args} />
-    <IconSecurity {...args} />
-    <IconSend {...args} />
-    <IconSentimentDissatisfied {...args} />
-    <IconSentimentNeutral {...args} />
-    <IconSentimentSatisfied {...args} />
-    <IconSentimentSatisfiedAlt {...args} />
-    <IconSentimentVeryDissatisfied {...args} />
-    <IconSettings {...args} />
-    <IconShare {...args} />
-    <IconShield {...args} />
-    <IconShoppingBasket {...args} />
-    <IconSnow {...args} />
-    <IconSoap {...args} />
-    <IconSocialDistance {...args} />
-    <IconSortArrow {...args} />
-    <IconSpellcheck {...args} />
-    <IconStar {...args} />
-    <IconStarHalf {...args} />
-    <IconStarOutline {...args} />
-    <IconStore {...args} />
-    <IconSupport {...args} />
-    <IconSupportAgent {...args} />
-    <IconTextFields {...args} />
-    <IconThumbDownAlt {...args} />
-    <IconThumbUpAlt {...args} />
-    <IconTimer {...args} />
-    <IconToggleOff {...args} />
-    <IconToggleOn {...args} />
-    <IconTopic {...args} />
-    <IconTornado {...args} />
-    <IconTranslate {...args} />
-    <IconTrendingDown {...args} />
-    <IconTrendingUp {...args} />
-    <IconTwitter {...args} />
-    <IconUndo {...args} />
-    <IconUnfoldLess {...args} />
-    <IconUnfoldMore {...args} />
-    <IconUpdate {...args} />
-    <IconUploadFile {...args} />
-    <IconVerified {...args} />
-    <IconVerifiedUser {...args} />
-    <IconVisibility {...args} />
-    <IconVisibilityOff {...args} />
-    <IconVolumeOff {...args} />
-    <IconWarning {...args} />
-    <IconWash {...args} />
-    <IconWifi {...args} />
-    <IconWork {...args} />
-    <IconYoutube {...args} />
-    <IconZoomIn {...args} />
-    <IconZoomOutMap {...args} />
-    <IconZoomOut {...args} />
+    <Icon.AccessibilityNew {...args} />
+    <Icon.AccessibleForward {...args} />
+    <Icon.AccountBalance {...args} />
+    <Icon.AccountBox {...args} />
+    <Icon.AccountCircle {...args} />
+    <Icon.Add {...args} />
+    <Icon.AddCircle {...args} />
+    <Icon.AddCircleOutline {...args} />
+    <Icon.Alarm {...args} />
+    <Icon.AlternateEmail {...args} />
+    <Icon.Announcement {...args} />
+    <Icon.ArrowBack {...args} />
+    <Icon.ArrowDownward {...args} />
+    <Icon.ArrowDropDown {...args} />
+    <Icon.ArrowDropUp {...args} />
+    <Icon.ArrowForward {...args} />
+    <Icon.ArrowUpward {...args} />
+    <Icon.Api {...args} />
+    <Icon.Assessment {...args} />
+    <Icon.AttachFile {...args} />
+    <Icon.AttachMoney {...args} />
+    <Icon.Autorenew {...args} />
+    <Icon.Backpack {...args} />
+    <Icon.Bathtub {...args} />
+    <Icon.Bedding {...args} />
+    <Icon.Bookmark {...args} />
+    <Icon.BugReport {...args} />
+    <Icon.Build {...args} />
+    <Icon.CalendarToday {...args} />
+    <Icon.Campaign {...args} />
+    <Icon.Camping {...args} />
+    <Icon.Cancel {...args} />
+    <Icon.Chat {...args} />
+    <Icon.Check {...args} />
+    <Icon.CheckBoxOutlineBlank {...args} />
+    <Icon.CheckCircle {...args} />
+    <Icon.CheckCircleOutline {...args} />
+    <Icon.Checkroom {...args} />
+    <Icon.CleanHands {...args} />
+    <Icon.Clothes {...args} />
+    <Icon.Close {...args} />
+    <Icon.ClosedCaption {...args} />
+    <Icon.Cloud {...args} />
+    <Icon.Code {...args} />
+    <Icon.Comment {...args} />
+    <Icon.ConnectWithoutContact {...args} />
+    <Icon.Construction {...args} />
+    <Icon.ConstructionWorker {...args} />
+    <Icon.ContactPage {...args} />
+    <Icon.ContentCopy {...args} />
+    <Icon.Coronavirus {...args} />
+    <Icon.CreditCard {...args} />
+    <Icon.Deck {...args} />
+    <Icon.Delete {...args} />
+    <Icon.DeviceThermostat {...args} />
+    <Icon.Directions {...args} />
+    <Icon.DirectionsBike {...args} />
+    <Icon.DirectionsBus {...args} />
+    <Icon.DirectionsCar {...args} />
+    <Icon.DirectionsWalk {...args} />
+    <Icon.DoNotDisturb {...args} />
+    <Icon.DoNotTouch {...args} />
+    <Icon.DragHandle {...args} />
+    <Icon.Eco {...args} />
+    <Icon.ElectricalServices {...args} />
+    <Icon.EmojiEvents {...args} />
+    <Icon.Error {...args} />
+    <Icon.ErrorOutline {...args} />
+    <Icon.Event {...args} />
+    <Icon.ExpandLess {...args} />
+    <Icon.ExpandMore {...args} />
+    <Icon.Facebook {...args} />
+    <Icon.FastForward {...args} />
+    <Icon.FastRewind {...args} />
+    <Icon.Favorite {...args} />
+    <Icon.FavoriteBorder {...args} />
+    <Icon.FileDownload {...args} />
+    <Icon.FilePresent {...args} />
+    <Icon.FileUpload {...args} />
+    <Icon.FilterAlt {...args} />
+    <Icon.FilterList {...args} />
+    <Icon.Fingerprint {...args} />
+    <Icon.FirstPage {...args} />
+    <Icon.Flag {...args} />
+    <Icon.Flickr {...args} />
+    <Icon.Flight {...args} />
+    <Icon.Flooding {...args} />
+    <Icon.Folder {...args} />
+    <Icon.FolderOpen {...args} />
+    <Icon.FormatQuote {...args} />
+    <Icon.FormatSize {...args} />
+    <Icon.Forum {...args} />
+    <Icon.Github {...args} />
+    <Icon.GridView {...args} />
+    <Icon.GroupAdd {...args} />
+    <Icon.Groups {...args} />
+    <Icon.Hearing {...args} />
+    <Icon.Help {...args} />
+    <Icon.HelpOutline {...args} />
+    <Icon.HighlightOff {...args} />
+    <Icon.History {...args} />
+    <Icon.Home {...args} />
+    <Icon.Hospital {...args} />
+    <Icon.Hotel {...args} />
+    <Icon.HourglassEmpty {...args} />
+    <Icon.Hurricane {...args} />
+    <Icon.Identification {...args} />
+    <Icon.Image {...args} />
+    <Icon.Info {...args} />
+    <Icon.InfoOutline {...args} />
+    <Icon.Insights {...args} />
+    <Icon.Instagram {...args} />
+    <Icon.Keyboard {...args} />
+    <Icon.Label {...args} />
+    <Icon.Language {...args} />
+    <Icon.LastPage {...args} />
+    <Icon.Launch {...args} />
+    <Icon.Lightbulb {...args} />
+    <Icon.LightbulbOutline {...args} />
+    <Icon.Link {...args} />
+    <Icon.LinkOff {...args} />
+    <Icon.List {...args} />
+    <Icon.LocalCafe {...args} />
+    <Icon.LocalFireDepartment {...args} />
+    <Icon.LocalGasStation {...args} />
+    <Icon.LocalGroceryStore {...args} />
+    <Icon.LocalHospital {...args} />
+    <Icon.LocalLaundryService {...args} />
+    <Icon.LocalLibrary {...args} />
+    <Icon.LocalOffer {...args} />
+    <Icon.LocalParking {...args} />
+    <Icon.LocalPharmacy {...args} />
+    <Icon.LocalPolice {...args} />
+    <Icon.LocalTaxi {...args} />
+    <Icon.LocationCity {...args} />
+    <Icon.LocationOn {...args} />
+    <Icon.Lock {...args} />
+    <Icon.LockOpen {...args} />
+    <Icon.LockOutline {...args} />
+    <Icon.Login {...args} />
+    <Icon.Logout {...args} />
+    <Icon.Loop {...args} />
+    <Icon.Mail {...args} />
+    <Icon.MailOutline {...args} />
+    <Icon.Map {...args} />
+    <Icon.Masks {...args} />
+    <Icon.MedicalServices {...args} />
+    <Icon.Menu {...args} />
+    <Icon.MilitaryTech {...args} />
+    <Icon.MoreHoriz {...args} />
+    <Icon.MoreVert {...args} />
+    <Icon.MyLocation {...args} />
+    <Icon.NavigateBefore {...args} />
+    <Icon.NavigateNext {...args} />
+    <Icon.NavigateFarBefore {...args} />
+    <Icon.NavigateFarNext {...args} />
+    <Icon.NearMe {...args} />
+    <Icon.Notifications {...args} />
+    <Icon.NotificationsActive {...args} />
+    <Icon.NotificationsNone {...args} />
+    <Icon.NotificationsOff {...args} />
+    <Icon.Park {...args} />
+    <Icon.People {...args} />
+    <Icon.Person {...args} />
+    <Icon.Pets {...args} />
+    <Icon.Phone {...args} />
+    <Icon.PhotoCamera {...args} />
+    <Icon.Print {...args} />
+    <Icon.PriorityHigh {...args} />
+    <Icon.Public {...args} />
+    <Icon.PushPin {...args} />
+    <Icon.RadioButtonUnchecked {...args} />
+    <Icon.Rain {...args} />
+    <Icon.ReduceCapacity {...args} />
+    <Icon.Remove {...args} />
+    <Icon.Report {...args} />
+    <Icon.Restaurant {...args} />
+    <Icon.RssFeed {...args} />
+    <Icon.SafetyDivider {...args} />
+    <Icon.Sanitizer {...args} />
+    <Icon.SaveAlt {...args} />
+    <Icon.SevereWeather {...args} />
+    <Icon.Schedule {...args} />
+    <Icon.School {...args} />
+    <Icon.Science {...args} />
+    <Icon.Search {...args} />
+    <Icon.Security {...args} />
+    <Icon.Send {...args} />
+    <Icon.SentimentDissatisfied {...args} />
+    <Icon.SentimentNeutral {...args} />
+    <Icon.SentimentSatisfied {...args} />
+    <Icon.SentimentSatisfiedAlt {...args} />
+    <Icon.SentimentVeryDissatisfied {...args} />
+    <Icon.Settings {...args} />
+    <Icon.Share {...args} />
+    <Icon.Shield {...args} />
+    <Icon.ShoppingBasket {...args} />
+    <Icon.Snow {...args} />
+    <Icon.Soap {...args} />
+    <Icon.SocialDistance {...args} />
+    <Icon.SortArrow {...args} />
+    <Icon.Spellcheck {...args} />
+    <Icon.Star {...args} />
+    <Icon.StarHalf {...args} />
+    <Icon.StarOutline {...args} />
+    <Icon.Store {...args} />
+    <Icon.Support {...args} />
+    <Icon.SupportAgent {...args} />
+    <Icon.TextFields {...args} />
+    <Icon.ThumbDownAlt {...args} />
+    <Icon.ThumbUpAlt {...args} />
+    <Icon.Timer {...args} />
+    <Icon.ToggleOff {...args} />
+    <Icon.ToggleOn {...args} />
+    <Icon.Topic {...args} />
+    <Icon.Tornado {...args} />
+    <Icon.Translate {...args} />
+    <Icon.TrendingDown {...args} />
+    <Icon.TrendingUp {...args} />
+    <Icon.Twitter {...args} />
+    <Icon.Undo {...args} />
+    <Icon.UnfoldLess {...args} />
+    <Icon.UnfoldMore {...args} />
+    <Icon.Update {...args} />
+    <Icon.UploadFile {...args} />
+    <Icon.Verified {...args} />
+    <Icon.VerifiedUser {...args} />
+    <Icon.Visibility {...args} />
+    <Icon.VisibilityOff {...args} />
+    <Icon.VolumeOff {...args} />
+    <Icon.Warning {...args} />
+    <Icon.Wash {...args} />
+    <Icon.Wifi {...args} />
+    <Icon.Work {...args} />
+    <Icon.Youtube {...args} />
+    <Icon.ZoomIn {...args} />
+    <Icon.ZoomOutMap {...args} />
+    <Icon.ZoomOut {...args} />
   </div>
 )
diff --git a/src/components/Icon/Icons.ts b/src/components/Icon/Icons.ts
index a33863cb3d..19d81ba5af 100644
--- a/src/components/Icon/Icons.ts
+++ b/src/components/Icon/Icons.ts
@@ -240,680 +240,676 @@ import ZoomOutSvg from 'uswds/dist/img/usa-icons/zoom_out.svg?svgr'
 
 import { makeUSWDSIcon, IconProps } from './Icon'
 import React from 'react'
-import { withDeprecationWarning } from '../hoc/withDeprecationWarning'
 
-export const IconAccessibilityNew: React.ComponentType<IconProps> =
-  makeUSWDSIcon(AccessibilityNewSvg)
+export class Icon {
+  public static AccessibilityNew: React.ComponentType<IconProps> =
+    makeUSWDSIcon(AccessibilityNewSvg)
 
-export const IconAccessibleForward: React.ComponentType<IconProps> =
-  makeUSWDSIcon(AccessibleForwardSvg)
+  public static AccessibleForward: React.ComponentType<IconProps> =
+    makeUSWDSIcon(AccessibleForwardSvg)
 
-export const IconAccountBalance: React.ComponentType<IconProps> =
-  makeUSWDSIcon(AccountBalanceSvg)
+  public static AccountBalance: React.ComponentType<IconProps> =
+    makeUSWDSIcon(AccountBalanceSvg)
 
-export const IconAccountBox: React.ComponentType<IconProps> =
-  makeUSWDSIcon(AccountBoxSvg)
+  public static AccountBox: React.ComponentType<IconProps> =
+    makeUSWDSIcon(AccountBoxSvg)
 
-export const IconAccountCircle: React.ComponentType<IconProps> =
-  makeUSWDSIcon(AccountCircleSvg)
+  public static AccountCircle: React.ComponentType<IconProps> =
+    makeUSWDSIcon(AccountCircleSvg)
 
-export const IconAdd: React.ComponentType<IconProps> = makeUSWDSIcon(AddSvg)
+  public static Add: React.ComponentType<IconProps> = makeUSWDSIcon(AddSvg)
 
-export const IconAddCircle: React.ComponentType<IconProps> =
-  makeUSWDSIcon(AddCircleSvg)
+  public static AddCircle: React.ComponentType<IconProps> =
+    makeUSWDSIcon(AddCircleSvg)
 
-export const IconAddCircleOutline: React.ComponentType<IconProps> =
-  makeUSWDSIcon(AddCircleOutlineSvg)
+  public static AddCircleOutline: React.ComponentType<IconProps> =
+    makeUSWDSIcon(AddCircleOutlineSvg)
 
-export const IconAlarm: React.ComponentType<IconProps> = makeUSWDSIcon(AlarmSvg)
+  public static Alarm: React.ComponentType<IconProps> = makeUSWDSIcon(AlarmSvg)
 
-export const IconAlternateEmail: React.ComponentType<IconProps> =
-  makeUSWDSIcon(AlternateEmailSvg)
+  public static AlternateEmail: React.ComponentType<IconProps> =
+    makeUSWDSIcon(AlternateEmailSvg)
 
-export const IconAnnouncement: React.ComponentType<IconProps> =
-  makeUSWDSIcon(AnnouncementSvg)
+  public static Announcement: React.ComponentType<IconProps> =
+    makeUSWDSIcon(AnnouncementSvg)
 
-export const IconArrowBack: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ArrowBackSvg)
+  public static ArrowBack: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ArrowBackSvg)
 
-export const IconArrowDownward: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ArrowDownwardSvg)
+  public static ArrowDownward: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ArrowDownwardSvg)
 
-export const IconArrowDropDown: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ArrowDropDownSvg)
+  public static ArrowDropDown: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ArrowDropDownSvg)
 
-export const IconArrowDropUp: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ArrowDropUpSvg)
+  public static ArrowDropUp: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ArrowDropUpSvg)
 
-export const IconArrowForward: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ArrowForwardSvg)
+  public static ArrowForward: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ArrowForwardSvg)
 
-export const IconArrowUpward: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ArrowUpwardSvg)
+  public static ArrowUpward: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ArrowUpwardSvg)
 
-export const IconApi: React.ComponentType<IconProps> = makeUSWDSIcon(ApiSvg)
+  public static Api: React.ComponentType<IconProps> = makeUSWDSIcon(ApiSvg)
 
-export const IconAssessment: React.ComponentType<IconProps> =
-  makeUSWDSIcon(AssessmentSvg)
+  public static Assessment: React.ComponentType<IconProps> =
+    makeUSWDSIcon(AssessmentSvg)
 
-export const IconAttachFile: React.ComponentType<IconProps> =
-  makeUSWDSIcon(AttachFileSvg)
+  public static AttachFile: React.ComponentType<IconProps> =
+    makeUSWDSIcon(AttachFileSvg)
 
-export const IconAttachMoney: React.ComponentType<IconProps> =
-  makeUSWDSIcon(AttachMoneySvg)
+  public static AttachMoney: React.ComponentType<IconProps> =
+    makeUSWDSIcon(AttachMoneySvg)
 
-export const IconAutorenew: React.ComponentType<IconProps> =
-  makeUSWDSIcon(AutorenewSvg)
+  public static Autorenew: React.ComponentType<IconProps> =
+    makeUSWDSIcon(AutorenewSvg)
 
-export const IconBackpack: React.ComponentType<IconProps> =
-  makeUSWDSIcon(BackpackSvg)
+  public static Backpack: React.ComponentType<IconProps> =
+    makeUSWDSIcon(BackpackSvg)
 
-export const IconBathtub: React.ComponentType<IconProps> =
-  makeUSWDSIcon(BathtubSvg)
+  public static Bathtub: React.ComponentType<IconProps> =
+    makeUSWDSIcon(BathtubSvg)
 
-export const IconBedding: React.ComponentType<IconProps> =
-  makeUSWDSIcon(BeddingSvg)
+  public static Bedding: React.ComponentType<IconProps> =
+    makeUSWDSIcon(BeddingSvg)
 
-export const IconBookmark: React.ComponentType<IconProps> =
-  makeUSWDSIcon(BookmarkSvg)
+  public static Bookmark: React.ComponentType<IconProps> =
+    makeUSWDSIcon(BookmarkSvg)
 
-export const IconBugReport: React.ComponentType<IconProps> =
-  makeUSWDSIcon(BugReportSvg)
+  public static BugReport: React.ComponentType<IconProps> =
+    makeUSWDSIcon(BugReportSvg)
 
-export const IconBuild: React.ComponentType<IconProps> = makeUSWDSIcon(BuildSvg)
+  public static Build: React.ComponentType<IconProps> = makeUSWDSIcon(BuildSvg)
 
-export const IconCalendarToday: React.ComponentType<IconProps> =
-  makeUSWDSIcon(CalendarTodaySvg)
+  public static CalendarToday: React.ComponentType<IconProps> =
+    makeUSWDSIcon(CalendarTodaySvg)
 
-export const IconCampaign: React.ComponentType<IconProps> =
-  makeUSWDSIcon(CampaignSvg)
+  public static Campaign: React.ComponentType<IconProps> =
+    makeUSWDSIcon(CampaignSvg)
 
-export const IconCamping: React.ComponentType<IconProps> =
-  makeUSWDSIcon(CampingSvg)
+  public static Camping: React.ComponentType<IconProps> =
+    makeUSWDSIcon(CampingSvg)
 
-export const IconCancel: React.ComponentType<IconProps> =
-  makeUSWDSIcon(CancelSvg)
+  public static Cancel: React.ComponentType<IconProps> =
+    makeUSWDSIcon(CancelSvg)
 
-export const IconChat: React.ComponentType<IconProps> = makeUSWDSIcon(ChatSvg)
+  public static Chat: React.ComponentType<IconProps> = makeUSWDSIcon(ChatSvg)
 
-export const IconCheck: React.ComponentType<IconProps> = makeUSWDSIcon(CheckSvg)
+  public static Check: React.ComponentType<IconProps> = makeUSWDSIcon(CheckSvg)
 
-export const IconCheckBoxOutlineBlank: React.ComponentType<IconProps> =
-  makeUSWDSIcon(CheckBoxOutlineBlankSvg)
+  public static CheckBoxOutlineBlank: React.ComponentType<IconProps> =
+    makeUSWDSIcon(CheckBoxOutlineBlankSvg)
 
-export const IconCheckCircle: React.ComponentType<IconProps> =
-  makeUSWDSIcon(CheckCircleSvg)
+  public static CheckCircle: React.ComponentType<IconProps> =
+    makeUSWDSIcon(CheckCircleSvg)
 
-export const IconCheckCircleOutline: React.ComponentType<IconProps> =
-  makeUSWDSIcon(CheckCircleOutlineSvg)
+  public static CheckCircleOutline: React.ComponentType<IconProps> =
+    makeUSWDSIcon(CheckCircleOutlineSvg)
 
-export const IconCheckroom: React.ComponentType<IconProps> =
-  makeUSWDSIcon(CheckroomSvg)
+  public static Checkroom: React.ComponentType<IconProps> =
+    makeUSWDSIcon(CheckroomSvg)
 
-export const IconCleanHands: React.ComponentType<IconProps> =
-  makeUSWDSIcon(CleanHandsSvg)
+  public static CleanHands: React.ComponentType<IconProps> =
+    makeUSWDSIcon(CleanHandsSvg)
 
-export const IconClothes: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ClothesSvg)
+  public static Clothes: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ClothesSvg)
 
-export const IconClose: React.ComponentType<IconProps> = makeUSWDSIcon(CloseSvg)
+  public static Close: React.ComponentType<IconProps> = makeUSWDSIcon(CloseSvg)
 
-export const IconClosedCaption: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ClosedCaptionSvg)
+  public static ClosedCaption: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ClosedCaptionSvg)
 
-export const IconCloud: React.ComponentType<IconProps> = makeUSWDSIcon(CloudSvg)
+  public static Cloud: React.ComponentType<IconProps> = makeUSWDSIcon(CloudSvg)
 
-export const IconCode: React.ComponentType<IconProps> = makeUSWDSIcon(CodeSvg)
+  public static Code: React.ComponentType<IconProps> = makeUSWDSIcon(CodeSvg)
 
-export const IconComment: React.ComponentType<IconProps> =
-  makeUSWDSIcon(CommentSvg)
+  public static Comment: React.ComponentType<IconProps> =
+    makeUSWDSIcon(CommentSvg)
 
-export const IconConnectWithoutContact: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ConnectWithoutContactSvg)
+  public static ConnectWithoutContact: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ConnectWithoutContactSvg)
 
-export const IconConstruction: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ConstructionSvg)
+  public static Construction: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ConstructionSvg)
 
-export const IconConstructionWorker: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ConstructionWorkerSvg)
+  public static ConstructionWorker: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ConstructionWorkerSvg)
 
-export const IconContactPage: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ContactPageSvg)
+  public static ContactPage: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ContactPageSvg)
 
-export const IconContentCopy: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ContentCopySvg)
+  public static ContentCopy: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ContentCopySvg)
 
-export const IconCoronavirus: React.ComponentType<IconProps> =
-  makeUSWDSIcon(CoronavirusSvg)
+  public static Coronavirus: React.ComponentType<IconProps> =
+    makeUSWDSIcon(CoronavirusSvg)
 
-export const IconCreditCard: React.ComponentType<IconProps> =
-  makeUSWDSIcon(CreditCardSvg)
+  public static CreditCard: React.ComponentType<IconProps> =
+    makeUSWDSIcon(CreditCardSvg)
 
-export const IconDeck: React.ComponentType<IconProps> = makeUSWDSIcon(DeckSvg)
+  public static Deck: React.ComponentType<IconProps> = makeUSWDSIcon(DeckSvg)
 
-export const IconDelete: React.ComponentType<IconProps> =
-  makeUSWDSIcon(DeleteSvg)
+  public static Delete: React.ComponentType<IconProps> =
+    makeUSWDSIcon(DeleteSvg)
 
-export const IconDeviceThermostat: React.ComponentType<IconProps> =
-  makeUSWDSIcon(DeviceThermostatSvg)
+  public static DeviceThermostat: React.ComponentType<IconProps> =
+    makeUSWDSIcon(DeviceThermostatSvg)
 
-export const IconDirections: React.ComponentType<IconProps> =
-  makeUSWDSIcon(DirectionsSvg)
+  public static Directions: React.ComponentType<IconProps> =
+    makeUSWDSIcon(DirectionsSvg)
 
-export const IconDirectionsBike: React.ComponentType<IconProps> =
-  makeUSWDSIcon(DirectionsBikeSvg)
+  public static DirectionsBike: React.ComponentType<IconProps> =
+    makeUSWDSIcon(DirectionsBikeSvg)
 
-export const IconDirectionsBus: React.ComponentType<IconProps> =
-  makeUSWDSIcon(DirectionsBusSvg)
+  public static DirectionsBus: React.ComponentType<IconProps> =
+    makeUSWDSIcon(DirectionsBusSvg)
 
-export const IconDirectionsCar: React.ComponentType<IconProps> =
-  makeUSWDSIcon(DirectionsCarSvg)
+  public static DirectionsCar: React.ComponentType<IconProps> =
+    makeUSWDSIcon(DirectionsCarSvg)
 
-export const IconDirectionsWalk: React.ComponentType<IconProps> =
-  makeUSWDSIcon(DirectionsWalkSvg)
+  public static DirectionsWalk: React.ComponentType<IconProps> =
+    makeUSWDSIcon(DirectionsWalkSvg)
 
-export const IconDoNotDisturb: React.ComponentType<IconProps> =
-  makeUSWDSIcon(DoNotDisturbSvg)
+  public static DoNotDisturb: React.ComponentType<IconProps> =
+    makeUSWDSIcon(DoNotDisturbSvg)
 
-export const IconDoNotTouch: React.ComponentType<IconProps> =
-  makeUSWDSIcon(DoNotTouchSvg)
+  public static DoNotTouch: React.ComponentType<IconProps> =
+    makeUSWDSIcon(DoNotTouchSvg)
 
-export const IconDragHandle: React.ComponentType<IconProps> =
-  makeUSWDSIcon(DragHandleSvg)
+  public static DragHandle: React.ComponentType<IconProps> =
+    makeUSWDSIcon(DragHandleSvg)
 
-export const IconEco: React.ComponentType<IconProps> = makeUSWDSIcon(EcoSvg)
+  public static Eco: React.ComponentType<IconProps> = makeUSWDSIcon(EcoSvg)
 
-export const IconEdit: React.ComponentType<IconProps> = makeUSWDSIcon(EditSvg)
+  public static Edit: React.ComponentType<IconProps> = makeUSWDSIcon(EditSvg)
 
-export const IconElectricalServices: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ElectricalServicesSvg)
+  public static ElectricalServices: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ElectricalServicesSvg)
 
-export const IconEmojiEvents: React.ComponentType<IconProps> =
-  makeUSWDSIcon(EmojiEventsSvg)
+  public static EmojiEvents: React.ComponentType<IconProps> =
+    makeUSWDSIcon(EmojiEventsSvg)
 
-export const IconError: React.ComponentType<IconProps> = makeUSWDSIcon(ErrorSvg)
+  public static Error: React.ComponentType<IconProps> = makeUSWDSIcon(ErrorSvg)
 
-export const IconErrorOutline: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ErrorOutlineSvg)
+  public static ErrorOutline: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ErrorOutlineSvg)
 
-export const IconEvent: React.ComponentType<IconProps> = makeUSWDSIcon(EventSvg)
+  public static Event: React.ComponentType<IconProps> = makeUSWDSIcon(EventSvg)
 
-export const IconExpandLess: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ExpandLessSvg)
+  public static ExpandLess: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ExpandLessSvg)
 
-export const IconExpandMore: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ExpandMoreSvg)
+  public static ExpandMore: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ExpandMoreSvg)
 
-export const IconFacebook: React.ComponentType<IconProps> =
-  makeUSWDSIcon(FacebookSvg)
+  public static Facebook: React.ComponentType<IconProps> =
+    makeUSWDSIcon(FacebookSvg)
 
-export const IconFastForward: React.ComponentType<IconProps> =
-  makeUSWDSIcon(FastForwardSvg)
+  public static FastForward: React.ComponentType<IconProps> =
+    makeUSWDSIcon(FastForwardSvg)
 
-export const IconFastRewind: React.ComponentType<IconProps> =
-  makeUSWDSIcon(FastRewindSvg)
+  public static FastRewind: React.ComponentType<IconProps> =
+    makeUSWDSIcon(FastRewindSvg)
 
-export const IconFavorite: React.ComponentType<IconProps> =
-  makeUSWDSIcon(FavoriteSvg)
+  public static Favorite: React.ComponentType<IconProps> =
+    makeUSWDSIcon(FavoriteSvg)
 
-export const IconFavoriteBorder: React.ComponentType<IconProps> =
-  makeUSWDSIcon(FavoriteBorderSvg)
+  public static FavoriteBorder: React.ComponentType<IconProps> =
+    makeUSWDSIcon(FavoriteBorderSvg)
 
-export const IconFileDownload: React.ComponentType<IconProps> =
-  makeUSWDSIcon(FileDownloadSvg)
+  public static FileDownload: React.ComponentType<IconProps> =
+    makeUSWDSIcon(FileDownloadSvg)
 
-export const IconFilePresent: React.ComponentType<IconProps> =
-  makeUSWDSIcon(FilePresentSvg)
+  public static FilePresent: React.ComponentType<IconProps> =
+    makeUSWDSIcon(FilePresentSvg)
 
-export const IconFileUpload: React.ComponentType<IconProps> =
-  makeUSWDSIcon(FileUploadSvg)
+  public static FileUpload: React.ComponentType<IconProps> =
+    makeUSWDSIcon(FileUploadSvg)
 
-export const IconFilterAlt: React.ComponentType<IconProps> =
-  makeUSWDSIcon(FilterAltSvg)
+  public static FilterAlt: React.ComponentType<IconProps> =
+    makeUSWDSIcon(FilterAltSvg)
 
-export const IconFilterList: React.ComponentType<IconProps> =
-  makeUSWDSIcon(FilterListSvg)
+  public static FilterList: React.ComponentType<IconProps> =
+    makeUSWDSIcon(FilterListSvg)
 
-export const IconFingerprint: React.ComponentType<IconProps> =
-  makeUSWDSIcon(FingerprintSvg)
+  public static Fingerprint: React.ComponentType<IconProps> =
+    makeUSWDSIcon(FingerprintSvg)
 
-export const IconFirstPage: React.ComponentType<IconProps> =
-  makeUSWDSIcon(FirstPageSvg)
+  public static FirstPage: React.ComponentType<IconProps> =
+    makeUSWDSIcon(FirstPageSvg)
 
-export const IconFlag: React.ComponentType<IconProps> = makeUSWDSIcon(FlagSvg)
+  public static Flag: React.ComponentType<IconProps> = makeUSWDSIcon(FlagSvg)
 
-export const IconFlickr: React.ComponentType<IconProps> =
-  makeUSWDSIcon(FlickrSvg)
+  public static Flickr: React.ComponentType<IconProps> =
+    makeUSWDSIcon(FlickrSvg)
 
-export const IconFlight: React.ComponentType<IconProps> =
-  makeUSWDSIcon(FlightSvg)
+  public static Flight: React.ComponentType<IconProps> =
+    makeUSWDSIcon(FlightSvg)
 
-export const IconFlooding: React.ComponentType<IconProps> =
-  makeUSWDSIcon(FloodingSvg)
+  public static Flooding: React.ComponentType<IconProps> =
+    makeUSWDSIcon(FloodingSvg)
 
-export const IconFolder: React.ComponentType<IconProps> =
-  makeUSWDSIcon(FolderSvg)
+  public static Folder: React.ComponentType<IconProps> =
+    makeUSWDSIcon(FolderSvg)
 
-export const IconFolderOpen: React.ComponentType<IconProps> =
-  makeUSWDSIcon(FolderOpenSvg)
+  public static FolderOpen: React.ComponentType<IconProps> =
+    makeUSWDSIcon(FolderOpenSvg)
 
-export const IconFormatQuote: React.ComponentType<IconProps> =
-  makeUSWDSIcon(FormatQuoteSvg)
+  public static FormatQuote: React.ComponentType<IconProps> =
+    makeUSWDSIcon(FormatQuoteSvg)
 
-export const IconFormatSize: React.ComponentType<IconProps> =
-  makeUSWDSIcon(FormatSizeSvg)
+  public static FormatSize: React.ComponentType<IconProps> =
+    makeUSWDSIcon(FormatSizeSvg)
 
-export const IconForum: React.ComponentType<IconProps> = makeUSWDSIcon(ForumSvg)
+  public static Forum: React.ComponentType<IconProps> = makeUSWDSIcon(ForumSvg)
 
-export const IconGithub: React.ComponentType<IconProps> =
-  makeUSWDSIcon(GithubSvg)
+  public static Github: React.ComponentType<IconProps> =
+    makeUSWDSIcon(GithubSvg)
 
-export const IconGridView: React.ComponentType<IconProps> =
-  makeUSWDSIcon(GridViewSvg)
+  public static GridView: React.ComponentType<IconProps> =
+    makeUSWDSIcon(GridViewSvg)
 
-export const IconGroupAdd: React.ComponentType<IconProps> =
-  makeUSWDSIcon(GroupAddSvg)
+  public static GroupAdd: React.ComponentType<IconProps> =
+    makeUSWDSIcon(GroupAddSvg)
 
-export const IconGroups: React.ComponentType<IconProps> =
-  makeUSWDSIcon(GroupsSvg)
+  public static Groups: React.ComponentType<IconProps> =
+    makeUSWDSIcon(GroupsSvg)
 
-export const IconHearing: React.ComponentType<IconProps> =
-  makeUSWDSIcon(HearingSvg)
+  public static Hearing: React.ComponentType<IconProps> =
+    makeUSWDSIcon(HearingSvg)
 
-export const IconHelp: React.ComponentType<IconProps> = makeUSWDSIcon(HelpSvg)
+  public static Help: React.ComponentType<IconProps> = makeUSWDSIcon(HelpSvg)
 
-export const IconHelpOutline: React.ComponentType<IconProps> =
-  makeUSWDSIcon(HelpOutlineSvg)
+  public static HelpOutline: React.ComponentType<IconProps> =
+    makeUSWDSIcon(HelpOutlineSvg)
 
-export const IconHighlightOff: React.ComponentType<IconProps> =
-  makeUSWDSIcon(HighlightOffSvg)
+  public static HighlightOff: React.ComponentType<IconProps> =
+    makeUSWDSIcon(HighlightOffSvg)
 
-export const IconHistory: React.ComponentType<IconProps> =
-  makeUSWDSIcon(HistorySvg)
+  public static History: React.ComponentType<IconProps> =
+    makeUSWDSIcon(HistorySvg)
 
-export const IconHome: React.ComponentType<IconProps> = makeUSWDSIcon(HomeSvg)
+  public static Home: React.ComponentType<IconProps> = makeUSWDSIcon(HomeSvg)
 
-export const IconHospital: React.ComponentType<IconProps> =
-  makeUSWDSIcon(HospitalSvg)
+  public static Hospital: React.ComponentType<IconProps> =
+    makeUSWDSIcon(HospitalSvg)
 
-export const IconHotel: React.ComponentType<IconProps> = makeUSWDSIcon(HotelSvg)
+  public static Hotel: React.ComponentType<IconProps> = makeUSWDSIcon(HotelSvg)
 
-export const IconHourglassEmpty: React.ComponentType<IconProps> =
-  makeUSWDSIcon(HourglassEmptySvg)
+  public static HourglassEmpty: React.ComponentType<IconProps> =
+    makeUSWDSIcon(HourglassEmptySvg)
 
-export const IconHurricane: React.ComponentType<IconProps> =
-  makeUSWDSIcon(HurricaneSvg)
+  public static Hurricane: React.ComponentType<IconProps> =
+    makeUSWDSIcon(HurricaneSvg)
 
-export const IconIdentification: React.ComponentType<IconProps> =
-  makeUSWDSIcon(IdentificationSvg)
+  public static Identification: React.ComponentType<IconProps> =
+    makeUSWDSIcon(IdentificationSvg)
 
-export const IconImage: React.ComponentType<IconProps> = makeUSWDSIcon(ImageSvg)
+  public static Image: React.ComponentType<IconProps> = makeUSWDSIcon(ImageSvg)
 
-export const IconInfo: React.ComponentType<IconProps> = makeUSWDSIcon(InfoSvg)
+  public static Info: React.ComponentType<IconProps> = makeUSWDSIcon(InfoSvg)
 
-export const IconInfoOutline: React.ComponentType<IconProps> =
-  makeUSWDSIcon(InfoOutlineSvg)
+  public static InfoOutline: React.ComponentType<IconProps> =
+    makeUSWDSIcon(InfoOutlineSvg)
 
-export const IconInsights: React.ComponentType<IconProps> =
-  makeUSWDSIcon(InsightsSvg)
+  public static Insights: React.ComponentType<IconProps> =
+    makeUSWDSIcon(InsightsSvg)
 
-export const IconInstagram: React.ComponentType<IconProps> =
-  makeUSWDSIcon(InstagramSvg)
+  public static Instagram: React.ComponentType<IconProps> =
+    makeUSWDSIcon(InstagramSvg)
 
-export const IconKeyboard: React.ComponentType<IconProps> =
-  makeUSWDSIcon(KeyboardSvg)
+  public static Keyboard: React.ComponentType<IconProps> =
+    makeUSWDSIcon(KeyboardSvg)
 
-export const IconLabel: React.ComponentType<IconProps> = makeUSWDSIcon(LabelSvg)
+  public static Label: React.ComponentType<IconProps> = makeUSWDSIcon(LabelSvg)
 
-export const IconLanguage: React.ComponentType<IconProps> =
-  makeUSWDSIcon(LanguageSvg)
+  public static Language: React.ComponentType<IconProps> =
+    makeUSWDSIcon(LanguageSvg)
 
-export const IconLastPage: React.ComponentType<IconProps> =
-  makeUSWDSIcon(LastPageSvg)
+  public static LastPage: React.ComponentType<IconProps> =
+    makeUSWDSIcon(LastPageSvg)
 
-export const IconLaunch: React.ComponentType<IconProps> =
-  makeUSWDSIcon(LaunchSvg)
+  public static Launch: React.ComponentType<IconProps> =
+    makeUSWDSIcon(LaunchSvg)
 
-export const IconLightbulb: React.ComponentType<IconProps> =
-  makeUSWDSIcon(LightbulbSvg)
+  public static Lightbulb: React.ComponentType<IconProps> =
+    makeUSWDSIcon(LightbulbSvg)
 
-export const IconLightbulbOutline: React.ComponentType<IconProps> =
-  makeUSWDSIcon(LightbulbOutlineSvg)
+  public static LightbulbOutline: React.ComponentType<IconProps> =
+    makeUSWDSIcon(LightbulbOutlineSvg)
 
-export const IconLink: React.ComponentType<IconProps> = makeUSWDSIcon(LinkSvg)
+  public static Link: React.ComponentType<IconProps> = makeUSWDSIcon(LinkSvg)
 
-export const IconLinkOff: React.ComponentType<IconProps> =
-  makeUSWDSIcon(LinkOffSvg)
+  public static LinkOff: React.ComponentType<IconProps> =
+    makeUSWDSIcon(LinkOffSvg)
 
-export const IconList: React.ComponentType<IconProps> = makeUSWDSIcon(ListSvg)
+  public static List: React.ComponentType<IconProps> = makeUSWDSIcon(ListSvg)
 
-export const IconLocalCafe: React.ComponentType<IconProps> =
-  makeUSWDSIcon(LocalCafeSvg)
+  public static LocalCafe: React.ComponentType<IconProps> =
+    makeUSWDSIcon(LocalCafeSvg)
 
-export const IconLocalFireDepartment: React.ComponentType<IconProps> =
-  makeUSWDSIcon(LocalFireDepartmentSvg)
+  public static LocalFireDepartment: React.ComponentType<IconProps> =
+    makeUSWDSIcon(LocalFireDepartmentSvg)
 
-export const IconLocalGasStation: React.ComponentType<IconProps> =
-  makeUSWDSIcon(LocalGasStationSvg)
+  public static LocalGasStation: React.ComponentType<IconProps> =
+    makeUSWDSIcon(LocalGasStationSvg)
 
-export const IconLocalGroceryStore: React.ComponentType<IconProps> =
-  makeUSWDSIcon(LocalGroceryStoreSvg)
+  public static LocalGroceryStore: React.ComponentType<IconProps> =
+    makeUSWDSIcon(LocalGroceryStoreSvg)
 
-export const IconLocalHospital: React.ComponentType<IconProps> =
-  makeUSWDSIcon(LocalHospitalSvg)
+  public static LocalHospital: React.ComponentType<IconProps> =
+    makeUSWDSIcon(LocalHospitalSvg)
 
-export const IconLocalLaundryService: React.ComponentType<IconProps> =
-  makeUSWDSIcon(LocalLaundryServiceSvg)
+  public static LocalLaundryService: React.ComponentType<IconProps> =
+    makeUSWDSIcon(LocalLaundryServiceSvg)
 
-export const IconLocalLibrary: React.ComponentType<IconProps> =
-  makeUSWDSIcon(LocalLibrarySvg)
+  public static LocalLibrary: React.ComponentType<IconProps> =
+    makeUSWDSIcon(LocalLibrarySvg)
 
-export const IconLocalOffer: React.ComponentType<IconProps> =
-  makeUSWDSIcon(LocalOfferSvg)
+  public static LocalOffer: React.ComponentType<IconProps> =
+    makeUSWDSIcon(LocalOfferSvg)
 
-export const IconLocalParking: React.ComponentType<IconProps> =
-  makeUSWDSIcon(LocalParkingSvg)
+  public static LocalParking: React.ComponentType<IconProps> =
+    makeUSWDSIcon(LocalParkingSvg)
 
-export const IconLocalPharmacy: React.ComponentType<IconProps> =
-  makeUSWDSIcon(LocalPharmacySvg)
+  public static LocalPharmacy: React.ComponentType<IconProps> =
+    makeUSWDSIcon(LocalPharmacySvg)
 
-export const IconLocalPolice: React.ComponentType<IconProps> =
-  makeUSWDSIcon(LocalPoliceSvg)
+  public static LocalPolice: React.ComponentType<IconProps> =
+    makeUSWDSIcon(LocalPoliceSvg)
 
-export const IconLocalTaxi: React.ComponentType<IconProps> =
-  makeUSWDSIcon(LocalTaxiSvg)
+  public static LocalTaxi: React.ComponentType<IconProps> =
+    makeUSWDSIcon(LocalTaxiSvg)
 
-export const IconLocationCity: React.ComponentType<IconProps> =
-  makeUSWDSIcon(LocationCitySvg)
+  public static LocationCity: React.ComponentType<IconProps> =
+    makeUSWDSIcon(LocationCitySvg)
 
-export const IconLocationOn: React.ComponentType<IconProps> =
-  makeUSWDSIcon(LocationOnSvg)
+  public static LocationOn: React.ComponentType<IconProps> =
+    makeUSWDSIcon(LocationOnSvg)
 
-export const IconLock: React.ComponentType<IconProps> = makeUSWDSIcon(LockSvg)
+  public static Lock: React.ComponentType<IconProps> = makeUSWDSIcon(LockSvg)
 
-export const IconLockOpen: React.ComponentType<IconProps> =
-  makeUSWDSIcon(LockOpenSvg)
+  public static LockOpen: React.ComponentType<IconProps> =
+    makeUSWDSIcon(LockOpenSvg)
 
-export const IconLockOutline: React.ComponentType<IconProps> =
-  makeUSWDSIcon(LockOutlineSvg)
+  public static LockOutline: React.ComponentType<IconProps> =
+    makeUSWDSIcon(LockOutlineSvg)
 
-export const IconLogin: React.ComponentType<IconProps> = makeUSWDSIcon(LoginSvg)
+  public static Login: React.ComponentType<IconProps> = makeUSWDSIcon(LoginSvg)
 
-export const IconLogout: React.ComponentType<IconProps> =
-  makeUSWDSIcon(LogoutSvg)
+  public static Logout: React.ComponentType<IconProps> =
+    makeUSWDSIcon(LogoutSvg)
 
-export const IconLoop: React.ComponentType<IconProps> = makeUSWDSIcon(LoopSvg)
+  public static Loop: React.ComponentType<IconProps> = makeUSWDSIcon(LoopSvg)
 
-export const IconMail: React.ComponentType<IconProps> = makeUSWDSIcon(MailSvg)
+  public static Mail: React.ComponentType<IconProps> = makeUSWDSIcon(MailSvg)
 
-export const IconMailOutline: React.ComponentType<IconProps> =
-  makeUSWDSIcon(MailOutlineSvg)
+  public static MailOutline: React.ComponentType<IconProps> =
+    makeUSWDSIcon(MailOutlineSvg)
 
-export const IconMap: React.ComponentType<IconProps> = makeUSWDSIcon(MapSvg)
+  public static Map: React.ComponentType<IconProps> = makeUSWDSIcon(MapSvg)
 
-export const IconMasks: React.ComponentType<IconProps> = makeUSWDSIcon(MasksSvg)
+  public static Masks: React.ComponentType<IconProps> = makeUSWDSIcon(MasksSvg)
 
-export const IconMedicalServices: React.ComponentType<IconProps> =
-  makeUSWDSIcon(MedicalServicesSvg)
+  public static MedicalServices: React.ComponentType<IconProps> =
+    makeUSWDSIcon(MedicalServicesSvg)
 
-export const IconMenu: React.ComponentType<IconProps> = makeUSWDSIcon(MenuSvg)
+  public static Menu: React.ComponentType<IconProps> = makeUSWDSIcon(MenuSvg)
 
-export const IconMilitaryTech: React.ComponentType<IconProps> =
-  makeUSWDSIcon(MilitaryTechSvg)
+  public static MilitaryTech: React.ComponentType<IconProps> =
+    makeUSWDSIcon(MilitaryTechSvg)
 
-export const IconMoreHoriz: React.ComponentType<IconProps> =
-  makeUSWDSIcon(MoreHorizSvg)
+  public static MoreHoriz: React.ComponentType<IconProps> =
+    makeUSWDSIcon(MoreHorizSvg)
 
-export const IconMoreVert: React.ComponentType<IconProps> =
-  makeUSWDSIcon(MoreVertSvg)
+  public static MoreVert: React.ComponentType<IconProps> =
+    makeUSWDSIcon(MoreVertSvg)
 
-export const IconMyLocation: React.ComponentType<IconProps> =
-  makeUSWDSIcon(MyLocationSvg)
+  public static MyLocation: React.ComponentType<IconProps> =
+    makeUSWDSIcon(MyLocationSvg)
 
-export const IconNavigateBefore: React.ComponentType<IconProps> =
-  makeUSWDSIcon(NavigateBeforeSvg)
+  public static NavigateBefore: React.ComponentType<IconProps> =
+    makeUSWDSIcon(NavigateBeforeSvg)
 
-export const IconNavigateNext: React.ComponentType<IconProps> =
-  makeUSWDSIcon(NavigateNextSvg)
+  public static NavigateNext: React.ComponentType<IconProps> =
+    makeUSWDSIcon(NavigateNextSvg)
 
-export const IconNavigateFarBefore: React.ComponentType<IconProps> =
-  makeUSWDSIcon(NavigateFarBeforeSvg)
+  public static NavigateFarBefore: React.ComponentType<IconProps> =
+    makeUSWDSIcon(NavigateFarBeforeSvg)
 
-export const IconNavigateFarNext: React.ComponentType<IconProps> =
-  makeUSWDSIcon(NavigateFarNextSvg)
+  public static NavigateFarNext: React.ComponentType<IconProps> =
+    makeUSWDSIcon(NavigateFarNextSvg)
 
-export const IconNearMe: React.ComponentType<IconProps> =
-  makeUSWDSIcon(NearMeSvg)
+  public static NearMe: React.ComponentType<IconProps> =
+    makeUSWDSIcon(NearMeSvg)
 
-export const IconNotifications: React.ComponentType<IconProps> =
-  makeUSWDSIcon(NotificationsSvg)
+  public static Notifications: React.ComponentType<IconProps> =
+    makeUSWDSIcon(NotificationsSvg)
 
-export const IconNotificationsActive: React.ComponentType<IconProps> =
-  makeUSWDSIcon(NotificationsActiveSvg)
+  public static NotificationsActive: React.ComponentType<IconProps> =
+    makeUSWDSIcon(NotificationsActiveSvg)
 
-export const IconNotificationsNone: React.ComponentType<IconProps> =
-  makeUSWDSIcon(NotificationsNoneSvg)
+  public static NotificationsNone: React.ComponentType<IconProps> =
+    makeUSWDSIcon(NotificationsNoneSvg)
 
-export const IconNotificationsOff: React.ComponentType<IconProps> =
-  makeUSWDSIcon(NotificationsOffSvg)
+  public static NotificationsOff: React.ComponentType<IconProps> =
+    makeUSWDSIcon(NotificationsOffSvg)
 
-export const IconPark: React.ComponentType<IconProps> = makeUSWDSIcon(ParkSvg)
+  public static Park: React.ComponentType<IconProps> = makeUSWDSIcon(ParkSvg)
 
-export const IconPeople: React.ComponentType<IconProps> =
-  makeUSWDSIcon(PeopleSvg)
+  public static People: React.ComponentType<IconProps> =
+    makeUSWDSIcon(PeopleSvg)
 
-export const IconPerson: React.ComponentType<IconProps> =
-  makeUSWDSIcon(PersonSvg)
+  public static Person: React.ComponentType<IconProps> =
+    makeUSWDSIcon(PersonSvg)
 
-export const IconPets: React.ComponentType<IconProps> = makeUSWDSIcon(PetsSvg)
+  public static Pets: React.ComponentType<IconProps> = makeUSWDSIcon(PetsSvg)
 
-export const IconPhone: React.ComponentType<IconProps> = makeUSWDSIcon(PhoneSvg)
+  public static Phone: React.ComponentType<IconProps> = makeUSWDSIcon(PhoneSvg)
 
-export const IconPhotoCamera: React.ComponentType<IconProps> =
-  makeUSWDSIcon(PhotoCameraSvg)
+  public static PhotoCamera: React.ComponentType<IconProps> =
+    makeUSWDSIcon(PhotoCameraSvg)
 
-export const IconPrint: React.ComponentType<IconProps> = makeUSWDSIcon(PrintSvg)
+  public static Print: React.ComponentType<IconProps> = makeUSWDSIcon(PrintSvg)
 
-export const IconPriorityHigh: React.ComponentType<IconProps> =
-  makeUSWDSIcon(PriorityHighSvg)
+  public static PriorityHigh: React.ComponentType<IconProps> =
+    makeUSWDSIcon(PriorityHighSvg)
 
-export const IconPublic: React.ComponentType<IconProps> =
-  makeUSWDSIcon(PublicSvg)
+  public static Public: React.ComponentType<IconProps> =
+    makeUSWDSIcon(PublicSvg)
 
-export const IconPushPin: React.ComponentType<IconProps> =
-  makeUSWDSIcon(PushPinSvg)
+  public static PushPin: React.ComponentType<IconProps> =
+    makeUSWDSIcon(PushPinSvg)
 
-export const IconRadioButtonUnchecked: React.ComponentType<IconProps> =
-  makeUSWDSIcon(RadioButtonUncheckedSvg)
+  public static RadioButtonUnchecked: React.ComponentType<IconProps> =
+    makeUSWDSIcon(RadioButtonUncheckedSvg)
 
-export const IconRain: React.ComponentType<IconProps> = makeUSWDSIcon(RainSvg)
+  public static Rain: React.ComponentType<IconProps> = makeUSWDSIcon(RainSvg)
 
-export const IconReduceCapacity: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ReduceCapacitySvg)
+  public static ReduceCapacity: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ReduceCapacitySvg)
 
-export const IconRemove: React.ComponentType<IconProps> =
-  makeUSWDSIcon(RemoveSvg)
+  public static Remove: React.ComponentType<IconProps> =
+    makeUSWDSIcon(RemoveSvg)
 
-export const IconReport: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ReportSvg)
+  public static Report: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ReportSvg)
 
-export const IconRestaurant: React.ComponentType<IconProps> =
-  makeUSWDSIcon(RestaurantSvg)
+  public static Restaurant: React.ComponentType<IconProps> =
+    makeUSWDSIcon(RestaurantSvg)
 
-export const IconRssFeed: React.ComponentType<IconProps> =
-  makeUSWDSIcon(RssFeedSvg)
+  public static RssFeed: React.ComponentType<IconProps> =
+    makeUSWDSIcon(RssFeedSvg)
 
-export const IconSafetyDivider: React.ComponentType<IconProps> =
-  makeUSWDSIcon(SafetyDividerSvg)
+  public static SafetyDivider: React.ComponentType<IconProps> =
+    makeUSWDSIcon(SafetyDividerSvg)
 
-export const IconSanitizer: React.ComponentType<IconProps> =
-  makeUSWDSIcon(SanitizerSvg)
+  public static Sanitizer: React.ComponentType<IconProps> =
+    makeUSWDSIcon(SanitizerSvg)
 
-export const IconSaveAlt: React.ComponentType<IconProps> =
-  makeUSWDSIcon(SaveAltSvg)
+  public static SaveAlt: React.ComponentType<IconProps> =
+    makeUSWDSIcon(SaveAltSvg)
 
-export const IconSevereWeather: React.ComponentType<IconProps> =
-  makeUSWDSIcon(SevereWeatherSvg)
+  public static SevereWeather: React.ComponentType<IconProps> =
+    makeUSWDSIcon(SevereWeatherSvg)
 
-export const IconSchedule: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ScheduleSvg)
+  public static Schedule: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ScheduleSvg)
 
-export const IconSchool: React.ComponentType<IconProps> =
-  makeUSWDSIcon(SchoolSvg)
+  public static School: React.ComponentType<IconProps> =
+    makeUSWDSIcon(SchoolSvg)
 
-export const IconScience: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ScienceSvg)
+  public static Science: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ScienceSvg)
 
-export const IconSearch: React.ComponentType<IconProps> =
-  makeUSWDSIcon(SearchSvg)
+  public static Search: React.ComponentType<IconProps> =
+    makeUSWDSIcon(SearchSvg)
 
-export const IconSecurity: React.ComponentType<IconProps> =
-  makeUSWDSIcon(SecuritySvg)
+  public static Security: React.ComponentType<IconProps> =
+    makeUSWDSIcon(SecuritySvg)
 
-export const IconSend: React.ComponentType<IconProps> = makeUSWDSIcon(SendSvg)
+  public static Send: React.ComponentType<IconProps> = makeUSWDSIcon(SendSvg)
 
-export const IconSentimentDissatisfied: React.ComponentType<IconProps> =
-  makeUSWDSIcon(SentimentDissatisfiedSvg)
+  public static SentimentDissatisfied: React.ComponentType<IconProps> =
+    makeUSWDSIcon(SentimentDissatisfiedSvg)
 
-export const IconSentimentNeutral: React.ComponentType<IconProps> =
-  makeUSWDSIcon(SentimentNeutralSvg)
+  public static SentimentNeutral: React.ComponentType<IconProps> =
+    makeUSWDSIcon(SentimentNeutralSvg)
 
-export const IconSentimentSatisfied: React.ComponentType<IconProps> =
-  makeUSWDSIcon(SentimentSatisfiedSvg)
+  public static SentimentSatisfied: React.ComponentType<IconProps> =
+    makeUSWDSIcon(SentimentSatisfiedSvg)
 
-export const IconSentimentSatisfiedAlt: React.ComponentType<IconProps> =
-  makeUSWDSIcon(SentimentSatisfiedAltSvg)
+  public static SentimentSatisfiedAlt: React.ComponentType<IconProps> =
+    makeUSWDSIcon(SentimentSatisfiedAltSvg)
 
-export const IconSentimentVeryDissatisfied: React.ComponentType<IconProps> =
-  makeUSWDSIcon(SentimentVeryDissatisfiedSvg)
+  public static SentimentVeryDissatisfied: React.ComponentType<IconProps> =
+    makeUSWDSIcon(SentimentVeryDissatisfiedSvg)
 
-export const IconSettings: React.ComponentType<IconProps> =
-  makeUSWDSIcon(SettingsSvg)
+  public static Settings: React.ComponentType<IconProps> =
+    makeUSWDSIcon(SettingsSvg)
 
-export const IconShare: React.ComponentType<IconProps> = makeUSWDSIcon(ShareSvg)
+  public static Share: React.ComponentType<IconProps> = makeUSWDSIcon(ShareSvg)
 
-export const IconShield: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ShieldSvg)
+  public static Shield: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ShieldSvg)
 
-export const IconShoppingBasket: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ShoppingBasketSvg)
+  public static ShoppingBasket: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ShoppingBasketSvg)
 
-export const IconSnow: React.ComponentType<IconProps> = makeUSWDSIcon(SnowSvg)
+  public static Snow: React.ComponentType<IconProps> = makeUSWDSIcon(SnowSvg)
 
-export const IconSoap: React.ComponentType<IconProps> = makeUSWDSIcon(SoapSvg)
+  public static Soap: React.ComponentType<IconProps> = makeUSWDSIcon(SoapSvg)
 
-export const IconSocialDistance: React.ComponentType<IconProps> =
-  makeUSWDSIcon(SocialDistanceSvg)
+  public static SocialDistance: React.ComponentType<IconProps> =
+    makeUSWDSIcon(SocialDistanceSvg)
 
-export const IconSortArrow: React.ComponentType<IconProps> =
-  makeUSWDSIcon(SortArrowSvg)
+  public static SortArrow: React.ComponentType<IconProps> =
+    makeUSWDSIcon(SortArrowSvg)
 
-export const IconSpellcheck: React.ComponentType<IconProps> =
-  makeUSWDSIcon(SpellcheckSvg)
+  public static Spellcheck: React.ComponentType<IconProps> =
+    makeUSWDSIcon(SpellcheckSvg)
 
-export const IconStar: React.ComponentType<IconProps> = makeUSWDSIcon(StarSvg)
+  public static Star: React.ComponentType<IconProps> = makeUSWDSIcon(StarSvg)
 
-export const IconStarHalf: React.ComponentType<IconProps> =
-  makeUSWDSIcon(StarHalfSvg)
+  public static StarHalf: React.ComponentType<IconProps> =
+    makeUSWDSIcon(StarHalfSvg)
 
-export const IconStarOutline: React.ComponentType<IconProps> =
-  makeUSWDSIcon(StarOutlineSvg)
+  public static StarOutline: React.ComponentType<IconProps> =
+    makeUSWDSIcon(StarOutlineSvg)
 
-export const IconStore: React.ComponentType<IconProps> = makeUSWDSIcon(StoreSvg)
+  public static Store: React.ComponentType<IconProps> = makeUSWDSIcon(StoreSvg)
 
-export const IconSupport: React.ComponentType<IconProps> =
-  makeUSWDSIcon(SupportSvg)
+  public static Support: React.ComponentType<IconProps> =
+    makeUSWDSIcon(SupportSvg)
 
-export const IconSupportAgent: React.ComponentType<IconProps> =
-  makeUSWDSIcon(SupportAgentSvg)
+  public static SupportAgent: React.ComponentType<IconProps> =
+    makeUSWDSIcon(SupportAgentSvg)
 
-export const IconTextFields: React.ComponentType<IconProps> =
-  makeUSWDSIcon(TextFieldsSvg)
+  public static TextFields: React.ComponentType<IconProps> =
+    makeUSWDSIcon(TextFieldsSvg)
 
-export const IconThumbDownAlt: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ThumbDownAltSvg)
+  public static ThumbDownAlt: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ThumbDownAltSvg)
 
-export const IconThumbUpAlt: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ThumbUpAltSvg)
+  public static ThumbUpAlt: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ThumbUpAltSvg)
 
-export const IconTimer: React.ComponentType<IconProps> = makeUSWDSIcon(TimerSvg)
+  public static Timer: React.ComponentType<IconProps> = makeUSWDSIcon(TimerSvg)
 
-export const IconToggleOff: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ToggleOffSvg)
+  public static ToggleOff: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ToggleOffSvg)
 
-export const IconToggleOn: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ToggleOnSvg)
+  public static ToggleOn: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ToggleOnSvg)
 
-export const IconTopic: React.ComponentType<IconProps> = makeUSWDSIcon(TopicSvg)
+  public static Topic: React.ComponentType<IconProps> = makeUSWDSIcon(TopicSvg)
 
-export const IconTornado: React.ComponentType<IconProps> =
-  makeUSWDSIcon(TornadoSvg)
+  public static Tornado: React.ComponentType<IconProps> =
+    makeUSWDSIcon(TornadoSvg)
 
-export const IconTranslate: React.ComponentType<IconProps> =
-  makeUSWDSIcon(TranslateSvg)
+  public static Translate: React.ComponentType<IconProps> =
+    makeUSWDSIcon(TranslateSvg)
 
-export const IconTrendingDown: React.ComponentType<IconProps> =
-  makeUSWDSIcon(TrendingDownSvg)
+  public static TrendingDown: React.ComponentType<IconProps> =
+    makeUSWDSIcon(TrendingDownSvg)
 
-export const IconTrendingUp: React.ComponentType<IconProps> =
-  makeUSWDSIcon(TrendingUpSvg)
+  public static TrendingUp: React.ComponentType<IconProps> =
+    makeUSWDSIcon(TrendingUpSvg)
 
-export const IconTwitter: React.ComponentType<IconProps> =
-  makeUSWDSIcon(TwitterSvg)
+  public static Twitter: React.ComponentType<IconProps> =
+    makeUSWDSIcon(TwitterSvg)
 
-export const IconUndo: React.ComponentType<IconProps> = makeUSWDSIcon(UndoSvg)
+  public static Undo: React.ComponentType<IconProps> = makeUSWDSIcon(UndoSvg)
 
-export const IconUnfoldLess: React.ComponentType<IconProps> =
-  makeUSWDSIcon(UnfoldLessSvg)
+  public static UnfoldLess: React.ComponentType<IconProps> =
+    makeUSWDSIcon(UnfoldLessSvg)
 
-export const IconUnfoldMore: React.ComponentType<IconProps> =
-  makeUSWDSIcon(UnfoldMoreSvg)
+  public static UnfoldMore: React.ComponentType<IconProps> =
+    makeUSWDSIcon(UnfoldMoreSvg)
 
-export const IconUpdate: React.ComponentType<IconProps> =
-  makeUSWDSIcon(UpdateSvg)
+  public static Update: React.ComponentType<IconProps> =
+    makeUSWDSIcon(UpdateSvg)
 
-export const IconUploadFile: React.ComponentType<IconProps> =
-  makeUSWDSIcon(UploadFileSvg)
+  public static UploadFile: React.ComponentType<IconProps> =
+    makeUSWDSIcon(UploadFileSvg)
 
-export const IconVerified: React.ComponentType<IconProps> =
-  makeUSWDSIcon(VerifiedSvg)
+  public static Verified: React.ComponentType<IconProps> =
+    makeUSWDSIcon(VerifiedSvg)
 
-export const IconVerifiedUser: React.ComponentType<IconProps> =
-  makeUSWDSIcon(VerifiedUserSvg)
+  public static VerifiedUser: React.ComponentType<IconProps> =
+    makeUSWDSIcon(VerifiedUserSvg)
 
-export const IconVisibility: React.ComponentType<IconProps> =
-  makeUSWDSIcon(VisibilitySvg)
+  public static Visibility: React.ComponentType<IconProps> =
+    makeUSWDSIcon(VisibilitySvg)
 
-/** @deprecated, use IconVisibility */
-export const IconVisiblity: React.ComponentType<IconProps> =
-  withDeprecationWarning(
-    IconVisibility,
-    '`IconVisiblity` is deprecated and will be removed in the next major release. Please use `IconVisibility`.'
-  )
+  public static VisibilityOff: React.ComponentType<IconProps> =
+    makeUSWDSIcon(VisibilityOffSvg)
 
-export const IconVisibilityOff: React.ComponentType<IconProps> =
-  makeUSWDSIcon(VisibilityOffSvg)
+  public static VolumeOff: React.ComponentType<IconProps> =
+    makeUSWDSIcon(VolumeOffSvg)
 
-export const IconVolumeOff: React.ComponentType<IconProps> =
-  makeUSWDSIcon(VolumeOffSvg)
+  public static Warning: React.ComponentType<IconProps> =
+    makeUSWDSIcon(WarningSvg)
 
-export const IconWarning: React.ComponentType<IconProps> =
-  makeUSWDSIcon(WarningSvg)
+  public static Wash: React.ComponentType<IconProps> = makeUSWDSIcon(WashSvg)
 
-export const IconWash: React.ComponentType<IconProps> = makeUSWDSIcon(WashSvg)
+  public static Wifi: React.ComponentType<IconProps> = makeUSWDSIcon(WifiSvg)
 
-export const IconWifi: React.ComponentType<IconProps> = makeUSWDSIcon(WifiSvg)
+  public static Work: React.ComponentType<IconProps> = makeUSWDSIcon(WorkSvg)
 
-export const IconWork: React.ComponentType<IconProps> = makeUSWDSIcon(WorkSvg)
+  public static Youtube: React.ComponentType<IconProps> =
+    makeUSWDSIcon(YoutubeSvg)
 
-export const IconYoutube: React.ComponentType<IconProps> =
-  makeUSWDSIcon(YoutubeSvg)
+  public static ZoomIn: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ZoomInSvg)
 
-export const IconZoomIn: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ZoomInSvg)
+  public static ZoomOutMap: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ZoomOutMapSvg)
 
-export const IconZoomOutMap: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ZoomOutMapSvg)
+  public static ZoomOut: React.ComponentType<IconProps> =
+    makeUSWDSIcon(ZoomOutSvg)
+}
 
-export const IconZoomOut: React.ComponentType<IconProps> =
-  makeUSWDSIcon(ZoomOutSvg)
+export default Icon
diff --git a/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx b/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx
index e695bbbad7..35f96faa42 100644
--- a/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx
+++ b/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { IconClose } from '../../Icon/Icons'
+import { Icon } from '../../Icon/Icons'
 import { Button } from '../../Button/Button'
 
 interface ModalCloseButtonProps {
@@ -18,8 +18,9 @@ export const ModalCloseButton = ({
       aria-label="Close this window"
       onClick={handleClose}
       data-close-modal
-      type="button">
-      <IconClose aria-hidden="true" />
+      type="button"
+    >
+      <Icon.Close aria-hidden="true" />
     </Button>
   )
 }
diff --git a/src/index.ts b/src/index.ts
index a11bd565c8..c524acbd87 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -69,7 +69,7 @@ export { IconListItem } from './components/IconList/IconListItem/IconListItem'
 export { IconListTitle } from './components/IconList/IconListTitle/IconListTitle'
 
 // Icons
-export * from './components/Icon/Icons'
+export { Icon } from './components/Icon/Icons'
 
 /** Identifier Components */
 export { Identifier } from './components/Identifier/Identifier/Identifier'

From 6a3f3abb4f07625b0645a0c05e6a2f35eb950cc3 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Mon, 25 Oct 2021 14:44:46 -0400
Subject: [PATCH 05/12] Update IconList stories to use new syntax

---
 src/components/IconList/IconList.stories.tsx | 40 +++++++++-----------
 1 file changed, 17 insertions(+), 23 deletions(-)

diff --git a/src/components/IconList/IconList.stories.tsx b/src/components/IconList/IconList.stories.tsx
index 0d248557f8..8dc5429a1a 100644
--- a/src/components/IconList/IconList.stories.tsx
+++ b/src/components/IconList/IconList.stories.tsx
@@ -1,11 +1,5 @@
 import React, { ReactElement } from 'react'
-import {
-  IconAttachMoney,
-  IconCancel,
-  IconCheckCircle,
-  IconHelp,
-  IconThumbUpAlt,
-} from '../Icon/Icons'
+import { Icon } from '../Icon/Icons'
 import { IconList } from './IconList'
 import { IconListItem } from './IconListItem/IconListItem'
 import { IconListTitle } from './IconListTitle/IconListTitle'
@@ -26,13 +20,13 @@ Source: https://designsystem.digital.gov/components/icon-list/
 
 export const Default = (): ReactElement => (
   <IconList>
-    <IconListItem icon={IconCheckCircle} iconDivClassName="text-green">
+    <IconListItem icon={Icon.CheckCircle} iconDivClassName="text-green">
       Wash your hands for 20 seconds with soap
     </IconListItem>
-    <IconListItem icon={IconCheckCircle} iconDivClassName="text-green">
+    <IconListItem icon={Icon.CheckCircle} iconDivClassName="text-green">
       Stay six feet away from others
     </IconListItem>
-    <IconListItem icon={IconCancel} iconDivClassName="text-red">
+    <IconListItem icon={Icon.Cancel} iconDivClassName="text-red">
       Avoid large gatherings
     </IconListItem>
   </IconList>
@@ -42,21 +36,21 @@ export const SimpleContent = (): ReactElement => (
   <>
     <p className="margin-bottom-2">Benefits of joining Global Entry program:</p>
     <IconList className="usa-icon-list--primary">
-      <IconListItem icon={IconThumbUpAlt}>No processing lines</IconListItem>
-      <IconListItem icon={IconThumbUpAlt}>
+      <IconListItem icon={Icon.ThumbUpAlt}>No processing lines</IconListItem>
+      <IconListItem icon={Icon.ThumbUpAlt}>
         Access to expedited entry benefits in other countries
       </IconListItem>
-      <IconListItem icon={IconThumbUpAlt}>
+      <IconListItem icon={Icon.ThumbUpAlt}>
         Available at major U.S. airports
       </IconListItem>
-      <IconListItem icon={IconThumbUpAlt}>Reduced wait times</IconListItem>
+      <IconListItem icon={Icon.ThumbUpAlt}>Reduced wait times</IconListItem>
     </IconList>
   </>
 )
 
 export const RichContent = (): ReactElement => (
   <IconList>
-    <IconListItem icon={IconCheckCircle} iconDivClassName="text-ink">
+    <IconListItem icon={Icon.CheckCircle} iconDivClassName="text-ink">
       <IconListTitle type="h3">Donate cash when possible.</IconListTitle>
       <p>
         Financial contributions to recognized disaster relief organizations are
@@ -66,7 +60,7 @@ export const RichContent = (): ReactElement => (
         businesses local to the disaster, which supports economic recovery.
       </p>
     </IconListItem>
-    <IconListItem icon={IconCheckCircle} iconDivClassName="text-ink">
+    <IconListItem icon={Icon.CheckCircle} iconDivClassName="text-ink">
       <IconListTitle type="h3">
         Confirm what donations are needed.
       </IconListTitle>
@@ -76,7 +70,7 @@ export const RichContent = (): ReactElement => (
         transportation and warehouse space.
       </p>
     </IconListItem>
-    <IconListItem icon={IconCheckCircle} iconDivClassName="text-ink">
+    <IconListItem icon={Icon.CheckCircle} iconDivClassName="text-ink">
       <IconListTitle type="h3">
         Talk to trusted organizations about volunteering.
       </IconListTitle>
@@ -98,7 +92,7 @@ export const CustomSizeWithRichContent = (): ReactElement => (
       spending more time at home.
     </p>
     <IconList className="usa-icon-list--size-lg">
-      <IconListItem icon={IconAttachMoney} iconDivClassName="text-green">
+      <IconListItem icon={Icon.AttachMoney} iconDivClassName="text-green">
         <IconListTitle type="h3">Let the sun shine.</IconListTitle>
         <p>
           On sunny days, open your curtains to allow the sun to naturally warm
@@ -107,7 +101,7 @@ export const CustomSizeWithRichContent = (): ReactElement => (
           your curtains to help keep your house cool.
         </p>
       </IconListItem>
-      <IconListItem icon={IconAttachMoney} iconDivClassName="text-green">
+      <IconListItem icon={Icon.AttachMoney} iconDivClassName="text-green">
         <IconListTitle type="h3">Adjust your schedule.</IconListTitle>
         <p>
           Instead of running high-energy-use appliances such as dishwashers and
@@ -116,7 +110,7 @@ export const CustomSizeWithRichContent = (): ReactElement => (
           at off-peak times, which will help reduce your costs.
         </p>
       </IconListItem>
-      <IconListItem icon={IconAttachMoney} iconDivClassName="text-green">
+      <IconListItem icon={Icon.AttachMoney} iconDivClassName="text-green">
         <IconListTitle type="h3">Fill it up.</IconListTitle>
         <p>
           Wash full loads, whether it’s clothes or dishes. Washing multiple
@@ -131,15 +125,15 @@ export const CustomSizeWithRichContent = (): ReactElement => (
 
 export const CustomSize = (): ReactElement => (
   <IconList className="usa-icon-list--size-lg">
-    <IconListItem icon={IconHelp} iconDivClassName="text-blue">
+    <IconListItem icon={Icon.Help} iconDivClassName="text-blue">
       <span className="text-bold">Timing.</span> Is now the right time to start
       a business?
     </IconListItem>
-    <IconListItem icon={IconHelp} iconDivClassName="text-blue">
+    <IconListItem icon={Icon.Help} iconDivClassName="text-blue">
       <span className="text-bold">Funding.</span> Do I have enough money to
       launch a business?
     </IconListItem>
-    <IconListItem icon={IconHelp} iconDivClassName="text-blue">
+    <IconListItem icon={Icon.Help} iconDivClassName="text-blue">
       <span className="text-bold">Need.</span> Will this business fill a real
       need for my customers?
     </IconListItem>

From 6330b71aeab9274d21854e50b85d368f96b95e2b Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Tue, 26 Oct 2021 10:18:58 -0400
Subject: [PATCH 06/12] Extract components instead of encapsulating

---
 src/components/IconList/IconList.stories.tsx  | 224 ++++++++++++------
 .../IconList/IconListItem/IconListItem.tsx    |  27 +--
 .../IconListItemContent/IconListContent.tsx   |  18 ++
 .../IconListItemIcon/IconListItemIcon.tsx     |  16 ++
 4 files changed, 186 insertions(+), 99 deletions(-)
 create mode 100644 src/components/IconList/IconListItemContent/IconListContent.tsx
 create mode 100644 src/components/IconList/IconListItemIcon/IconListItemIcon.tsx

diff --git a/src/components/IconList/IconList.stories.tsx b/src/components/IconList/IconList.stories.tsx
index 8dc5429a1a..4c0886a0e1 100644
--- a/src/components/IconList/IconList.stories.tsx
+++ b/src/components/IconList/IconList.stories.tsx
@@ -2,7 +2,9 @@ import React, { ReactElement } from 'react'
 import { Icon } from '../Icon/Icons'
 import { IconList } from './IconList'
 import { IconListItem } from './IconListItem/IconListItem'
+import { IconListItemIcon } from './IconListItemIcon/IconListItemIcon'
 import { IconListTitle } from './IconListTitle/IconListTitle'
+import { IconListContent } from './IconListItemContent/IconListContent'
 
 export default {
   title: 'Components/Icon list',
@@ -20,14 +22,25 @@ Source: https://designsystem.digital.gov/components/icon-list/
 
 export const Default = (): ReactElement => (
   <IconList>
-    <IconListItem icon={Icon.CheckCircle} iconDivClassName="text-green">
-      Wash your hands for 20 seconds with soap
+    <IconListItem>
+      <IconListItemIcon className="text-green">
+        <Icon.CheckCircle />
+      </IconListItemIcon>
+      <IconListContent>
+        Wash your hands for 20 seconds with soap
+      </IconListContent>
     </IconListItem>
-    <IconListItem icon={Icon.CheckCircle} iconDivClassName="text-green">
-      Stay six feet away from others
+    <IconListItem>
+      <IconListItemIcon className="text-green">
+        <Icon.CheckCircle />
+      </IconListItemIcon>
+      <IconListContent>Stay six feet away from others</IconListContent>
     </IconListItem>
-    <IconListItem icon={Icon.Cancel} iconDivClassName="text-red">
-      Avoid large gatherings
+    <IconListItem>
+      <IconListItemIcon className="text-red">
+        <Icon.Cancel />
+      </IconListItemIcon>
+      <IconListContent>Avoid large gatherings</IconListContent>
     </IconListItem>
   </IconList>
 )
@@ -36,51 +49,84 @@ export const SimpleContent = (): ReactElement => (
   <>
     <p className="margin-bottom-2">Benefits of joining Global Entry program:</p>
     <IconList className="usa-icon-list--primary">
-      <IconListItem icon={Icon.ThumbUpAlt}>No processing lines</IconListItem>
-      <IconListItem icon={Icon.ThumbUpAlt}>
-        Access to expedited entry benefits in other countries
+      <IconListItem>
+        <IconListItemIcon>
+          <Icon.ThumbUpAlt />
+        </IconListItemIcon>
+        <IconListContent>No processing lines</IconListContent>
       </IconListItem>
-      <IconListItem icon={Icon.ThumbUpAlt}>
-        Available at major U.S. airports
+      <IconListItem>
+        <IconListItemIcon>
+          <Icon.ThumbUpAlt />
+        </IconListItemIcon>
+        <IconListContent>
+          Access to expedited entry benefits in other countries
+        </IconListContent>
+      </IconListItem>
+      <IconListItem>
+        <IconListItemIcon>
+          <Icon.ThumbUpAlt />
+        </IconListItemIcon>
+        <IconListContent>Available at major U.S. airports</IconListContent>
+      </IconListItem>
+      <IconListItem>
+        <IconListItemIcon>
+          <Icon.ThumbUpAlt />
+        </IconListItemIcon>
+        <IconListContent>Reduced wait times</IconListContent>
       </IconListItem>
-      <IconListItem icon={Icon.ThumbUpAlt}>Reduced wait times</IconListItem>
     </IconList>
   </>
 )
 
 export const RichContent = (): ReactElement => (
   <IconList>
-    <IconListItem icon={Icon.CheckCircle} iconDivClassName="text-ink">
-      <IconListTitle type="h3">Donate cash when possible.</IconListTitle>
-      <p>
-        Financial contributions to recognized disaster relief organizations are
-        the fastest, most flexible and most effective method of donating.
-        Organizations on the ground know what items and quantities are needed,
-        often buy in bulk with discounts and, if possible, purchase through
-        businesses local to the disaster, which supports economic recovery.
-      </p>
+    <IconListItem>
+      <IconListItemIcon className="text-ink">
+        <Icon.CheckCircle />
+      </IconListItemIcon>
+      <IconListContent>
+        <IconListTitle type="h3">Donate cash when possible.</IconListTitle>
+        <p>
+          Financial contributions to recognized disaster relief organizations
+          are the fastest, most flexible and most effective method of donating.
+          Organizations on the ground know what items and quantities are needed,
+          often buy in bulk with discounts and, if possible, purchase through
+          businesses local to the disaster, which supports economic recovery.
+        </p>
+      </IconListContent>
     </IconListItem>
-    <IconListItem icon={Icon.CheckCircle} iconDivClassName="text-ink">
-      <IconListTitle type="h3">
-        Confirm what donations are needed.
-      </IconListTitle>
-      <p>
-        Unneeded and unsolicited goods burden local organizations’ ability to
-        meet survivors’ confirmed needs, drawing away valuable volunteer labor,
-        transportation and warehouse space.
-      </p>
+    <IconListItem>
+      <IconListItemIcon className="text-ink">
+        <Icon.CheckCircle />
+      </IconListItemIcon>
+      <IconListContent>
+        <IconListTitle type="h3">
+          Confirm what donations are needed.
+        </IconListTitle>
+        <p>
+          Unneeded and unsolicited goods burden local organizations’ ability to
+          meet survivors’ confirmed needs, drawing away valuable volunteer
+          labor, transportation and warehouse space.
+        </p>
+      </IconListContent>
     </IconListItem>
-    <IconListItem icon={Icon.CheckCircle} iconDivClassName="text-ink">
-      <IconListTitle type="h3">
-        Talk to trusted organizations about volunteering.
-      </IconListTitle>
-      <p>
-        Financial contributions to recognized disaster relief organizations are
-        the fastest, most flexible and most effective method of donating.
-        Organizations on the ground know what items and quantities are needed,
-        often buy in bulk with discounts and, if possible, purchase through
-        businesses local to the disaster, which supports economic recovery.
-      </p>
+    <IconListItem>
+      <IconListItemIcon className="text-ink">
+        <Icon.CheckCircle />
+      </IconListItemIcon>
+      <IconListContent>
+        <IconListTitle type="h3">
+          Talk to trusted organizations about volunteering.
+        </IconListTitle>
+        <p>
+          Financial contributions to recognized disaster relief organizations
+          are the fastest, most flexible and most effective method of donating.
+          Organizations on the ground know what items and quantities are needed,
+          often buy in bulk with discounts and, if possible, purchase through
+          businesses local to the disaster, which supports economic recovery.
+        </p>
+      </IconListContent>
     </IconListItem>
   </IconList>
 )
@@ -92,32 +138,47 @@ export const CustomSizeWithRichContent = (): ReactElement => (
       spending more time at home.
     </p>
     <IconList className="usa-icon-list--size-lg">
-      <IconListItem icon={Icon.AttachMoney} iconDivClassName="text-green">
-        <IconListTitle type="h3">Let the sun shine.</IconListTitle>
-        <p>
-          On sunny days, open your curtains to allow the sun to naturally warm
-          the rooms of your home without using electricity. Natural sunlight can
-          also lift your mood to help brighten your day. On warm days, close
-          your curtains to help keep your house cool.
-        </p>
+      <IconListItem>
+        <IconListItemIcon className="text-green">
+          <Icon.AttachMoney />
+        </IconListItemIcon>
+        <IconListContent>
+          <IconListTitle type="h3">Let the sun shine.</IconListTitle>
+          <p>
+            On sunny days, open your curtains to allow the sun to naturally warm
+            the rooms of your home without using electricity. Natural sunlight
+            can also lift your mood to help brighten your day. On warm days,
+            close your curtains to help keep your house cool.
+          </p>
+        </IconListContent>
       </IconListItem>
-      <IconListItem icon={Icon.AttachMoney} iconDivClassName="text-green">
-        <IconListTitle type="h3">Adjust your schedule.</IconListTitle>
-        <p>
-          Instead of running high-energy-use appliances such as dishwashers and
-          clothes dryers during mid-afternoon or early evening hours, operate
-          them early in the morning or late at night. Some utilities charge less
-          at off-peak times, which will help reduce your costs.
-        </p>
+      <IconListItem>
+        <IconListItemIcon className="text-green">
+          <Icon.AttachMoney />
+        </IconListItemIcon>
+        <IconListContent>
+          <IconListTitle type="h3">Adjust your schedule.</IconListTitle>
+          <p>
+            Instead of running high-energy-use appliances such as dishwashers
+            and clothes dryers during mid-afternoon or early evening hours,
+            operate them early in the morning or late at night. Some utilities
+            charge less at off-peak times, which will help reduce your costs.
+          </p>
+        </IconListContent>
       </IconListItem>
-      <IconListItem icon={Icon.AttachMoney} iconDivClassName="text-green">
-        <IconListTitle type="h3">Fill it up.</IconListTitle>
-        <p>
-          Wash full loads, whether it’s clothes or dishes. Washing multiple
-          small loads means you’re using and heating more water, which can
-          increase your expenses. Using cold water for clothes washing can also
-          help lower your costs.
-        </p>
+      <IconListItem>
+        <IconListItemIcon className="text-green">
+          <Icon.AttachMoney />
+        </IconListItemIcon>
+        <IconListContent>
+          <IconListTitle type="h3">Fill it up.</IconListTitle>
+          <p>
+            Wash full loads, whether it’s clothes or dishes. Washing multiple
+            small loads means you’re using and heating more water, which can
+            increase your expenses. Using cold water for clothes washing can
+            also help lower your costs.
+          </p>
+        </IconListContent>
       </IconListItem>
     </IconList>
   </>
@@ -125,17 +186,32 @@ export const CustomSizeWithRichContent = (): ReactElement => (
 
 export const CustomSize = (): ReactElement => (
   <IconList className="usa-icon-list--size-lg">
-    <IconListItem icon={Icon.Help} iconDivClassName="text-blue">
-      <span className="text-bold">Timing.</span> Is now the right time to start
-      a business?
+    <IconListItem>
+      <IconListItemIcon className="text-blue">
+        <Icon.Help />
+      </IconListItemIcon>
+      <IconListContent>
+        <span className="text-bold">Timing.</span> Is now the right time to
+        start a business?
+      </IconListContent>
     </IconListItem>
-    <IconListItem icon={Icon.Help} iconDivClassName="text-blue">
-      <span className="text-bold">Funding.</span> Do I have enough money to
-      launch a business?
+    <IconListItem>
+      <IconListItemIcon className="text-blue">
+        <Icon.Help />
+      </IconListItemIcon>
+      <IconListContent>
+        <span className="text-bold">Funding.</span> Do I have enough money to
+        launch a business?
+      </IconListContent>
     </IconListItem>
-    <IconListItem icon={Icon.Help} iconDivClassName="text-blue">
-      <span className="text-bold">Need.</span> Will this business fill a real
-      need for my customers?
+    <IconListItem>
+      <IconListItemIcon className="text-blue">
+        <Icon.Help />
+      </IconListItemIcon>
+      <IconListContent>
+        <span className="text-bold">Need.</span> Will this business fill a real
+        need for my customers?
+      </IconListContent>
     </IconListItem>
   </IconList>
 )
diff --git a/src/components/IconList/IconListItem/IconListItem.tsx b/src/components/IconList/IconListItem/IconListItem.tsx
index b09c2cfa35..24b104890a 100644
--- a/src/components/IconList/IconListItem/IconListItem.tsx
+++ b/src/components/IconList/IconListItem/IconListItem.tsx
@@ -1,41 +1,18 @@
-import React, { ComponentType, ReactElement, ReactNode } from 'react'
+import React, { ReactElement, ReactNode } from 'react'
 import classnames from 'classnames'
-import { IconProps } from '../../Icon/Icon'
 
 interface IconListItemProps {
-  icon: ComponentType<IconProps>
-  iconClassName?: string
-  iconDivClassName?: string
-  contentDivClassName?: string
   className?: string
   children: ReactNode
 }
 
 export const IconListItem = ({
-  icon,
-  iconClassName,
-  iconDivClassName,
-  contentDivClassName,
   className,
   children,
 }: IconListItemProps & JSX.IntrinsicElements['li']): ReactElement => {
   const classes = classnames(className, 'usa-icon-list__item')
-  const iconClasses = classnames(iconDivClassName, 'usa-icon-list__icon') // TODO: Extract into own component (whether or not that is externally exposed)?
-  const contentClasses = classnames(
-    // TODO: Extract into own component (whether or not that is externally exposed)?
-    contentDivClassName,
-    'usa-icon-list__content'
-  )
-  const Icon = icon
 
-  return (
-    <li className={classes}>
-      <div className={iconClasses}>
-        <Icon className={iconClassName} />
-      </div>
-      <div className={contentClasses}>{children}</div>
-    </li>
-  )
+  return <li className={classes}>{children}</li>
 }
 
 export default IconListItem
diff --git a/src/components/IconList/IconListItemContent/IconListContent.tsx b/src/components/IconList/IconListItemContent/IconListContent.tsx
new file mode 100644
index 0000000000..4f1c93272e
--- /dev/null
+++ b/src/components/IconList/IconListItemContent/IconListContent.tsx
@@ -0,0 +1,18 @@
+import classnames from 'classnames'
+import React, { ReactElement, ReactNode } from 'react'
+
+interface IconListContentProps {
+  className?: string
+  children?: ReactNode
+}
+
+export const IconListContent = ({
+  className,
+  children,
+}: IconListContentProps & JSX.IntrinsicElements['div']): ReactElement => {
+  const classes = classnames(className, 'usa-icon-list__content')
+
+  return <div className={classes}>{children}</div>
+}
+
+export default IconListContent
diff --git a/src/components/IconList/IconListItemIcon/IconListItemIcon.tsx b/src/components/IconList/IconListItemIcon/IconListItemIcon.tsx
new file mode 100644
index 0000000000..4d7ae6d2c2
--- /dev/null
+++ b/src/components/IconList/IconListItemIcon/IconListItemIcon.tsx
@@ -0,0 +1,16 @@
+import classnames from 'classnames'
+import React, { ReactElement, ReactNode } from 'react'
+
+interface IconListItemIconProps {
+  className?: string
+  children: ReactNode
+}
+
+export const IconListItemIcon = ({
+  className,
+  children,
+}: IconListItemIconProps & JSX.IntrinsicElements['div']): ReactElement => {
+  const classes = classnames(className, 'usa-icon-list__icon')
+  return <div className={classes}>{children}</div>
+}
+export default IconListItemIcon

From 36727e1fe48aeb27b3e5e7c8c539d67ef6416b00 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Tue, 26 Oct 2021 12:16:09 -0400
Subject: [PATCH 07/12] Add tests

---
 src/components/IconList/IconList.test.tsx     | 47 +++++++++++++++++++
 src/components/IconList/IconList.tsx          |  6 ++-
 .../IconListContent/IconListContent.test.tsx  | 23 +++++++++
 .../IconListContent.tsx                       |  7 ++-
 .../IconListIcon/IconListIcon.test.tsx        | 22 +++++++++
 .../IconListIcon.tsx}                         | 12 +++--
 .../IconListItem/IconListItem.test.tsx        | 35 ++++++++++++++
 .../IconList/IconListItem/IconListItem.tsx    |  7 ++-
 .../IconListTitle/IconListTitle.test.tsx      | 19 ++++++++
 .../IconList/IconListTitle/IconListTitle.tsx  |  6 ++-
 10 files changed, 177 insertions(+), 7 deletions(-)
 create mode 100644 src/components/IconList/IconList.test.tsx
 create mode 100644 src/components/IconList/IconListContent/IconListContent.test.tsx
 rename src/components/IconList/{IconListItemContent => IconListContent}/IconListContent.tsx (75%)
 create mode 100644 src/components/IconList/IconListIcon/IconListIcon.test.tsx
 rename src/components/IconList/{IconListItemIcon/IconListItemIcon.tsx => IconListIcon/IconListIcon.tsx} (64%)
 create mode 100644 src/components/IconList/IconListItem/IconListItem.test.tsx
 create mode 100644 src/components/IconList/IconListTitle/IconListTitle.test.tsx

diff --git a/src/components/IconList/IconList.test.tsx b/src/components/IconList/IconList.test.tsx
new file mode 100644
index 0000000000..be29acfd9d
--- /dev/null
+++ b/src/components/IconList/IconList.test.tsx
@@ -0,0 +1,47 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+import { IconList } from './IconList'
+import { Icon } from '../Icon/Icons'
+import { IconListItem } from './IconListItem/IconListItem'
+import { IconListIcon } from './IconListIcon/IconListIcon'
+import { IconListContent } from './IconListContent/IconListContent'
+import { IconListTitle } from './IconListTitle/IconListTitle'
+
+describe('Icon List', () => {
+  it('renders without errors', () => {
+    const { queryByTestId, queryAllByTestId, queryAllByRole } = render(
+      <IconList className="my-custom-className">
+        <IconListItem>
+          <IconListIcon>
+            <Icon.CheckCircle />
+          </IconListIcon>
+          <IconListTitle type="h1">A title</IconListTitle>
+          <IconListContent>Some content</IconListContent>
+        </IconListItem>
+        <IconListItem>
+          <IconListIcon>
+            <Icon.CheckCircle />
+          </IconListIcon>
+          <IconListTitle type="h1">Another title</IconListTitle>
+          <IconListContent>More content</IconListContent>
+        </IconListItem>
+      </IconList>
+    )
+
+    const iconList = queryByTestId('iconList')
+    const listItems = queryAllByTestId('iconListItem')
+    const iconContainers = queryAllByTestId('iconListIcon')
+    const icons = queryAllByRole('img')
+    const titles = queryAllByTestId('iconListTitle')
+    const contentDivs = queryAllByTestId('iconListContent')
+
+    expect(iconList).toBeInTheDocument()
+    expect(listItems).toHaveLength(2)
+    expect(iconContainers).toHaveLength(2)
+    expect(icons).toHaveLength(2)
+    expect(titles).toHaveLength(2)
+    expect(contentDivs).toHaveLength(2)
+    expect(iconList).toHaveClass('usa-icon-list')
+    expect(iconList).toHaveClass('my-custom-className')
+  })
+})
diff --git a/src/components/IconList/IconList.tsx b/src/components/IconList/IconList.tsx
index 1b370d2a02..a32605451a 100644
--- a/src/components/IconList/IconList.tsx
+++ b/src/components/IconList/IconList.tsx
@@ -13,7 +13,11 @@ export const IconList = ({
 }: IconListProps & JSX.IntrinsicElements['ul']): ReactElement => {
   const classes = classnames(className, 'usa-icon-list')
 
-  return <ul className={classes}>{children}</ul>
+  return (
+    <ul className={classes} data-testid="iconList">
+      {children}
+    </ul>
+  )
 }
 
 export default IconList
diff --git a/src/components/IconList/IconListContent/IconListContent.test.tsx b/src/components/IconList/IconListContent/IconListContent.test.tsx
new file mode 100644
index 0000000000..44f26b7421
--- /dev/null
+++ b/src/components/IconList/IconListContent/IconListContent.test.tsx
@@ -0,0 +1,23 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+import { Icon } from '../../Icon/Icons'
+import { IconListIcon } from '../IconListIcon/IconListIcon'
+import { IconListContent } from './IconListContent'
+import { IconListTitle } from '../IconListTitle/IconListTitle'
+
+describe('Icon List Content', () => {
+  it('renders without errors', () => {
+    const { queryByTestId } = render(
+      <IconListContent className="my-custom-className">
+        Here comes the content.
+      </IconListContent>
+    )
+
+    const content = queryByTestId('iconListContent')
+
+    expect(content).toBeInTheDocument()
+    expect(content).toHaveClass('usa-icon-list__content')
+    expect(content).toHaveClass('my-custom-className')
+    expect(content).toHaveTextContent('Here comes the content.')
+  })
+})
diff --git a/src/components/IconList/IconListItemContent/IconListContent.tsx b/src/components/IconList/IconListContent/IconListContent.tsx
similarity index 75%
rename from src/components/IconList/IconListItemContent/IconListContent.tsx
rename to src/components/IconList/IconListContent/IconListContent.tsx
index 4f1c93272e..0765541d4f 100644
--- a/src/components/IconList/IconListItemContent/IconListContent.tsx
+++ b/src/components/IconList/IconListContent/IconListContent.tsx
@@ -9,10 +9,15 @@ interface IconListContentProps {
 export const IconListContent = ({
   className,
   children,
+  ...divProps
 }: IconListContentProps & JSX.IntrinsicElements['div']): ReactElement => {
   const classes = classnames(className, 'usa-icon-list__content')
 
-  return <div className={classes}>{children}</div>
+  return (
+    <div className={classes} {...divProps} data-testid="iconListContent">
+      {children}
+    </div>
+  )
 }
 
 export default IconListContent
diff --git a/src/components/IconList/IconListIcon/IconListIcon.test.tsx b/src/components/IconList/IconListIcon/IconListIcon.test.tsx
new file mode 100644
index 0000000000..6a40e56add
--- /dev/null
+++ b/src/components/IconList/IconListIcon/IconListIcon.test.tsx
@@ -0,0 +1,22 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+import { Icon } from '../../Icon/Icons'
+import { IconListIcon } from './IconListIcon'
+
+describe('Icon List Icon', () => {
+  it('renders without errors', () => {
+    const { queryByTestId, queryByRole } = render(
+      <IconListIcon className="my-custom-className">
+        <Icon.CheckCircle />
+      </IconListIcon>
+    )
+
+    const iconContainer = queryByTestId('iconListIcon')
+    const icon = queryByRole('img')
+
+    expect(iconContainer).toBeInTheDocument()
+    expect(icon).toBeInTheDocument()
+    expect(iconContainer).toHaveClass('usa-icon-list__icon')
+    expect(iconContainer).toHaveClass('my-custom-className')
+  })
+})
diff --git a/src/components/IconList/IconListItemIcon/IconListItemIcon.tsx b/src/components/IconList/IconListIcon/IconListIcon.tsx
similarity index 64%
rename from src/components/IconList/IconListItemIcon/IconListItemIcon.tsx
rename to src/components/IconList/IconListIcon/IconListIcon.tsx
index 4d7ae6d2c2..1c744b8ddf 100644
--- a/src/components/IconList/IconListItemIcon/IconListItemIcon.tsx
+++ b/src/components/IconList/IconListIcon/IconListIcon.tsx
@@ -6,11 +6,17 @@ interface IconListItemIconProps {
   children: ReactNode
 }
 
-export const IconListItemIcon = ({
+export const IconListIcon = ({
   className,
   children,
+  ...divProps
 }: IconListItemIconProps & JSX.IntrinsicElements['div']): ReactElement => {
   const classes = classnames(className, 'usa-icon-list__icon')
-  return <div className={classes}>{children}</div>
+
+  return (
+    <div className={classes} {...divProps} data-testid="iconListIcon">
+      {children}
+    </div>
+  )
 }
-export default IconListItemIcon
+export default IconListIcon
diff --git a/src/components/IconList/IconListItem/IconListItem.test.tsx b/src/components/IconList/IconListItem/IconListItem.test.tsx
new file mode 100644
index 0000000000..a16b44b918
--- /dev/null
+++ b/src/components/IconList/IconListItem/IconListItem.test.tsx
@@ -0,0 +1,35 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+import { Icon } from '../../Icon/Icons'
+import { IconListItem } from './IconListItem'
+import { IconListIcon } from '../IconListIcon/IconListIcon'
+import { IconListContent } from '../IconListContent/IconListContent'
+import { IconListTitle } from '../IconListTitle/IconListTitle'
+
+describe('Icon List Item', () => {
+  it('renders without errors', () => {
+    const { queryByTestId, queryByRole } = render(
+      <IconListItem className="my-custom-className">
+        <IconListIcon>
+          <Icon.CheckCircle />
+        </IconListIcon>
+        <IconListTitle type="h1">A title</IconListTitle>
+        <IconListContent>Some content</IconListContent>
+      </IconListItem>
+    )
+
+    const listItem = queryByTestId('iconListItem')
+    const iconContainer = queryByTestId('iconListIcon')
+    const icon = queryByRole('img')
+    const title = queryByTestId('iconListTitle')
+    const content = queryByTestId('iconListContent')
+
+    expect(listItem).toBeInTheDocument()
+    expect(iconContainer).toBeInTheDocument()
+    expect(icon).toBeInTheDocument()
+    expect(title).toBeInTheDocument()
+    expect(content).toBeInTheDocument()
+    expect(listItem).toHaveClass('usa-icon-list__item')
+    expect(listItem).toHaveClass('my-custom-className')
+  })
+})
diff --git a/src/components/IconList/IconListItem/IconListItem.tsx b/src/components/IconList/IconListItem/IconListItem.tsx
index 24b104890a..fe8aa99ede 100644
--- a/src/components/IconList/IconListItem/IconListItem.tsx
+++ b/src/components/IconList/IconListItem/IconListItem.tsx
@@ -9,10 +9,15 @@ interface IconListItemProps {
 export const IconListItem = ({
   className,
   children,
+  ...liProps
 }: IconListItemProps & JSX.IntrinsicElements['li']): ReactElement => {
   const classes = classnames(className, 'usa-icon-list__item')
 
-  return <li className={classes}>{children}</li>
+  return (
+    <li className={classes} {...liProps} data-testid="iconListItem">
+      {children}
+    </li>
+  )
 }
 
 export default IconListItem
diff --git a/src/components/IconList/IconListTitle/IconListTitle.test.tsx b/src/components/IconList/IconListTitle/IconListTitle.test.tsx
new file mode 100644
index 0000000000..72fbce586d
--- /dev/null
+++ b/src/components/IconList/IconListTitle/IconListTitle.test.tsx
@@ -0,0 +1,19 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+import { IconListTitle } from './IconListTitle'
+
+describe('Icon List Title', () => {
+  it('renders without errors', () => {
+    const { queryByTestId } = render(
+      <IconListTitle type="h1" className="my-custom-className">
+        A title
+      </IconListTitle>
+    )
+
+    const title = queryByTestId('iconListTitle')
+
+    expect(title).toBeInTheDocument()
+    expect(title).toHaveClass('usa-icon-list__title')
+    expect(title).toHaveClass('my-custom-className')
+  })
+})
diff --git a/src/components/IconList/IconListTitle/IconListTitle.tsx b/src/components/IconList/IconListTitle/IconListTitle.tsx
index 218ced4028..ea6ddf7cee 100644
--- a/src/components/IconList/IconListTitle/IconListTitle.tsx
+++ b/src/components/IconList/IconListTitle/IconListTitle.tsx
@@ -31,7 +31,11 @@ export const IconListTitle = ({
 }: IconListParagraphTitleProps | IconListHeadingTitleProps): ReactElement => {
   const classes = classnames(className, 'usa-icon-list__title')
   const Tag = type
-  return <Tag className={classes}>{children}</Tag>
+  return (
+    <Tag className={classes} data-testid="iconListTitle">
+      {children}
+    </Tag>
+  )
 }
 
 export default IconListTitle

From 54b73601faf0fc552a762e91b2a6a89bcabe3978 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Tue, 26 Oct 2021 12:20:13 -0400
Subject: [PATCH 08/12] Remove todos

---
 src/components/IconList/IconList.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/IconList/IconList.tsx b/src/components/IconList/IconList.tsx
index a32605451a..188e4d3471 100644
--- a/src/components/IconList/IconList.tsx
+++ b/src/components/IconList/IconList.tsx
@@ -1,9 +1,8 @@
 import React, { ReactElement } from 'react'
 import classnames from 'classnames'
 
-// TODO: Size, Color?
 interface IconListProps {
-  children: React.ReactNode // TODO: Constrain further?
+  children: React.ReactNode
   className?: string
 }
 

From 0993c927c8972a3ff4a00b955a49414e46ea3c93 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Tue, 26 Oct 2021 12:28:14 -0400
Subject: [PATCH 09/12] Fix imports

---
 src/components/IconList/IconList.stories.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/IconList/IconList.stories.tsx b/src/components/IconList/IconList.stories.tsx
index 4c0886a0e1..64c0af570d 100644
--- a/src/components/IconList/IconList.stories.tsx
+++ b/src/components/IconList/IconList.stories.tsx
@@ -2,9 +2,9 @@ import React, { ReactElement } from 'react'
 import { Icon } from '../Icon/Icons'
 import { IconList } from './IconList'
 import { IconListItem } from './IconListItem/IconListItem'
-import { IconListItemIcon } from './IconListItemIcon/IconListItemIcon'
+import { IconListItemIcon } from './IconListIcon/IconListIcon'
 import { IconListTitle } from './IconListTitle/IconListTitle'
-import { IconListContent } from './IconListItemContent/IconListContent'
+import { IconListContent } from './IconListContent/IconListContent'
 
 export default {
   title: 'Components/Icon list',

From 99c6aff0692ccea14f19ac9bc47a3e2e2b335ae6 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Wed, 27 Oct 2021 11:30:07 -0400
Subject: [PATCH 10/12] Unify naming convention to match uswds classes

---
 src/components/IconList/IconList.stories.tsx  | 66 +++++++++----------
 .../IconList/IconListIcon/IconListIcon.tsx    |  6 +-
 2 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/src/components/IconList/IconList.stories.tsx b/src/components/IconList/IconList.stories.tsx
index 64c0af570d..05c97d56f2 100644
--- a/src/components/IconList/IconList.stories.tsx
+++ b/src/components/IconList/IconList.stories.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react'
 import { Icon } from '../Icon/Icons'
 import { IconList } from './IconList'
 import { IconListItem } from './IconListItem/IconListItem'
-import { IconListItemIcon } from './IconListIcon/IconListIcon'
+import { IconListIcon } from './IconListIcon/IconListIcon'
 import { IconListTitle } from './IconListTitle/IconListTitle'
 import { IconListContent } from './IconListContent/IconListContent'
 
@@ -23,23 +23,23 @@ Source: https://designsystem.digital.gov/components/icon-list/
 export const Default = (): ReactElement => (
   <IconList>
     <IconListItem>
-      <IconListItemIcon className="text-green">
+      <IconListIcon className="text-green">
         <Icon.CheckCircle />
-      </IconListItemIcon>
+      </IconListIcon>
       <IconListContent>
         Wash your hands for 20 seconds with soap
       </IconListContent>
     </IconListItem>
     <IconListItem>
-      <IconListItemIcon className="text-green">
+      <IconListIcon className="text-green">
         <Icon.CheckCircle />
-      </IconListItemIcon>
+      </IconListIcon>
       <IconListContent>Stay six feet away from others</IconListContent>
     </IconListItem>
     <IconListItem>
-      <IconListItemIcon className="text-red">
+      <IconListIcon className="text-red">
         <Icon.Cancel />
-      </IconListItemIcon>
+      </IconListIcon>
       <IconListContent>Avoid large gatherings</IconListContent>
     </IconListItem>
   </IconList>
@@ -50,29 +50,29 @@ export const SimpleContent = (): ReactElement => (
     <p className="margin-bottom-2">Benefits of joining Global Entry program:</p>
     <IconList className="usa-icon-list--primary">
       <IconListItem>
-        <IconListItemIcon>
+        <IconListIcon>
           <Icon.ThumbUpAlt />
-        </IconListItemIcon>
+        </IconListIcon>
         <IconListContent>No processing lines</IconListContent>
       </IconListItem>
       <IconListItem>
-        <IconListItemIcon>
+        <IconListIcon>
           <Icon.ThumbUpAlt />
-        </IconListItemIcon>
+        </IconListIcon>
         <IconListContent>
           Access to expedited entry benefits in other countries
         </IconListContent>
       </IconListItem>
       <IconListItem>
-        <IconListItemIcon>
+        <IconListIcon>
           <Icon.ThumbUpAlt />
-        </IconListItemIcon>
+        </IconListIcon>
         <IconListContent>Available at major U.S. airports</IconListContent>
       </IconListItem>
       <IconListItem>
-        <IconListItemIcon>
+        <IconListIcon>
           <Icon.ThumbUpAlt />
-        </IconListItemIcon>
+        </IconListIcon>
         <IconListContent>Reduced wait times</IconListContent>
       </IconListItem>
     </IconList>
@@ -82,9 +82,9 @@ export const SimpleContent = (): ReactElement => (
 export const RichContent = (): ReactElement => (
   <IconList>
     <IconListItem>
-      <IconListItemIcon className="text-ink">
+      <IconListIcon className="text-ink">
         <Icon.CheckCircle />
-      </IconListItemIcon>
+      </IconListIcon>
       <IconListContent>
         <IconListTitle type="h3">Donate cash when possible.</IconListTitle>
         <p>
@@ -97,9 +97,9 @@ export const RichContent = (): ReactElement => (
       </IconListContent>
     </IconListItem>
     <IconListItem>
-      <IconListItemIcon className="text-ink">
+      <IconListIcon className="text-ink">
         <Icon.CheckCircle />
-      </IconListItemIcon>
+      </IconListIcon>
       <IconListContent>
         <IconListTitle type="h3">
           Confirm what donations are needed.
@@ -112,9 +112,9 @@ export const RichContent = (): ReactElement => (
       </IconListContent>
     </IconListItem>
     <IconListItem>
-      <IconListItemIcon className="text-ink">
+      <IconListIcon className="text-ink">
         <Icon.CheckCircle />
-      </IconListItemIcon>
+      </IconListIcon>
       <IconListContent>
         <IconListTitle type="h3">
           Talk to trusted organizations about volunteering.
@@ -139,9 +139,9 @@ export const CustomSizeWithRichContent = (): ReactElement => (
     </p>
     <IconList className="usa-icon-list--size-lg">
       <IconListItem>
-        <IconListItemIcon className="text-green">
+        <IconListIcon className="text-green">
           <Icon.AttachMoney />
-        </IconListItemIcon>
+        </IconListIcon>
         <IconListContent>
           <IconListTitle type="h3">Let the sun shine.</IconListTitle>
           <p>
@@ -153,9 +153,9 @@ export const CustomSizeWithRichContent = (): ReactElement => (
         </IconListContent>
       </IconListItem>
       <IconListItem>
-        <IconListItemIcon className="text-green">
+        <IconListIcon className="text-green">
           <Icon.AttachMoney />
-        </IconListItemIcon>
+        </IconListIcon>
         <IconListContent>
           <IconListTitle type="h3">Adjust your schedule.</IconListTitle>
           <p>
@@ -167,9 +167,9 @@ export const CustomSizeWithRichContent = (): ReactElement => (
         </IconListContent>
       </IconListItem>
       <IconListItem>
-        <IconListItemIcon className="text-green">
+        <IconListIcon className="text-green">
           <Icon.AttachMoney />
-        </IconListItemIcon>
+        </IconListIcon>
         <IconListContent>
           <IconListTitle type="h3">Fill it up.</IconListTitle>
           <p>
@@ -187,27 +187,27 @@ export const CustomSizeWithRichContent = (): ReactElement => (
 export const CustomSize = (): ReactElement => (
   <IconList className="usa-icon-list--size-lg">
     <IconListItem>
-      <IconListItemIcon className="text-blue">
+      <IconListIcon className="text-blue">
         <Icon.Help />
-      </IconListItemIcon>
+      </IconListIcon>
       <IconListContent>
         <span className="text-bold">Timing.</span> Is now the right time to
         start a business?
       </IconListContent>
     </IconListItem>
     <IconListItem>
-      <IconListItemIcon className="text-blue">
+      <IconListIcon className="text-blue">
         <Icon.Help />
-      </IconListItemIcon>
+      </IconListIcon>
       <IconListContent>
         <span className="text-bold">Funding.</span> Do I have enough money to
         launch a business?
       </IconListContent>
     </IconListItem>
     <IconListItem>
-      <IconListItemIcon className="text-blue">
+      <IconListIcon className="text-blue">
         <Icon.Help />
-      </IconListItemIcon>
+      </IconListIcon>
       <IconListContent>
         <span className="text-bold">Need.</span> Will this business fill a real
         need for my customers?
diff --git a/src/components/IconList/IconListIcon/IconListIcon.tsx b/src/components/IconList/IconListIcon/IconListIcon.tsx
index 1c744b8ddf..df8535992b 100644
--- a/src/components/IconList/IconListIcon/IconListIcon.tsx
+++ b/src/components/IconList/IconListIcon/IconListIcon.tsx
@@ -1,7 +1,7 @@
 import classnames from 'classnames'
 import React, { ReactElement, ReactNode } from 'react'
 
-interface IconListItemIconProps {
+interface IconListIconProps {
   className?: string
   children: ReactNode
 }
@@ -10,7 +10,7 @@ export const IconListIcon = ({
   className,
   children,
   ...divProps
-}: IconListItemIconProps & JSX.IntrinsicElements['div']): ReactElement => {
+}: IconListIconProps & JSX.IntrinsicElements['div']): ReactElement => {
   const classes = classnames(className, 'usa-icon-list__icon')
 
   return (
@@ -19,4 +19,4 @@ export const IconListIcon = ({
     </div>
   )
 }
-export default IconListIcon
+export default IconListIconProps

From 289355477c8ee909909936eb85a2efb031a2561a Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Fri, 12 Nov 2021 15:31:31 -0500
Subject: [PATCH 11/12] Just export IconList now that name conflict is resolved

---
 src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.ts b/src/index.ts
index db5981dad7..d42d694f67 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -64,7 +64,7 @@ export { PrimaryNav } from './components/header/PrimaryNav/PrimaryNav'
 export { Title } from './components/header/Title/Title'
 
 // IconList
-export { IconList as IconListCONFLICT } from './components/IconList/IconList'
+export { IconList } from './components/IconList/IconList'
 export { IconListItem } from './components/IconList/IconListItem/IconListItem'
 export { IconListTitle } from './components/IconList/IconListTitle/IconListTitle'
 

From 9bc91191e092d2749a69cd58cfb0b1659c8cd028 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Mon, 22 Nov 2021 15:17:27 -0500
Subject: [PATCH 12/12] Update Input Prefix and Suffix Icon stories to use new
 Icon

---
 src/components/forms/InputPrefix/InputPrefix.stories.tsx | 4 ++--
 src/components/forms/InputSuffix/InputSuffix.stories.tsx | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/forms/InputPrefix/InputPrefix.stories.tsx b/src/components/forms/InputPrefix/InputPrefix.stories.tsx
index 4d23fae3e6..9fe2336999 100644
--- a/src/components/forms/InputPrefix/InputPrefix.stories.tsx
+++ b/src/components/forms/InputPrefix/InputPrefix.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { InputPrefix } from './InputPrefix'
-import { IconCreditCard } from '../../Icon/Icons'
+import { Icon } from '../../Icon/Icons'
 import { TextInput } from '../TextInput/TextInput'
 import { FormGroup } from '../FormGroup/FormGroup'
 
@@ -42,7 +42,7 @@ export const InputWithIconInputPrefix = (): React.ReactElement => (
   <FormGroup>
     <div className="usa-input-group">
       <InputPrefix>
-        <IconCreditCard />
+        <Icon.CreditCard />
       </InputPrefix>
       <TextInput id="card" name="card" type="text" />
     </div>
diff --git a/src/components/forms/InputSuffix/InputSuffix.stories.tsx b/src/components/forms/InputSuffix/InputSuffix.stories.tsx
index 2874f2ec1a..acecca054a 100644
--- a/src/components/forms/InputSuffix/InputSuffix.stories.tsx
+++ b/src/components/forms/InputSuffix/InputSuffix.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { InputSuffix } from './InputSuffix'
 import { FormGroup } from '../FormGroup/FormGroup'
 import { TextInput } from '../TextInput/TextInput'
-import { IconSearch } from '../../Icon/Icons'
+import { Icon } from '../../Icon/Icons'
 
 export default {
   title: 'Components/Input prefix or suffix/InputSuffix',
@@ -25,7 +25,7 @@ export const InputWithIconInputSuffix = (): React.ReactElement => (
     <div className="usa-input-group">
       <TextInput id="search" name="search" type="search" />
       <InputSuffix>
-        <IconSearch />
+        <Icon.Search />
       </InputSuffix>
     </div>
   </FormGroup>
@@ -41,7 +41,7 @@ export const InputWithIconInputSuffixError = (): React.ReactElement => (
         validationStatus="error"
       />
       <InputSuffix>
-        <IconSearch />
+        <Icon.Search />
       </InputSuffix>
     </div>
   </FormGroup>