Add missing provider icons

[topher-lo]

/frontend/src/components/icons.tsx is missing the following provider icons:

• tools.abuseipdb
• tools.alertmedia
• tools.amazon_s3
• tools.ansible
• tools.aws_boto3
• tools.crowdsec
• tools.crowdstrike
• tools.elastic_security
• tools.elasticsearch
• tools.emailrep
• tools.exa
• tools.falconpy (reuse crowdstrike icon)
• tools.hackerone
• tools.hibp
• tools.ipinfo
• tools.jamf
• tools.jira
• tools.ldap (use https://lucide.dev/icons/file-key-2)
• tools.leakcheck
• tools.minio
• tools.notion
• tools.okta
• tools.okta_oar (reuse okta icon)
• tools.phishlabs
• tools.pymongo
• tools.runreveal (the SVG is already in OAuth integrations icons)
• tools.sentinel_one
• tools.sentry (the SVG is already in OAuth integrations icons)
• tools.slack_sdk (reuse Slack icon)
• tools.splunk
• tools.sublime
• tools.tavily
• tools.threatstream
• tools.urlscan
• tools.wazuh
• tools.zendesk

You MUST follow these guidelines on formatting icons:

Tracecat displays integration icons in two contexts:

1. OAuth Provider Icons - Authentication/integrations settings page
2. Workflow Tool Icons - Node picker when adding actions to workflows

The same icon component can be used in both places with appropriate styling for each context.
Icon System Architecture

Key Files

• frontend/src/components/icons.tsx - All icon definitions and mappings

Critical Constant

export const basicIconsCommon = "flex p-1 shrink-0 rounded-full items-center justify-center bg-stone-200/50"
This class provides proper padding, sizing, and container behavior for workflow tool icons only.

Two Icon Registries

1. UDFIcons - For workflow tools/actions

• Pattern: "tools.", "ai.", "core.*"
• Applies basicIconsCommon styling via wrapper div

2. providerIcons - For OAuth integrations

• Pattern: snake_case (e.g., microsoft_sentinel, azure_log_analytics)
• Uses custom className passed from ProviderIcon component

Step-by-Step Implementation Guide

Step 1: Create the Icon Component

Location: Add after similar icons (e.g., after MicrosoftSentinelIcon for Azure icons) Critical Requirements:

• ❌ DO NOT include basicIconsCommon in the icon component itself
• ✅ Only use className={className}
• ✅ Use appropriate viewBox (prefer 24 24 or larger for good padding)
• ✅ Use unique gradient IDs to avoid conflicts

Template:

export function MyServiceIcon({ className, ...rest }: IconProps) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      className={className}  // ← JUST className, no basicIconsCommon
      {...rest}
    >
      <defs>
        <linearGradient id="myservice-gradient-unique-id">
          <stop offset="0" stopColor="#color1" />
          <stop offset="1" stopColor="#color2" />
        </linearGradient>
      </defs>
      {/* SVG paths with proper spacing */}
    </svg>
  )
}

❌ WRONG - Don't do this:

// This will make OAuth icons too small!
export function MyServiceIcon({ className, ...rest }: IconProps) {
  return (
    <svg
      className={cn(basicIconsCommon, className)}  // ❌ NO!
      {...rest}
    >

Step 2: Add to UDFIcons (Workflow Tools)
Location: Around line 539, before the closing } Pattern: Wrap icon in div with basicIconsCommon
"tools.my_service": ({ className, ...rest }: IconProps) => (

), Why the wrapper? This applies the container styling needed for workflow tool icons without affecting OAuth provider icons. Step 3: Add to providerIcons (OAuth Integrations) Location: Around line 586, within providerIcons object Pattern: Wrap icon in div with just className my_service: ({ className, ...rest }) => (

), Why different? The ProviderIcon component passes its own styling via className, which includes proper sizing for OAuth icons.

Step 4: Verify
cd frontend && pnpm check

Common Patterns

Example 1: Service with OAuth + Tools

// Step 1: Icon Component (around line 1100)
export function MyServiceIcon({ className, ...rest }: IconProps) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      className={className}
      {...rest}
    >
      {/* SVG content */}
    </svg>
  )
}

// Step 2: UDFIcons entry (around line 539)
"tools.my_service": ({ className, ...rest }: IconProps) => (
  <div className={cn(basicIconsCommon, className)}>
    <MyServiceIcon {...rest} />
  </div>
),

// Step 3: providerIcons entry (around line 586)
my_service: ({ className, ...rest }) => (
  <div className={className}>
    <MyServiceIcon {...rest} />
  </div>
),
Example 2: Reusing Existing Icons
// If SlackIcon already exists, just add aliases:

// For AI tool
"ai.slackbot": (props: IconProps) => <SlackIcon {...props} />,

// For different tool namespace
"tools.slack_alerts": ({ className, ...rest }: IconProps) => (
  <div className={cn(basicIconsCommon, className)}>
    <SlackIcon {...rest} />
  </div>
)

ViewBox and Spacing Guidelines

Recommended ViewBox Sizes

• 24x24 - Good default, plenty of padding space
• 18x18 - Minimum, requires careful content positioning
• Larger (e.g., 438x438) - Fine if content is naturally padded

Content Spacing

For a 24x24 viewBox:

• Leave 3-5 units padding on each edge
• Content should be roughly in range: x=4-20, y=4-20

For an 18x18 viewBox:

• Leave 2-3 units padding on each edge
• Content should be roughly in range: x=2-16, y=2-16

Troubleshooting

Problem: OAuth icons too small
Cause: Icon component has basicIconsCommon built-in Solution: Remove basicIconsCommon from icon component, only use className={className}

Problem: Workflow tool icons too large
Cause: UDFIcons entry doesn't wrap icon with basicIconsCommon Solution: Wrap icon in div with basicIconsCommon:

"tools.service": ({ className, ...rest }: IconProps) => (
  <div className={cn(basicIconsCommon, className)}>
    <ServiceIcon {...rest} />
  </div>
),

Problem: Icon cut off at edges
Cause: ViewBox too small or content extends to edges Solution:

• Increase viewBox size
• Adjust content to leave padding space

Problem: Gradient conflicts
Cause: Duplicate gradient IDs Solution: Use unique, descriptive IDs:

• ✅ id="github-gradient"
• ✅ id="azure-log-gradient"
• ❌ id="gradient"

Quick Reference Checklist

•  Icon component uses only className={className} (no basicIconsCommon)
•  ViewBox provides adequate padding (24x24 or larger preferred)
•  Gradient IDs are unique across all icons
•  UDFIcons entry wraps icon with <div className={cn(basicIconsCommon, className)}>
•  providerIcons entry wraps icon with 
•  File compiles: cd frontend && pnpm check
•  Visually verify in both contexts (OAuth list + workflow node picker)

Key Principle

The icon component is "styling-agnostic" - it accepts whatever className is passed to it. The parent context (UDFIcons or providerIcons) decides what styling to apply:

• UDFIcons: Adds basicIconsCommon for workflow tool icon sizing
• providerIcons: Passes through custom className for OAuth icon sizing
  This separation of concerns allows the same icon to look correct in both places without conflicts.

[sajdakabir]

@topher-lo i would love to work on this issue. could you please assign it to me?

[topher-lo]

@topher-lo i would love to work on this issue. could you please assign it to me?

Hey @sajdakabir I'm already taking this on! But thank you for offering