@lobehub/icons
Version:
Popular AI / LLM Model Brand SVG Logo and Icon Collection
104 lines (84 loc) • 1.91 kB
text/mdx
---
title: Google
description: https://google.com
category: Provider
---
import { Google } from '@lobehub/icons';
import { Flexbox } from '@lobehub/ui';
import ColorPreview from '../components/ColorPreview';
import DocsPreview from '../components/DocsPreview';
## Icons
<DocsPreview>
{
<Flexbox gap={16} horizontal>
<Google size={64} />
<Google.Color size={64} />
</Flexbox>
}
</DocsPreview>
```tsx
import { Google } from '@lobehub/icons';
import { Flexbox } from '@lobehub/ui';
export default () => (
<Flexbox gap={16} horizontal>
<Google size={64} />
<Google.Color size={64} />
</Flexbox>
);
```
## Brands
<DocsPreview>
{
<Flexbox gap={16} align={'flex-start'}>
<Google.Brand size={64} />
<Google.BrandColor size={64} />
</Flexbox>
}
</DocsPreview>
```tsx
import { Google } from '@lobehub/icons';
import { Flexbox } from '@lobehub/ui';
export default () => (
<Flexbox gap={16} align={'flex-start'}>
<Google.Brand size={64} />
<Google.BrandColor size={64} />
</Flexbox>
);
```
## Avatars
<DocsPreview>
{
<Flexbox gap={16} horizontal>
<Google.Avatar size={64} />
<Google.Avatar size={64} shape={'square'} />
</Flexbox>
}
</DocsPreview>
```tsx
import { Google } from '@lobehub/icons';
import { Flexbox } from '@lobehub/ui';
export default () => (
<Flexbox gap={16} horizontal>
<Google.Avatar size={64} />
<Google.Avatar size={64} shape={'square'} />
</Flexbox>
);
```
## Colors
<DocsPreview>
{
<Flexbox gap={16} horizontal>
<ColorPreview color={Google.colorPrimary} />
</Flexbox>
}
</DocsPreview>
```tsx
import { Google } from '@lobehub/icons';
import { Flexbox } from '@lobehub/ui';
import ColorPreview from '../components/ColorPreview';
export default () => (
<Flexbox gap={16} horizontal>
<ColorPreview color={Google.colorPrimary} />
</Flexbox>
);
```