Brand

Displays a brand icon in multi-color or mono variant.

Variant

The variant attribute controls whether the icon renders in color or mono. The default is color.

<script setup lang="ts">
import { VBrand } from '@vonage/vivid-api-vue';
</script>

<template>
  <div style="display: flex; gap: 12px; align-items: center;">
    <VBrand name="android" label="Android" />
    <VBrand name="android" label="Android" variant="mono" />
  </div>
</template>

Size

Use the size attribute to select the icon’s size from a set of predefined values.

<script setup lang="ts">
import { VBrand } from '@vonage/vivid-api-vue';
</script>

<template>
  <table>
    <thead>
      <tr>
        <th>Size</th>
        <th>Default Dimension (px)</th>
        <th>Example</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>-6</td>
        <td>16px</td>
        <td>
          <VBrand name="vonage" size="-6" label="-6 example" />
        </td>
      </tr>
      <tr>
        <td>-5</td>
        <td>20px</td>
        <td>
          <VBrand name="vonage" size="-5" label="-5 example" />
        </td>
      </tr>
      <tr>
        <td>-4</td>
        <td>24px</td>
        <td>
          <VBrand name="vonage" size="-4" label="-4 example" />
        </td>
      </tr>
      <tr>
        <td>-3</td>
        <td>28px</td>
        <td>
          <VBrand name="vonage" size="-3" label="-3 example" />
        </td>
      </tr>
      <tr>
        <td>-2</td>
        <td>32px</td>
        <td>
          <VBrand name="vonage" size="-2" label="-2 example" />
        </td>
      </tr>
      <tr>
        <td>-1</td>
        <td>36px</td>
        <td>
          <VBrand name="vonage" size="-1" label="-1 example" />
        </td>
      </tr>
      <tr>
        <td>0</td>
        <td>40px</td>
        <td>
          <VBrand name="vonage" size="0" label="0 example" />
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>44px</td>
        <td>
          <VBrand name="vonage" size="1" label="1 example" />
        </td>
      </tr>
      <tr>
        <td>2</td>
        <td>48px</td>
        <td>
          <VBrand name="vonage" size="2" label="2 example" />
        </td>
      </tr>
      <tr>
        <td>3</td>
        <td>52px</td>
        <td>
          <VBrand name="vonage" size="3" label="3 example" />
        </td>
      </tr>
      <tr>
        <td>4</td>
        <td>56px</td>
        <td>
          <VBrand name="vonage" size="4" label="4 example" />
        </td>
      </tr>
      <tr>
        <td>5</td>
        <td>60px</td>
        <td>
          <VBrand name="vonage" size="5" label="5 example" />
        </td>
      </tr>
    </tbody>
  </table>
</template>

<style>
table {
  border-collapse: collapse;
}
th,
td {
  text-align: right;
  padding: 8px;
  border: 1px solid var(--vvd-color-neutral-200);
}
</style>

<table>
  <thead>
    <tr>
      <th>Size</th>
      <th>Default Dimension (px)</th>
      <th>Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>-6</td>
      <td>16px</td>
      <td><vwc-brand name="vonage" size="-6" label="-6 example"></vwc-brand></td>
    </tr>
    <tr>
      <td>-5</td>
      <td>20px</td>
      <td><vwc-brand name="vonage" size="-5" label="-5 example"></vwc-brand></td>
    </tr>
    <tr>
      <td>-4</td>
      <td>24px</td>
      <td><vwc-brand name="vonage" size="-4" label="-4 example"></vwc-brand></td>
    </tr>
    <tr>
      <td>-3</td>
      <td>28px</td>
      <td><vwc-brand name="vonage" size="-3" label="-3 example"></vwc-brand></td>
    </tr>
    <tr>
      <td>-2</td>
      <td>32px</td>
      <td><vwc-brand name="vonage" size="-2" label="-2 example"></vwc-brand></td>
    </tr>
    <tr>
      <td>-1</td>
      <td>36px</td>
      <td><vwc-brand name="vonage" size="-1" label="-1 example"></vwc-brand></td>
    </tr>
    <tr>
      <td>0</td>
      <td>40px</td>
      <td><vwc-brand name="vonage" size="0" label="0 example"></vwc-brand></td>
    </tr>
    <tr>
      <td>1</td>
      <td>44px</td>
      <td><vwc-brand name="vonage" size="1" label="1 example"></vwc-brand></td>
    </tr>
    <tr>
      <td>2</td>
      <td>48px</td>
      <td><vwc-brand name="vonage" size="2" label="2 example"></vwc-brand></td>
    </tr>
    <tr>
      <td>3</td>
      <td>52px</td>
      <td><vwc-brand name="vonage" size="3" label="3 example"></vwc-brand></td>
    </tr>
    <tr>
      <td>4</td>
      <td>56px</td>
      <td><vwc-brand name="vonage" size="4" label="4 example"></vwc-brand></td>
    </tr>
    <tr>
      <td>5</td>
      <td>60px</td>
      <td><vwc-brand name="vonage" size="5" label="5 example"></vwc-brand></td>
    </tr>
  </tbody>
</table>

<style>
  table {
    border-collapse: collapse;
  }
  th,
  td {
    text-align: right;
    padding: 8px;
    border: 1px solid var(--vvd-color-neutral-200);
  }
</style>

Decorative vs Informative

When label is omitted (or whitespace-only), the brand icon is treated as decorative and aria-hidden="true" is applied automatically.