ChannelIcon
Every door a client can knock on, as one family of line icons in the text colour — Instagram and WhatsApp in their own marks.
Channels
Six channels, in the copy doc's order, drawn from Hugeicons' free stroke-rounded set (MIT) at a 1.5 stroke, size-5. Inside GlassIcons their lines become glass tubes.
import { ChannelIcon } from "@/components/shared/channel-icon";
<ChannelIcon channel="instagram" />
<ChannelIcon channel="whatsapp" />
<ChannelIcon channel="sms" />
<ChannelIcon channel="email" />
<ChannelIcon channel="phone" />
<ChannelIcon channel="link" />With its name
The icon is decorative; its name stands beside it. The landing's channel row under the live demo is the model: icon and name 6px apart, in the muted ink.
- SMS
- Phone
- Your Okami link
import { ChannelIcon } from "@/components/shared/channel-icon";
<li className="flex items-center gap-1.5">
<ChannelIcon channel="whatsapp" />
WhatsApp
</li>API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| channel | "instagram" | "whatsapp" | "sms" | "email" | "phone" | "link" | — | Which door. CHANNELS lists them in order, for rows like the landing's. |
| className | string | — | Size (size-5 by default) and colour — it strokes in the text colour. |
Guidelines
- Always beside the channel's name: the icon is hidden from assistive tech, so the name carries the meaning.
- One family, one colour: never brand colours, never mixed with another icon set in the same row.