SVGIcon

() => {
  const sizes = ['small', 'medium', 'large', 'xlarge', 'xxlarge', 'xxxlarge']
  const [size, setSize] = React.useState('small')
  function onRadioChange(_, value) {
    setSize(value)
  }
  const icons = [
    ActionAdd,
    ActionCloseCircleFilled,
    ActionDelete,
    ActionEdit,
    ActionFilter,
    ActionLaunch,
    ActionLogIn,
    ActionLogOut,
    ActionRemoveCircleFilled,
  ]
  const duotoneIcons = [
    AppletCampaignsDuotone,
    AppletFeedDuotone,
    AppletContactsDuotone,
    AppletDashboardDuotone,
    AppletDesignsDuotone,
    AppletInsightsDuotone,
    AppletListingsDuotone,
    AppletOpportunitiesDuotone,
    AppletRecruitsDuotone,
    AppletReferralsDuotone,
    AppletReportingDuotone,
    AppletAdminDuotone,
    AppletConsumerDuotone,
    AppletSmartplansDuotone,
    AppletTasksDuotone,
  ]
  return (
    <div className="d-flex flex-column p-3">
      <div className="d-flex flex-row flex-wrap mb-3">
        {sizes.map(sizeValue => {
          return (
            <div
              key={sizeValue}
              className="d-inline-flex align-items-center mr-2"
            >
              <Radio
                id={sizeValue}
                value={sizeValue}
                name="size"
                onChange={onRadioChange}
                checked={size === sizeValue}
              />
              <FormLabel htmlFor={sizeValue}>{sizeValue}</FormLabel>
            </div>
          )
        })}
      </div>
      <div className="d-flex flex-row flex-wrap">
        {[...icons, ...duotoneIcons].map((T, index) => {
          return (
            <div className="m-2" key={index}>
              <T key={index} size={size} label={`Icon at size: ${size}`} />
            </div>
          )
        })}
      </div>
    </div>
  )
}

<GeneratedIcons />