• Templates
  • Pricing
  1. Home
  2. Embed PDF
  3. How To Embed PDF
  4. How to Add a PDF Icon to HTML

How to Add a PDF Icon to HTML

by Christina Harker

You can also read this article in German, Spanish, French, Italian, Portuguese and Russian.

Get your visitors right to a PDF you’re sharing! We’ve made an embedded PDF icon that takes them straight to your PDF to view, edit, and annotate it.

The embedded Smallpdf icon makes it easy for your readers to immediately access your PDF or form. They can read it, fill it in, and even add notes to it. On top of that, they don’t need to download an extra app to do any of that. They can do it right inside their web browser in a tab that opens when they click the icon.


Let’s go ahead and get that PDF icon on to your website. 🤓

How To Place a Smallpdf Icon in Your HTML

  1. Copy the URL where you are keeping the PDF file you want the readers to open.

  2. Paste the URL into the Add PDF link here box on our Embed PDF page.

  3. Copy the code produced by our tool in the Preview box.

  4. Looking over your HTML page, find the spot where you want the Smallpdf icon to appear.

  5. Paste the code there and the PDF icon will appear there.


If you want, test your code to make sure everything works how you want it to work. Go through the first few steps and then take the code from the Copy Code box, and paste it into this JS Bin tester. Just click the PDF icon that appears in the right-hand window to see how it will all work. Now you can sit back and wait for readers to appreciate how easy it is to see, fill in and add to the PDF you sent them. No new app necessary! 🥳

If you ever want to change or update the PDF you are sending your visitors to, just repeat these steps and replace the code.

What Happens After You Click on Our PDF Icon


Once your visitors open your PDF after clicking on the Smallpdf icon you’ve just installed, they will have three main choices: viewing, annotating and editing. This is especially handy if you need to send site visitors a legal document they need to look over or perhaps a form to fill in with details about themselves.

If you’re sending them a form, filling it in using Smallpdf is a snap. Once it’s open on the Smallpdf platform, readers can use a straightforward Add Text tool to add text wherever they want on the PDF. They can also make shapes to highlight sections, mark passages in the margin, or draw lines under important passages.

If it requires a signature, they can sign it too, and it’s easy to switch over to our e-sign tool. Just click on the Tools button inside our editor and select eSign PDF from the drop down list. The PDF will stay open and our system will even save your signature for repeat use. The dropdown menu gives you quick access to our whole range of tools for sending, compressing, signing, editing PDFs and more.

You can find more information about all our tools for managing PDFs here.

Christina Harker
Digital Marketing