Logo
Logos set available in eds-icons package.
Additional theme support is currently unavailable and will be added in future release.
Quick Start
- Installation
npm install @adaptavant/eds-icons- Import
import { Logo } from '@adaptavant/eds-icons';
All Logos
AnswerForceLogo
AnswerconnectLogo
AnywhereWorksLogo
AnywhereappLogo
ChatSupportLogo
GrowYourBrandLogo
HelloSellsLogo
LexReceptionLogo
PledgePeopleNotBotsLogo
ServiceForgeLogo
SetmoreLogo
SignmoreLogo
WellReceivedLogo
const allLogos = {
AnswerForceLogo,
AnswerconnectLogo,
AnywhereWorksLogo,
AnywhereappLogo,
ChatSupportLogo,
GrowYourBrandLogo,
HelloSellsLogo,
LexReceptionLogo,
PledgePeopleNotBotsLogo,
ServiceForgeLogo,
SetmoreLogo,
SignmoreLogo,
WellReceivedLogo
};
const [tone, setTone] = React.useState("neutral");
return (
<div className="w-full space-y-6">
<div className="flex justify-end">
<div className="flex items-center gap-6">
<label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200">
<Radio
name="logo-tone"
value="neutral"
checked={tone === "neutral"}
onChange={() => setTone("neutral")}
/>
Neutral
</label>
<label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200">
<Radio
name="logo-tone"
value="inverse"
checked={tone === "inverse"}
onChange={() => setTone("inverse")}
/>
Inverse
</label>
</div>
</div>
<div className="grid w-full grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
{Object.entries(allLogos).map(([key, Logo]) => (
<div
key={key}
className="rounded-md border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900"
>
<Heading
as="h2"
typography="heading.5"
className="text-gray-950 dark:text-white"
>
{key}
</Heading>
<div
className={
tone === "inverse"
? "mt-6 flex min-h-36 items-center justify-center rounded-md border border-gray-700 bg-gray-900 px-5 py-2"
: "mt-6 flex min-h-36 items-center justify-center rounded-md border border-gray-200 bg-white px-5 py-2 shadow-sm"
}
>
<Logo tone={tone} />
</div>
</div>
))}
</div>
</div>
);
Tone
Use tone prop to controls how the logo renders against its background.
neutral(default) — for light surfacesinverse— for dark surfaces (footers, banners, etc.)
Neutral
Inverse
<div className="grid grid-cols-1 md:grid-cols-2 w-full">
{/* Neutral preview */}
<div className="bg-gray-100 border-b border-gray-200 p-6 pt-4 md:border-b-0 md:border-r dark:border-gray-700">
<Heading as="h4" className="text-constant-black mb-3">
Neutral
</Heading>
<div className="flex min-h-40 items-center justify-center rounded-lg border border-gray-200 bg-gray-50 p-8">
<SetmoreLogo tone="neutral" />
</div>
</div>
{/* Inverse preview */}
<div className="bg-gray-950 p-6 pt-4">
<Heading as="h4" className="text-white mb-3">
Inverse
</Heading>
<div className="flex min-h-40 items-center justify-center rounded-lg border border-gray-700 bg-gray-900 p-8">
<SetmoreLogo tone="inverse" />
</div>
</div>
</div>
Sizing
Logos scale from CSS while their SVG viewBox preserves their shape. Set either height or width.
⚠️ Avoid setting both
heightandwidthunless those values match the logo's viewBox ratio.
Height based
Use height when logo must align with nearby UI, like headers or nav bars.
<div className="rounded-lg border border-gray-200 bg-white p-6">
<SetmoreLogo className="h-8" />
</div>
Width based
Use width when logo must fit a fixed column or card.
<div className="rounded-lg border border-gray-200 bg-white p-6">
<SetmoreLogo className="w-40" />
</div>
Responsive
Change one dimension at each breakpoint.
<div className="rounded-lg border border-gray-200 bg-white p-6">
<SetmoreLogo className="h-6 sm:h-8 md:h-10" />
</div>
Fixed container
Set the container size, then let the logo fill.
<div className="flex h-24 w-60 items-center justify-center rounded-lg border border-gray-200 bg-white p-2">
<SetmoreLogo />
</div>
Multiple viewBox ratios
Same height can produce different widths because each logo has its own viewBox ratio.
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
<div className="flex h-20 items-center justify-center rounded-lg border border-gray-200 bg-white p-4">
<SetmoreLogo className="h-10" />
</div>
<div className="flex h-20 items-center justify-center rounded-lg border border-gray-200 bg-white p-4">
<PledgePeopleNotBotsLogo className="h-10" />
</div>
<div className="flex h-20 items-center justify-center rounded-lg border border-gray-200 bg-white p-4">
<AnywhereWorksLogo className="h-10" />
</div>
</div>
API Reference
Logo
| Prop | Default | Description |
|---|---|---|
tone? | 'neutral' | 'neutral' | 'inverse'Tone of the Logo. |
aria-hidden? | true | booleanA boolean attribute used for accessibility, often to hide the logo from assistive technologies. |
id? | _ | stringThe unique identifier for the SVG element. |
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.
Logo parts
<div className="flex min-h-28 items-center justify-center rounded-lg bg-gray-50 p-8 w-full">
<SetmoreLogo className="h-16 w-auto" />
</div>
No parts available. Only root.