title: Animated Logo Cloud
description: Animated company cloud logs. Usually we can use to show company logos.
---

```vue
<template>
  <div>
    <StaticLogoCloud
      :logos
      title="Sponsored By"
    />
  </div>
</template>

<script lang="ts" setup>
const logos = [
  {
    name: "Vercel",
    path: "https://res.cloudinary.com/dfhp33ufc/image/upload/v1715881430/vercel_wordmark_dark_mhv8u8.svg",
  },
  {
    name: "Trustpilot",
    path: "https://res.cloudinary.com/dfhp33ufc/image/upload/v1715276558/logos/tkfspxqmjflfllbuqxsi.svg",
  },
  {
    name: "Webflow",
    path: "https://res.cloudinary.com/dfhp33ufc/image/upload/v1715276560/logos/nymiivu48d5lywhf9rpf.svg",
  },
  {
    name: "Airbnb",
    path: "https://res.cloudinary.com/dfhp33ufc/image/upload/v1715276558/logos/pmblusboe7vkw8vxdknx.svg",
  },
  {
    name: "Tina",
    path: "https://res.cloudinary.com/dfhp33ufc/image/upload/v1715276560/logos/afqhiygywyphuou6xtxc.svg",
  },
];
</script>

```

## Install using CLI

```vue
<InstallationCli component-id="logo-cloud" />
```

## Install Manually

Copy and paste the following code in the same folder

::code-group

:CodeViewerTab{label="AnimatedLogoCloud.vue" language="vue" componentName="AnimatedLogoCloud" type="ui" id="logo-cloud"}
:CodeViewerTab{label="IconLogoCloud.vue" language="vue" componentName="IconLogoCloud" type="ui" id="logo-cloud"}
:CodeViewerTab{label="StaticLogoCloud.vue" language="vue" componentName="StaticLogoCloud" type="ui" id="logo-cloud"}
:CodeViewerTab{filename="index.ts" language="typescript" componentName="index" type="ui" id="logo-cloud" extension="ts"}

::

## Examples

### Animated logs

Animated company logos.

```vue
<template>
  <div>
    <AnimatedLogoCloud
      :logos
      title="Trusted by Companies like"
    />
  </div>
</template>

<script lang="ts" setup>
const logos = [
  {
    name: "Vercel",
    path: "https://res.cloudinary.com/dfhp33ufc/image/upload/v1715881430/vercel_wordmark_dark_mhv8u8.svg",
  },
  {
    name: "Prime",
    path: "https://res.cloudinary.com/dfhp33ufc/image/upload/v1715276558/logos/t2awrrfzdvmg1chnzyfr.svg",
  },
  {
    name: "Trustpilot",
    path: "https://res.cloudinary.com/dfhp33ufc/image/upload/v1715276558/logos/tkfspxqmjflfllbuqxsi.svg",
  },
  {
    name: "Webflow",
    path: "https://res.cloudinary.com/dfhp33ufc/image/upload/v1715276560/logos/nymiivu48d5lywhf9rpf.svg",
  },
  {
    name: "Airbnb",
    path: "https://res.cloudinary.com/dfhp33ufc/image/upload/v1715276558/logos/pmblusboe7vkw8vxdknx.svg",
  },
  {
    name: "Tina",
    path: "https://res.cloudinary.com/dfhp33ufc/image/upload/v1715276560/logos/afqhiygywyphuou6xtxc.svg",
  },
  {
    name: "Stackoverflow",
    path: "https://res.cloudinary.com/dfhp33ufc/image/upload/v1715276558/logos/ts1j4mkooxqmscgptafa.svg",
  },
  {
    name: "mistral",
    path: "https://res.cloudinary.com/dfhp33ufc/image/upload/v1715276558/logos/tyos2ayezryjskox3wzs.svg",
  },
];
</script>

```

### Icon Logo

Company logo icons

```vue
<template>
  <div>
    <IconLogoCloud
      :logos
      title="Trusted by Companies like"
    />
  </div>
</template>

<script lang="ts" setup>
const logos = [
  {
    name: "Hume AI",
    path: "https://res.cloudinary.com/dfhp33ufc/image/upload/v1724242869/hume-ai_sxfeu8.svg",
  },
  {
    name: "Supabase",
    path: "https://res.cloudinary.com/dfhp33ufc/image/upload/v1724242819/supabase_bdbnvy.svg",
  },
  {
    name: "Apple",
    path: "https://res.cloudinary.com/dfhp33ufc/image/upload/v1724242912/apple_dark_wixhyc.svg",
  },
  {
    name: "Asana",
    path: "https://res.cloudinary.com/dfhp33ufc/image/upload/v1724243064/asana-logo_ulshgt.svg",
  },
  {
    name: "DigitalOcean",
    path: "https://res.cloudinary.com/dfhp33ufc/image/upload/v1724243142/digitalocean_werjgx.svg",
  },
  {
    name: "Github",
    path: "https://res.cloudinary.com/dfhp33ufc/image/upload/v1724243168/github-dark_u5eygu.svg",
  },
  {
    name: "Linear",
    path: "https://res.cloudinary.com/dfhp33ufc/image/upload/v1724243194/linear_dtq4zq.svg",
  },
  {
    name: "Loom",
    path: "https://res.cloudinary.com/dfhp33ufc/image/upload/v1724243196/loom_ehvtka.svg",
  },
];
</script>

```

## API

| Prop Name | Type     | Default                     | Description                                                    |
| --------- | -------- | --------------------------- | -------------------------------------------------------------- |
| `class`   | `string` | `-`                         | The delay in milliseconds before adding each item to the list. |
| `title`   | `string` | `Trusted by Companies like` | Title of animated logs.                                        |
| `logos`   | `[]`     | `[{name: "", path: ""}]`    | Array of items(logos) with name & path fields.                 |

## Credits

- Credits to [SivaReddy Uppathi](https://github.com/sivareddyuppathi) for this component.