Symbol

{/* 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" />

const allSymbols = {
      AmexColorIcon,
      AnswerconnectColorIcon,
      AnywhereWorksColorIcon,
      AppleColorIcon,
      ApplePayColorIcon,
      CashAppPayColorIcon,
      ClioColorIcon,
      ConnectwiseColorIcon,
      ConstantContactColorIcon,
      DinersColorIcon,
      DiscoverColorIcon,
      DrupalColorIcon,
      FacebookColorIcon,
      FacetimeColorIcon,
      FigmaColorIcon,
      FilevineColorIcon,
      FranconnectColorIcon,
      FreshdeskColorIcon,
      FreshsalesColorIcon,
      GithubColorIcon,
      GmailColorIcon,
      GoogleAnalyticsColorIcon,
      GoogleCalendarColorIcon,
      GoogleColorIcon,
      GoogleMeetingColorIcon,
      GooglePayColorIcon,
      GoogleTagManagerColorIcon,
      HousecallproColorIcon,
      HubspotColorIcon,
      Improveit360ColorIcon,
      InsightlyColorIcon,
      InstagramColorIcon,
      IntercomColorIcon,
      JcbColorIcon,
      JimdoColorIcon,
      JoomlaColorIcon,
      KeapColorIcon,
      LawcusColorIcon,
      LawmaticsColorIcon,
      LawpayColorIcon,
      LessAnnoyingCrmColorIcon,
      LexicataColorIcon,
      MaestroColorIcon,
      MailchimpColorIcon,
      MailerliteColorIcon,
      MastercardColorIcon,
      MicrosoftColorIcon,
      MycaseColorIcon,
      Office365ColorIcon,
      OpendentalColorIcon,
      OutlookColorIcon,
      PaypalColorIcon,
      PipedriveColorIcon,
      PodioColorIcon,
      PsaColorIcon,
      PracticepantherColorIcon,
      QuickbooksColorIcon,
      RocketmatterColorIcon,
      SalesforceColorIcon,
      ServiceminderColorIcon,
      SetmoreColorIcon,
      ShopifyColorIcon,
      SlackColorIcon,
      SmokeballColorIcon,
      SquareColorIcon,
      SquarespaceColorIcon,
      StorybookColorIcon,
      StripeColorIcon,
      TeleportColorIcon,
      ThreadsColorIcon,
      TrelloColorIcon,
      VisaColorIcon,
      WeeblyColorIcon,
      WixColorIcon,
      WordpressColorIcon,
      XTwitterColorIcon,
      ZapierColorIcon,
      ZendeskColorIcon,
      ZohoColorIcon,
      ZoomColorIcon,
  };
return (
  <div className="grid grid-cols-3 gap-4">
    {Object.entries(allSymbols).map(([key, Symbol]) => (
      <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>
        <Symbol />
      </div>
    ))}
  </div>
);