Marketing icons

Marketing adds a custom icon set to Clinia's utility icons (Google Material Symbols). Both sets draw in currentColor and follow the same contrast rules. They differ in job and in size. Functional icons on marketing pages are Material Symbols, the same modules apps use.

The set

Each cell renders the same icon at 24px, 20px and 16px for comparison. You can click one to copy its import code.

Carbon overrides

A marketing page may also use an IBM Carbon icon when no alternative exists in the Google Material Symbols library. The approved list is below:

They ship in @clinia/marketing-icons with the marketing set, so the site needs no Carbon package. They take the same props as the utility icons and default to 20, the size of the Material icons beside them:

import { CarbonCompareIcon } from "@/components/ui/icons/marketing/carbon/compare"
import { CarbonLogoLinkedinIcon } from "@/components/ui/icons/marketing/carbon/logo-linkedin"
 
<CarbonCompareIcon />
<CarbonLogoLinkedinIcon label="Clinia on LinkedIn" />

Any other icon comes from Material Symbols. One that Clinia doesn't ship yet joins the set through the current process. A new Carbon override goes through the same process, and only once Material has no icon for the idea.

Using an icon

The marketing base installs the set, one module per icon in components/ui/icons/marketing/, with the Carbon overrides in carbon/ beside it. To add it to a site that was set up another way:

pnpm dlx shadcn@latest add @clinia/marketing-icons

Import the module for the icon you need:

import { MarketingSearchIcon } from "@/components/ui/icons/marketing/search"
 
<MarketingSearchIcon />

The default size is 64. Set another with size, or with a Tailwind size utility:

<MarketingSearchIcon size={96} />
<MarketingSearchIcon className="size-12" />

Every icon draws in currentColor, so it inherits from whatever it sits in. Colour it by colouring the text: text-foreground by default, or text-accent for emphasis.

The props are the same as the utility icons: an icon with no label is decorative and stays out of the accessibility tree. Marketing icons sit beside a heading that already names the idea, so they rarely need one.

Don't

• Use a Carbon icon that isn't in the Carbon overrides, or install a Carbon package. A new override joins the set here first.
• Use a Carbon override in an app.
• Redraw an icon, add fills or change the stroke weight. A new icon comes from the brand file.