previews.components.brand-icon.default.blade.php Blade

<div class="flex flex-wrap items-center gap-4 text-foreground">
    @foreach (['x', 'youtube', 'instagram', 'tiktok', 'linkedin', 'pinterest', 'vimeo'] as $platform)
        <x-ui.brand-icon :name="$platform" size="lg" :label="true" />
    @endforeach
</div>

Installation

terminal

php artisan ui:add brand-icon

Registry contract

php artisan ui:add brand-icon writes only the files below. The CLI validates each file hash before writing and asks before it replaces a local change, unless you pass --force.

blade resources/views/components/ui/brand-icon.blade.php

Registry dependencies: None — installs on its own.
Packages: composer: jml/brok:^0.2

Use with AI

A brief for your coding agent: install command, usage, props, guidance and the rules. Copy it, or open a prompt about this component in an assistant.

brand-icon.md

# Brok UI: Brand Icon (`brand-icon`)

A platform mark (X, YouTube, Instagram, TikTok, LinkedIn, Pinterest, Vimeo) as one inline SVG from Simple Icons (CC0 1.0), in currentColor or an opt-in brand colour, decorative or labelled.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add brand-icon
```

## Usage

```blade
<div class="flex flex-wrap items-center gap-4 text-foreground">
    @foreach (['x', 'youtube', 'instagram', 'tiktok', 'linkedin', 'pinterest', 'vimeo'] as $platform)
        <x-ui.brand-icon :name="$platform" size="lg" :label="true" />
    @endforeach
</div>
```

## Props

- `name` (x|youtube|instagram|tiktok|linkedin|pinterest|vimeo, default `null`) — Platform key, case-insensitive; twitter is an alias of x. An unknown or empty name renders nothing and never throws.
- `size` (md|xs|sm|lg|xl, default `md`) — The icon size scale shared with icon: 12, 16, 20, 24 or 32px.
- `label` (string|bool|null, default `null`) — Accessible name. A string or true (the platform name) renders role="img" with aria-label and a <title>; null leaves the mark decorative with aria-hidden="true".
- `tone` (current|brand, default `current`) — current draws the mark in currentColor. brand uses the platform colour through the --brand-icon-<name> custom property in ui.css, and uses the owner's permitted alternate (white, or Vimeo's #141A20 and #17D5FF) where that colour is under 3:1 on the theme surface; high contrast mode keeps currentColor.

## Use when

- Use to summarize, sequence, or present data so users can scan it quickly.
- Naming the platform a link, post, video or source comes from with its recognisable mark.
- A chip, row or card needs a single platform glyph that follows the text colour, or the platform's own colour on request.

## Avoid when

- Do not add display-only ornament when the user needs actionable structure or exact comparison instead.
- A standard interface glyph; use icon.
- Your own product logo; use brand.
- A row of social profile links; use social-links.
- The mark would suggest the platform sponsors or endorses the page; trademark owners forbid that use.

## Anti-patterns

- Adding display ornament without informational value

## Rules

- Use the `<brok:brand-icon>` tag (or `<x-ui.brand-icon>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/brand-icon
- Registry JSON (files, props, contract): https://brokui.dev/r/open/brand-icon.json

Ask about Brand Icon in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

Examples

Labelled

labelled.blade.php Blade

<div class="flex flex-col gap-3 text-sm text-foreground">
    <p class="flex items-center gap-2">
        <x-ui.brand-icon name="vimeo" size="sm" />
        <span>{{ __('Decorative: the visible text names the platform.') }}</span>
    </p>
    <p class="flex items-center gap-2">
        <x-ui.brand-icon name="linkedin" size="md" :label="__('Posted on LinkedIn')" />
        <span class="text-muted-foreground">{{ __('Labelled: the mark stands alone and carries its own name.') }}</span>
    </p>
</div>

Long Content

long-content.blade.php Blade

<div class="max-w-xs">
    <p class="flex min-w-0 items-start gap-2 text-sm text-foreground">
        <x-ui.brand-icon name="youtube" size="md" tone="brand" />
        <span class="min-w-0 break-words">{{ __('A very long video title from a channel with an extraordinarily descriptive name that wraps onto several lines') }}</span>
    </p>
</div>

Sizes

sizes.blade.php Blade

<div class="flex flex-wrap items-end gap-4 text-foreground">
    @foreach (['xs', 'sm', 'md', 'lg', 'xl'] as $size)
        <x-ui.brand-icon name="youtube" :size="$size" :label="true" />
    @endforeach
</div>

Tones

tones.blade.php Blade

<div class="flex flex-col gap-4">
    <div class="flex flex-wrap items-center gap-4 text-foreground">
        @foreach (['x', 'youtube', 'instagram', 'tiktok', 'linkedin', 'pinterest', 'vimeo'] as $platform)
            <x-ui.brand-icon :name="$platform" size="lg" tone="brand" :label="true" />
        @endforeach
    </div>
    <div class="flex flex-wrap items-center gap-4 rounded-md bg-muted p-3 text-muted-foreground">
        @foreach (['x', 'youtube', 'instagram', 'tiktok', 'linkedin', 'pinterest', 'vimeo'] as $platform)
            <x-ui.brand-icon :name="$platform" size="lg" tone="brand" :label="true" />
        @endforeach
    </div>
</div>

Unknown

unknown.blade.php Blade

<div class="flex items-center gap-2 text-sm text-foreground">
    <x-ui.brand-icon name="myspace" />
    <x-ui.brand-icon name="twitter" :label="true" />
    <span>{{ __('An unknown name renders nothing; twitter is an alias of x.') }}</span>
</div>

API

manifest knowledge + registry-derived coverage

Props

Props accepted by this component: name, type, default value and description.
Prop	Type	Default	Description
name	x \| youtube \| instagram \| tiktok \| linkedin \| pinterest \| vimeo	null	Platform key, case-insensitive; twitter is an alias of x. An unknown or empty name renders nothing and never throws.
size	md \| xs \| sm \| lg \| xl	md	The icon size scale shared with icon: 12, 16, 20, 24 or 32px.
label	string \| bool \| null	null	Accessible name. A string or true (the platform name) renders role="img" with aria-label and a <title>; null leaves the mark decorative with aria-hidden="true".
tone	current \| brand	current	current draws the mark in currentColor. brand uses the platform colour through the --brand-icon-<name> custom property in ui.css, and uses the owner's permitted alternate (white, or Vimeo's #141A20 and #17D5FF) where that colour is under 3:1 on the theme surface; high contrast mode keeps currentColor.

Slots

Default Blade slot only.

Data slots

Stable hooks for CSS overrides and browser tests.

brand-icon

Behavior

Renders one 24x24 inline SVG path with fill="currentColor"; no JavaScript, no network request, no external asset.
tone="brand" sets data-tone="brand"; ui.css maps data-name to the brand colour per theme root. Light theme: every mark uses its colour, Vimeo its #141A20. Dark theme: YouTube and Instagram use their colour, X, TikTok, LinkedIn and Pinterest use white, Vimeo its #17D5FF. The default tone="current" is a monochrome mark; for LinkedIn, Pinterest and Vimeo prefer tone="brand" or a black or white text colour, because their owners permit only those colours. A consumer ui.css without these rules falls back to currentColor.
Marks never mirror in RTL.
Provenance: paths from Simple Icons (https://github.com/simple-icons/simple-icons), CC0 1.0, retrieved 2026-09-30. simple-icons 16.33.0 for X, YouTube, Instagram, TikTok, Pinterest and Vimeo; 13.21.0 for LinkedIn, which Simple Icons removed in 14.0.0 (PR #11380, issue #11372) because of LinkedIn's brand policy. Brand colours are the Simple Icons hex values.
Trademarks: every mark is a trademark of its owner, used only to name that platform. CC0 grants no trademark rights. Do not alter, outline, recolour outside the owner's permitted colours, or combine a mark with other artwork, and do not imply affiliation. Owner guidelines: X https://about.x.com/en/who-we-are/brand-toolkit, YouTube https://www.youtube.com/howyoutubeworks/resources/brand-resources/, Instagram https://about.meta.com/brand/resources/instagram, TikTok none listed by Simple Icons (source https://tiktok.com), LinkedIn https://brand.linkedin.com/policies, Pinterest https://business.pinterest.com/en/brand-guidelines, Vimeo https://press.vimeo.com/brand-guidelines.
Declares registry capability flags: a11y, authoredStateFixtures, responsive, rtl, darkMode, localized.

Guidance

Scannable data display

Present data for rapid scanning.

Use when

Use to summarize, sequence, or present data so users can scan it quickly.
Naming the platform a link, post, video or source comes from with its recognisable mark.
A chip, row or card needs a single platform glyph that follows the text colour, or the platform's own colour on request.

Avoid when

Do not add display-only ornament when the user needs actionable structure or exact comparison instead.
A standard interface glyph; use icon.
Your own product logo; use brand.
A row of social profile links; use social-links.
The mark would suggest the platform sponsors or endorses the page; trademark owners forbid that use.

Use instead

Table for exact comparison
Plain text for a single value

Anti-patterns

Adding display ornament without informational value

Anatomy: root (svg) title (labelled mode only) path
Theming hooks: currentColor by default --brand-icon-x, --brand-icon-youtube, --brand-icon-instagram, --brand-icon-tiktok, --brand-icon-linkedin, --brand-icon-pinterest, --brand-icon-vimeo (set on :root/.light and .dark in ui.css)

Accessibility

WCAG 2.2 AA Keyboard focus-visible RTL-ready Localized labels Dark mode

Keyboard: No component-owned keyboard interaction; native element behavior applies.
Focus: none

Decorative by default (aria-hidden="true", focusable="false"): pair it with visible text that names the platform.
Pass label (or :label="true") when the mark stands alone; the SVG then exposes role="img" with an aria-label and a <title>.
tone="brand" only uses a brand colour where it reaches 3:1 against the theme's page and muted surfaces (WCAG 1.4.11); elsewhere, and in high contrast mode, the mark keeps the text colour.

Semantic HTML and a stable data-slot attribute for styling and scripting hooks.
Focus-visible rings use the ring token, so keyboard focus is always visible.
Disabled and invalid states are conveyed to assistive tech, not by color alone.
Targets WCAG 2.2 AA; verify contrast in light, dark, admin and customer surfaces in the preview.
Labels go through __() and layout uses logical properties (ms-*, text-start), so it mirrors under dir="rtl" — flip the preview to RTL to confirm.
Dark mode uses the same semantic tokens under the dark class; high contrast follows forced-color system tokens.

Livewire

Safe

Livewire can update this component through forwarded wire:* attributes.

Source

The exact, editable file ui:add writes into your app. Previews render this same code; there are no preview-only components.

resources/views/components/ui/brand-icon.blade.php Blade

@props([
    'name' => null,
    'size' => 'md',
    'label' => null,
    'tone' => 'current',
])

{{--
    Brand Icon: a platform mark drawn as one inline SVG path.

    Source: Simple Icons (https://simpleicons.org, https://github.com/simple-icons/simple-icons),
    released under CC0 1.0 Universal (LICENSE.md in that repository). Retrieved 2026-09-30.
    X, YouTube, Instagram, TikTok, Pinterest and Vimeo: simple-icons 16.33.0 (icons/<slug>.svg).
    LinkedIn: simple-icons 13.21.0, the last release that shipped it (removed in 14.0.0 through
    simple-icons PR #11380 after issue #11372 cited LinkedIn's brand policy).
    CC0 waives copyright only. It grants no trademark rights (CC0 section 4.1). Every mark is a
    trademark of its owner and is used here only to name that platform; its use implies no
    affiliation or endorsement. Do not redraw, recolour outside the owner's permitted colours,
    or combine a mark with other artwork. Read each owner's guidelines before you use a mark.
--}}
@php
    $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
    $sizeClass = $styles['icon']['sizes'][$size] ?? $styles['icon']['sizes']['md'];

    $marks = [
        'x' => ['title' => 'X', 'path' => 'M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z'],
        'youtube' => ['title' => 'YouTube', 'path' => 'M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'],
        'instagram' => ['title' => 'Instagram', 'path' => 'M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'],
        'tiktok' => ['title' => 'TikTok', 'path' => 'M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'],
        'linkedin' => ['title' => 'LinkedIn', 'path' => 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'],
        'pinterest' => ['title' => 'Pinterest', 'path' => 'M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z'],
        'vimeo' => ['title' => 'Vimeo', 'path' => 'M23.9765 6.4168c-.105 2.338-1.739 5.5429-4.894 9.6088-3.2679 4.247-6.0258 6.3699-8.2898 6.3699-1.409 0-2.578-1.294-3.553-3.881l-1.9179-7.1138c-.719-2.584-1.488-3.878-2.312-3.878-.179 0-.806.378-1.8809 1.132l-1.129-1.457a315.06 315.06 0 003.501-3.1279c1.579-1.368 2.765-2.085 3.5539-2.159 1.867-.18 3.016 1.1 3.447 3.838.465 2.953.789 4.789.971 5.5069.5389 2.45 1.1309 3.674 1.7759 3.674.502 0 1.256-.796 2.265-2.385 1.004-1.589 1.54-2.797 1.612-3.628.144-1.371-.395-2.061-1.614-2.061-.574 0-1.167.121-1.777.391 1.186-3.8679 3.434-5.7568 6.7619-5.6368 2.4729.06 3.6279 1.664 3.4929 4.7969z'],
    ];
    $aliases = ['twitter' => 'x'];

    $key = mb_strtolower(trim((string) $name));
    $key = $aliases[$key] ?? $key;
    $mark = $marks[$key] ?? null;
    $tone = $tone === 'brand' ? 'brand' : 'current';
    $spoken = $label === true ? ($mark['title'] ?? '') : (is_string($label) ? trim($label) : '');
@endphp

@if ($mark !== null)
<svg
    data-slot="brand-icon"
    data-name="{{ $key }}"
    data-tone="{{ $tone }}"
    viewBox="0 0 24 24"
    fill="currentColor"
    @if ($spoken !== '') role="img" aria-label="{{ $spoken }}" @else aria-hidden="true" focusable="false" @endif
    {{ $attributes->class([$sizeClass, 'shrink-0']) }}
>
    @if ($spoken !== '')
        <title>{{ $spoken }}</title>
    @endif
    <path d="{{ $mark['path'] }}" />
</svg>
@endif

Preview