# BrandIconSet

> The Crew OS brand icon set, `Icons` in the app and `DC.BrandIcons` here: the Digital Crew mark, compliance seals, and partner and integration marks as inline SVG components.

## Facts

- **Product**: Crew OS
- **Family**: Marketing
- **Kind**: Showcase page (tokens and patterns)
- **Source**: `digitalcrew-orchestrator: components/icons.tsx`
- **Live preview**: /design/components/brand-icon-set/preview.html
- **Page**: /design/components/brand-icon-set

## Guidelines

**Use it for** the logo in marketing headers and chat avatars, trust rows (SOC 2, HIPAA, GDPR), and "works with" rows (Vercel, Replit, PostHog, Google Drive, WorkOS, Runway, Gemini, Boat, Supabase, Figma).

**What you provide**: render a key as a component, e.g. `<BrandIcons.logo className="size-6" />`. The keys are `logo`, `soc2`, `soc2Dark`, `hipaa`, `hipaaDark`, `gdpr`, `gdprDark`, `vercel`, `replit`, `posthog`, `googleDrive`, `workos`, `runwayml`, `gemini`, `boat`, `supabase`, `figma`. Only `logo` and the seals accept `className`; the partner marks take no props.

**Anatomy**: `logo` is a 42 × 24 mark defaulting to `size-4` and `fill-[var(--secondary)]`; pass a fill class such as `fill-foreground` (the paths inherit it). The seals are 46 × 45 (`soc2` and `gdpr` default to `size-4`), with `…Dark` variants for dark surfaces. Partner marks render at a fixed 52 × 60 (Google Drive 100 × 100) with their own colours and badge backgrounds.

**Behaviour**: static SVG.

**Don't** recolour partner marks, use a light seal on a dark surface (use the `…Dark` key), or stretch the logo out of its 7 : 4 ratio.

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons, B = DC.BrandIcons;
  // logo and the compliance seals take a className; the partner marks render at their own 52 × 60 size.
  var sized = { logo: "h-8 w-auto fill-foreground", soc2: "size-12", soc2Dark: "size-12", hipaa: "size-12", hipaaDark: "size-12", gdpr: "size-12", gdprDark: "size-12" };
  function App() {
    return h("div", { className: "grid grid-cols-6 gap-3" }, Object.keys(B).map(function (k) {
      var dark = /Dark$/.test(k);
      return h("figure", { key: k, className: "grid justify-items-center gap-2 rounded-xl border bg-card p-3" },
        h("div", { className: "flex h-16 w-full items-center justify-center rounded-lg [&_svg]:max-h-14 [&_svg]:max-w-full " + (dark ? "bg-neutral-900" : "") }, h(B[k], { className: sized[k] })),
        h("figcaption", { className: "text-muted-foreground font-mono text-xs" }, k));
    }));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Marketing

- [BentoSection](/design/components/bento-section.md): The landing-page bento: a `SectionHeader` over a two-by-two grid of animated tiles (collaboration, security, insights, automation), each with a title and description.
- [BrandBadge](/design/components/brand-badge.md): A rounded pill in any brand colour, in three weights: solid, outline and subtle.
- [BrandStatCard](/design/components/brand-stat-card.md): A frosted summary card for a headline number, tinted with one brand colour: icon tile, badge, uppercase label, big value and a subtitle.
- [ConnectSection](/design/components/connect-section.md): The "Connect your context" section: one rounded panel with a heading, a tools row (integration logos orbiting the Digital Crew mark) and a knowledge row (the `CosmicSynapseCanvas` neuron sphere).
- [CpuSuperposition](/design/components/cpu-superposition.md): The features block of the Crew OS landing page: the `CpuArchitecture` circuit on top, overlapping the five glowing value cards of `FeaturesGridWithGlowingEffect` below it.
- [CrewNetwork](/design/components/crew-network.md): The "How work moves through the network" section: a live mission card and a four-step timeline (ask, match, work, paid) that plays through six real-looking missions, showing a Digital Worker handing a brief to a human operator.
- [CTASection](/design/components/cta-section.md): The closing call to action: a dark gradient panel with Camille's looping portrait video, a heading, a short line and one glass button to contact the team.
- [FAQSection](/design/components/faq-section.md): The landing-page FAQ: a `SectionHeader` and seventeen questions in a single-open, collapsible accordion.
- [FeatureSection](/design/components/feature-section.md): The Crew Network hero: a giant three-line headline ("Discover / the internet / of actions") over a slowly turning WebGL globe laced with glowing connection arcs, then a description and three stats.
- [FeaturesGridWithGlowingEffect](/design/components/features-grid-with-glowing-effect.md): The five value cards of the Crew OS landing page (cut waste, run lean, always on, reliable by default, shared knowledge), each wrapped in a pointer-following `GlowingEffect`.
- [SectionHeader](/design/components/section-header.md): The centred intro block that opens every Crew OS marketing section: generous padding, a bottom rule, and whatever eyebrow, heading and lede you pass in.
- [SectionSolutions](/design/components/section-solutions.md): The "Hire your Crew" section: a numbered roster of six Digital Workers beside a dossier card for the selected one, advancing on its own until the visitor picks someone.
- [SocialProofTestimonials](/design/components/social-proof-testimonials.md): A wall of customer quotes: `TestimonialCard`s stacked in columns that scroll vertically at different speeds, fading out at the top and bottom.