Symbol
Symbols set available in "eds-icons" package.
Quick Start
- Installation
npm install @adaptavant/eds-icons- Import
import { Symbol } from '@adaptavant/eds-icons';
All Symbols
AcculynxColorIcon
ActiveCampaignColorIcon
AgileCrmColorIcon
AmexColorIcon
AnswerForceColorIcon
AnswerconnectColorIcon
AnywhereWorksColorIcon
AppleColorIcon
ApplePayColorIcon
AsanaColorIcon
AutoTaskColorIcon
BoomTownColorIcon
BuilderPrimeColorIcon
CashAppPayColorIcon
CincColorIcon
ClickupColorIcon
ClioColorIcon
ConnectwiseColorIcon
ConstantContactColorIcon
CopperColorIcon
DinersColorIcon
DiscordColorIcon
DiscoverColorIcon
DripColorIcon
DrupalColorIcon
FacebookColorIcon
FacetimeColorIcon
FigmaColorIcon
FilevineColorIcon
FollowUpBossColorIcon
FranconnectColorIcon
FreshdeskColorIcon
FreshsalesColorIcon
GithubColorIcon
GmailColorIcon
GocardlessColorIcon
GoogleAnalyticsColorIcon
GoogleCalendarColorIcon
GoogleColorIcon
GoogleContacsColorIcon
GoogleMeetingColorIcon
GooglePayColorIcon
GoogleTagManagerColorIcon
HelloSellsColorIcon
HousecallproColorIcon
HubspotColorIcon
Improveit360ColorIcon
InsightlyColorIcon
InstagramColorIcon
IntercomColorIcon
JcbColorIcon
JimdoColorIcon
JobberColorIcon
JoomlaColorIcon
KeapColorIcon
KlaviyoColorIcon
LawcusColorIcon
LawmaticsColorIcon
LawpayColorIcon
LessAnnoyingCrmColorIcon
LexReceptionColorIcon
LexicataColorIcon
LoftyColorIcon
MaestroColorIcon
MailchimpColorIcon
MailerliteColorIcon
MastercardColorIcon
MicrosoftColorIcon
MicrosoftTeamsColorIcon
MondayColorIcon
MycaseColorIcon
Office365ColorIcon
OpendentalColorIcon
OutlookColorIcon
PaypalColorIcon
PipedriveColorIcon
PodioColorIcon
PodiumColorIcon
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
TrustpilotColorIcon
TwillioColorIcon
VisaColorIcon
WeeblyColorIcon
WellReceivedColorIcon
WiseAgentColorIcon
WixColorIcon
WordpressColorIcon
WorkizColorIcon
XTwitterColorIcon
ZapierColorIcon
ZendeskColorIcon
ZohoColorIcon
ZoomColorIcon
const allIcons = {
AcculynxColorIcon,
ActiveCampaignColorIcon,
AgileCrmColorIcon,
AmexColorIcon,
AnswerForceColorIcon,
AnswerconnectColorIcon,
AnywhereWorksColorIcon,
AppleColorIcon,
ApplePayColorIcon,
AsanaColorIcon,
AutoTaskColorIcon,
BoomTownColorIcon,
BuilderPrimeColorIcon,
CashAppPayColorIcon,
CincColorIcon,
ClickupColorIcon,
ClioColorIcon,
ConnectwiseColorIcon,
ConstantContactColorIcon,
CopperColorIcon,
DinersColorIcon,
DiscordColorIcon,
DiscoverColorIcon,
DripColorIcon,
DrupalColorIcon,
FacebookColorIcon,
FacetimeColorIcon,
FigmaColorIcon,
FilevineColorIcon,
FollowUpBossColorIcon,
FranconnectColorIcon,
FreshdeskColorIcon,
FreshsalesColorIcon,
GithubColorIcon,
GmailColorIcon,
GocardlessColorIcon,
GoogleAnalyticsColorIcon,
GoogleCalendarColorIcon,
GoogleColorIcon,
GoogleContacsColorIcon,
GoogleMeetingColorIcon,
GooglePayColorIcon,
GoogleTagManagerColorIcon,
HelloSellsColorIcon,
HousecallproColorIcon,
HubspotColorIcon,
Improveit360ColorIcon,
InsightlyColorIcon,
InstagramColorIcon,
IntercomColorIcon,
JcbColorIcon,
JimdoColorIcon,
JobberColorIcon,
JoomlaColorIcon,
KeapColorIcon,
KlaviyoColorIcon,
LawcusColorIcon,
LawmaticsColorIcon,
LawpayColorIcon,
LessAnnoyingCrmColorIcon,
LexReceptionColorIcon,
LexicataColorIcon,
LoftyColorIcon,
MaestroColorIcon,
MailchimpColorIcon,
MailerliteColorIcon,
MastercardColorIcon,
MicrosoftColorIcon,
MicrosoftTeamsColorIcon,
MondayColorIcon,
MycaseColorIcon,
Office365ColorIcon,
OpendentalColorIcon,
OutlookColorIcon,
PaypalColorIcon,
PipedriveColorIcon,
PodioColorIcon,
PodiumColorIcon,
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,
TrustpilotColorIcon,
TwillioColorIcon,
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>
);
Tone
Symbols are available in 6 sizes. 24 is the default.
{/* 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" />
Style API
Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.
Please refer to the Style API documentation for more insights.