[Home](/index.md) › [Icons](/icons.md) › PDF

# PDF

PDF (Portable Document Format) is the ISO 32000 file format created by Adobe for sharing documents that look the same on any device, readable in every browser.

## At a glance

- **Page**: https://devicons.io/icons/pdf/
- **Website**: https://www.adobe.com/acrobat.html
- **License**: https://www.adobe.com/legal/permissions/trademarks.html
- **Also known as**: Portable Document Format, Adobe PDF, PDF file, .pdf, ISO 32000
- **Tags**: [File Format](/icons/tag/file-format/), [Documents](/icons/tag/documents/), [Adobe](/icons/tag/adobe/), [Publishing](/icons/tag/publishing/)
- **Version added**: 1.3.0

## Files

Each file is one variant of this logo. The component name is derived from the file name.

| File | Component | Color SVG | Monochrome SVG | Font class |
| --- | --- | --- | --- | --- |
| `pdf` | `Pdf` | https://devicons.io/devicons/icons/pdf.svg | https://devicons.io/devicons/font/pdf.svg | `devicons devicons-pdf` |

## Install and use

```bash
npm install @dev.icons/react  # or @dev.icons/vue, @dev.icons/svelte
```

### React

```tsx
import { Pdf } from "@dev.icons/react";
// Monochrome (inherits currentColor):
// import { Pdf } from "@dev.icons/react/mono";

<Pdf size={32} alt="PDF logo" />
```

### Vue

```vue
<script setup>
import { Pdf } from "@dev.icons/vue";
</script>

<template>
  <Pdf :size="32" alt="PDF logo" />
</template>
```

### Svelte

```svelte
<script>
  import { Pdf } from "@dev.icons/svelte";
</script>

<Pdf size={32} alt="PDF logo" />
```

### Raw SVG

```html
<img src="https://devicons.io/devicons/icons/pdf.svg" alt="PDF logo" width="48" height="48" />
```

### Icon font

```css
@import "devicons/css"; /* npm install devicons */
```

```html
<i class="devicons devicons-pdf"></i>
```

## About the PDF logo

This is the PDF file icon: a white page (#F5F5F5) with a folded top-right corner and a red (#FF2116) outline. The red Adobe Acrobat ribbon sits in the middle, with the letters "PDF" in dark grey (#2C2C2C) below it. It matches the document icon Adobe Acrobat uses for PDF files.

The white page and red outline read well on light and dark backgrounds.

## When to use this logo

Use the PDF icon for file-type icons in upload widgets and file browsers, download and export buttons, document viewers and docs for PDF libraries such as PDF.js or pdf-lib. It pairs naturally with Adobe Acrobat, Microsoft Word, Google Docs and DocuSign.

## Related icons

- [Adobe Acrobat](/icons/adobe-acrobat.md)
- [Scribd](/icons/scribd.md)
- [Adobe After Effects](/icons/adobe-after-effects.md)
- [Adobe Animate](/icons/adobe-animate.md)
- [Adobe Illustrator](/icons/adobe-illustrator.md)
- [Adobe Photoshop](/icons/adobe-photoshop.md)
- [Adobe Premiere Pro](/icons/adobe-premiere-pro.md)
- [Asciidoctor](/icons/asciidoctor.md)

## Browse the catalog
- Previous: [Paypal](/icons/paypal.md)
- Next: [Peer 5](/icons/peer5.md)
- [All icons](/icons.md)