Icons & Logos

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

Logos

ElctoLogo

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" />

ElcapitanoLogo

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:

Prop	Type	Default	Description
`className`	`string`	`'w-5 h-5'`	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>

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

The mapping is driven by AuditEventIcons / getAuditEventIconName from @elcto/api (shared/api/src/types/audit.ts).

Event Types	Icon	Description
`login`, `login_failed`	LogIn	Sign-in events
`logout`	LogOut	Sign-out events
`2fa_enabled`, `2fa_verified`, `2fa_backup_codes_regenerated`	Shield	Two-factor auth events
`2fa_failed`	AlertTriangle	Failed 2FA
`2fa_disabled`	Unlock	2FA disabled
`password_changed`, `password_reset_requested`	Lock	Password events
`session_created`, `session_revoked`, `all_sessions_revoked`	Key	Session events
`user_created`, `user_updated`, `user_deleted`, `deletion_scheduled`, `deletion_cancelled`	User	User account events
`user_banned`, `user_unbanned`, `role_*`, `permission_changed`	Shield	Admin/role events
`consent_granted`, `consent_revoked`, `token_`, `client_`, `platform_setting_updated`, `device_*`	Settings	OAuth/settings/device events
`account_linked`, `account_unlinked`, `integration_*`	Link	Account linking & integrations
`data_exported`, `file_downloaded`	Download	Data/file export
`email_change_requested`	Mail	Email events
`activity_reported`, `report_updated`	Flag	Reports
`api_key_created`, `api_key_revoked`, `api_key_regenerated`, `permission_created/updated/deleted`	Key	API key & permission events
`bot_command_executed`	Bot	Bot events
`geofence_`, `location_`	MapPin	Geofence & location events
`trip_*`	Compass	Trip events
default	History	Fallback 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.

Logos​

ElctoLogo​

ElcapitanoLogo​

Platform Icons​

Usage​

Available Icons​

TwitchIcon​

DiscordIcon​

YouTubeIcon​

KickIcon​

SteamIcon​

TrovoIcon​

GitHubIcon​

TwitterIcon​

Props​

Sizing​

With Platform Colors​

Social Login Buttons​

Audit Event Icons​

AuditIcon Component​

Helper Functions​

Event Type to Icon Mapping​

Usage in Activity Pages​

Other Icons​