Symbol

const allIcons = {
AcculynxColorIcon,
ActiveCampaignColorIcon,
AmexColorIcon,
AnswerForceColorIcon,
AnswerconnectColorIcon,
AnywhereWorksColorIcon,
AppleColorIcon,
ApplePayColorIcon,
AutoTaskColorIcon,
BoomTownColorIcon,
BuilderPrimeColorIcon,
CashAppPayColorIcon,
CincColorIcon,
ClioColorIcon,
ConnectwiseColorIcon,
ConstantContactColorIcon,
CopperColorIcon,
DinersColorIcon,
DiscoverColorIcon,
DripColorIcon,
DrupalColorIcon,
FacebookColorIcon,
FacetimeColorIcon,
FigmaColorIcon,
FilevineColorIcon,
FollowUpBossColorIcon,
FranconnectColorIcon,
FreshdeskColorIcon,
FreshsalesColorIcon,
GithubColorIcon,
GmailColorIcon,
GocardlessColorIcon,
GoogleAnalyticsColorIcon,
GoogleCalendarColorIcon,
GoogleColorIcon,
GoogleMeetingColorIcon,
GooglePayColorIcon,
GoogleTagManagerColorIcon,
HelloSellsColorIcon,
HousecallproColorIcon,
HubspotColorIcon,
Improveit360ColorIcon,
InsightlyColorIcon,
InstagramColorIcon,
IntercomColorIcon,
JcbColorIcon,
JimdoColorIcon,
JobberColorIcon,
JoomlaColorIcon,
KeapColorIcon,
KlaviyoColorIcon,
LawcusColorIcon,
LawmaticsColorIcon,
LawpayColorIcon,
LessAnnoyingCrmColorIcon,
LexReceptionColorIcon,
LexicataColorIcon,
MaestroColorIcon,
MailchimpColorIcon,
MailerliteColorIcon,
MastercardColorIcon,
MicrosoftColorIcon,
MycaseColorIcon,
Office365ColorIcon,
OpendentalColorIcon,
OutlookColorIcon,
PaypalColorIcon,
PipedriveColorIcon,
PodioColorIcon,
PracticepantherColorIcon,
PsaColorIcon,
QuickbooksColorIcon,
RadiusColorIcon,
RealGeeksColorIcon,
RocketmatterColorIcon,
SalesforceColorIcon,
ServiceForgeColorIcon,
ServiceFusionColorIcon,
ServiceTitanColorIcon,
ServiceminderColorIcon,
SetmoreColorIcon,
ShopifyColorIcon,
SignMoreColorIcon,
SlackColorIcon,
SmokeballColorIcon,
SquareColorIcon,
SquarespaceColorIcon,
StorybookColorIcon,
StripeColorIcon,
TeleportColorIcon,
ThreadsColorIcon,
ThryvColorIcon,
TopProducerColorIcon,
TrelloColorIcon,
VisaColorIcon,
WeeblyColorIcon,
WellReceivedColorIcon,
WiseAgentColorIcon,
WixColorIcon,
WordpressColorIcon,
WorkizColorIcon,
XTwitterColorIcon,
ZapierColorIcon,
ZendeskColorIcon,
ZohoColorIcon,
ZoomColorIcon
};
return (
  <div className="grid grid-cols-3 gap-4">
    {Object.entries(allIcons).map(([key, Icon]) => (
      <div
        className="flex flex-col items-start gap-4 rounded border p-4 dark:border-gray-600"
        key={key}
		>
			<Heading as='h2' typography='heading.5'>
			  {key}
			</Heading>
			<Icon tone="accentPrimary" />
		  </div>
	))}
  </div>
);

{/* size: 16 */}
<GoogleColorIcon size="16" />

{/* size: 20 */}
<GoogleColorIcon size="20" />

{/* size: 24 */}
<GoogleColorIcon size="24" />

{/* size: 32 */}
<GoogleColorIcon size="32" />

{/* size: 40 */}
<GoogleColorIcon size="40" />

{/* size: 56 */}
<GoogleColorIcon size="56" />