Styling

import { ShopIcon } from "solite-icons";

<ShopIcon size={32} strokeWidth={1.75} color="#2563eb" />

Inherit text colorCopy Anchor Link

The default stroke is currentColor. An icon follows the color of its parent text.

import { ShopIcon } from "solite-icons";

<span style={{ color: "#2563eb" }}>
  <ShopIcon size={24} />
</span>;

Use color when you need an explicit stroke color:

<ShopIcon size={24} color="#2563eb" />

Tailwind CSSCopy Anchor Link

<ShopIcon className="size-5 shrink-0 text-blue-600 dark:text-blue-400" />

The icon has no dependency on Tailwind. The class names work when Tailwind is already configured in your app.

Plain CSSCopy Anchor Link

.toolbar-icon {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  flex-shrink: 0;
}

<ShopIcon className="toolbar-icon" />

Keep a consistent outlineCopy Anchor Link

Use the default strokeWidth={1.75} across a screen. A heavier stroke can help at small sizes:

<ShopIcon size={16} strokeWidth={2} />

The stroke scales with the SVG viewBox. The default 24px drawing grid does not change when you resize the rendered element.

Layout and spacingCopy Anchor Link

Pair the icon with a text label using flex or inline-flex. Let the parent control the gap.

<button className="inline-flex items-center gap-2">
  <ShopIcon size={18} />
  Manage shops
</button>

Avoid putting fixed margins inside a reusable icon component. The same glyph should work in buttons, navigation, and tables.