Skip to main content
Docs

Icons & Logos

SVG icons for social platforms, services, and brand logos. These are optimized for consistent sizing and styling.

Logos​

The compact elcapitano logo icon, suitable for small spaces like buttons or headers.

import { ElctoLogo } from "@elcto/ui/components";

<ElctoLogo className="w-8 h-8" />
<ElctoLogo className="w-8 h-8 text-brand" />

The full elcapitano wordmark logo, suitable for headers and standalone branding.

import { ElcapitanoLogo } from "@elcto/ui/components";

<ElcapitanoLogo className="w-40 h-auto" />
<ElcapitanoLogo className="w-40 h-auto text-primary" />

Default size: w-40 h-auto (160px wide, auto height)

Platform Icons​

Usage​

import {
  TwitchIcon,
  DiscordIcon,
  YouTubeIcon,
  KickIcon,
  SteamIcon,
  TrovoIcon,
  GitHubIcon,
  TwitterIcon,
} from "@elcto/ui/components";

<TwitchIcon className="w-5 h-5" />
<DiscordIcon className="w-5 h-5 text-[var(--discord)]" />

Available Icons​

TwitchIcon​

import { TwitchIcon } from "@elcto/ui/components";

<TwitchIcon className="w-5 h-5" />
<TwitchIcon className="w-5 h-5 text-[var(--twitch)]" />

Platform color: --twitch (#a970ff)

DiscordIcon​

import { DiscordIcon } from "@elcto/ui/components";

<DiscordIcon className="w-5 h-5" />
<DiscordIcon className="w-5 h-5 text-[var(--discord)]" />

Platform color: --discord (#5865f2)

YouTubeIcon​

import { YouTubeIcon } from "@elcto/ui/components";

<YouTubeIcon className="w-5 h-5" />
<YouTubeIcon className="w-5 h-5 text-[var(--youtube)]" />

Platform color: --youtube (#ff0000)

KickIcon​

import { KickIcon } from "@elcto/ui/components";

<KickIcon className="w-5 h-5" />
<KickIcon className="w-5 h-5 text-[var(--kick)]" />

Platform color: --kick (#53fc18)

SteamIcon​

import { SteamIcon } from "@elcto/ui/components";

<SteamIcon className="w-5 h-5" />
<SteamIcon className="w-5 h-5 text-[var(--steam)]" />

Platform color: --steam (#171a21)

TrovoIcon​

import { TrovoIcon } from "@elcto/ui/components";

<TrovoIcon className="w-5 h-5" />
<TrovoIcon className="w-5 h-5 text-[var(--trovo)]" />

Platform color: --trovo (#19d66b)

GitHubIcon​

import { GitHubIcon } from "@elcto/ui/components";

<GitHubIcon className="w-5 h-5" />
<GitHubIcon className="w-5 h-5 text-[var(--github)]" />

Platform color: --github (#333333)

TwitterIcon​

import { TwitterIcon } from "@elcto/ui/components";

<TwitterIcon className="w-5 h-5" />
<TwitterIcon className="w-5 h-5 text-[var(--twitter)]" />

Platform color: --twitter (#1da1f2)

Props​

All icons accept the same props:

PropTypeDefaultDescription
classNamestring-CSS classes (use for sizing)

Sizing​

Icons use currentColor for fill, so they inherit the text color. Use Tailwind classes for sizing:

// Small (16px)
<TwitchIcon className="w-4 h-4" />

// Medium (20px)
<TwitchIcon className="w-5 h-5" />

// Large (24px)
<TwitchIcon className="w-6 h-6" />

// Extra large (32px)
<TwitchIcon className="w-8 h-8" />

With Platform Colors​

Use CSS variables for platform-specific colors:

<div className="flex gap-4">
  <TwitchIcon className="w-5 h-5 text-[var(--twitch)]" />
  <DiscordIcon className="w-5 h-5 text-[var(--discord)]" />
  <YouTubeIcon className="w-5 h-5 text-[var(--youtube)]" />
  <KickIcon className="w-5 h-5 text-[var(--kick)]" />
</div>

Social Login Buttons​

Example of using icons in social login buttons:

import { Button } from "@elcto/ui/components";
import { TwitchIcon, DiscordIcon } from "@elcto/ui/components";

<Button
  variant="secondary"
  leftIcon={<TwitchIcon className="w-4 h-4" />}
  className="btn-twitch"
>
  Continue with Twitch
</Button>

<Button
  variant="secondary"
  leftIcon={<DiscordIcon className="w-4 h-4" />}
  className="btn-discord"
>
  Continue with Discord
</Button>

Audit Event Icons​

The AuditIcon component renders the appropriate icon for audit event types. It's used in activity logs and audit pages across all apps.

AuditIcon Component​

import { AuditIcon } from "@elcto/ui";

// Basic usage - renders icon based on event type
<AuditIcon eventType="login" className="w-4 h-4" />
<AuditIcon eventType="2fa_enabled" className="w-5 h-5" />
<AuditIcon eventType="password_changed" />

Helper Functions​

import {
  getAuditIconComponent,
  renderAuditIcon,
  renderIconByName,
  AuditIconElements,
} from "@elcto/ui";

// Get the icon component
const Icon = getAuditIconComponent("login");
<Icon className="w-4 h-4" />

// Render icon directly
{renderAuditIcon("login", "w-4 h-4")}

// Render by icon name
{renderIconByName("Shield", "w-4 h-4")}

// Pre-built size variants
{AuditIconElements.sm("login")}  // w-3 h-3
{AuditIconElements.md("login")}  // w-4 h-4
{AuditIconElements.lg("login")}  // w-5 h-5

Event Type to Icon Mapping​

Event TypesIconDescription
login, login_failedLogInSign-in events
logoutLogOutSign-out events
2fa_*ShieldTwo-factor auth events
password_*KeyPassword events
session_*UnlockSession events
user_*UserUser account events
account_linked, account_unlinkedLinkAccount linking
data_exportedDownloadData export
consent_*LockOAuth consent
email_*MailEmail events
settings_updatedSettingsSettings changes
api_key_*, activity_reportedAlertTriangleSecurity alerts
bot_*, discord_*BotBot events
defaultHistoryFallback icon

Usage in Activity Pages​

import { AuditIcon } from "@elcto/ui";
import { getAuditEventLabel } from "@elcto/api";

// In an audit event list
{events.map((event) => (
  <div key={event.id} className="flex items-center gap-3">
    <div className={cn(
      "w-8 h-8 rounded-lg flex items-center justify-center",
      event.status === "failure"
        ? "bg-[var(--error-bg)] text-[var(--error)]"
        : "bg-[var(--bg-3)] text-secondary"
    )}>
      <AuditIcon eventType={event.eventType} />
    </div>
    <span>{getAuditEventLabel(event.eventType)}</span>
  </div>
))}

Other Icons​

For general-purpose icons, use Lucide React:

import { Settings, User, LogOut, Plus } from "lucide-react";

<Settings className="w-5 h-5" />
<User className="w-5 h-5" />

Lucide React is already included as a dependency of @elcto/ui.