---
name: Thumbnail
menu: Atoms
route: /atoms/Thumbnail
---

import Thumbnail from './Thumbnail';
import { Playground, Props } from 'docz';
import Vintage from '../icons/Vintage';

# Thumbnail

This component renders an HTML `<Thumbnail>` and passes along all props.
Current available icons are:  Workshop, Classroom, Score, Intel and Vintage at typeUtility.
You can add your own icon using the customIcon prop.

## API
<Props of={Thumbnail} />

## Icon/M
<Playground>
  <h4>Inteligencia</h4>
  <Thumbnail number="3" typeUtility="Inteligencia" />
  <h4>Vintage</h4>
  <Thumbnail number="3" typeUtility="Vintage" />
  <h4>Administrador de garantías</h4>
  <Thumbnail number="3" typeUtility="Administrador de garantías" />
  <h4>Analytics</h4>
  <Thumbnail number="3" typeUtility="Analytics" />
  

</Playground>

## Icon/S
<Playground>
  <Thumbnail small />
</Playground>

## Text/M
<Playground>
  <Thumbnail color="#0573F7" text="Ipsum" />
</Playground>

## Text/S
<Playground>
  <Thumbnail color="#0573F7" text="Lorem" small />
</Playground>

## Custom icon
<Playground>
  <Thumbnail color="#0573F7" customIcon={<Vintage color="black" />} />
</Playground>