Custom PDF Icons for your Xara Designer Website

Sample PDF Icon Designs
This article covers how you can let your website users download PDFs by clicking your own personalised PDF icon design, or the free downloadable designs available through this article.
Whilst browsing the internet I came across a post on, (if you haven’t used TalkGraphics, I would absolutely recommend going and having a read, they cover some really interesting topics and discuss everything Xara, Web and Graphic Design related). The article was about users “suffering” with having to use the dated, low quality, PDF icon, instead of being able to use new bright icons, or even their own icons. What was missed from the discussion was the fact, it’s completely possible to use any icon you want, including custom icons you’ve made yourself, and that’s what i am going to cover using just Xara and a little bit of HTML knowledge. I would recommend knowing how to use Xara and being able to read and generally understand what HTML is doing, but I will try to cover this in a way that everyone understands.

The how to…


Load up Xara, and a blank document, or your Website. Generally I use two ways to insert a PDF. Either I drag and drop it into my site, in which you’ll receive the dialog box to the right.

Xara Designer Pro Dialog Box PDF import

Xara Designer Pro Dialog Box PDF import

This is asking if you want the PDF to be imported, so its editable within Xara, or if you want the PDF to be accessible to your site users through a link. Select Add Link, this will add the standard PDF placeholder symbol to your page like this:  The second method is to highlight text and apply a link using the link properties box, Right click the highlighted text and select Web Properties >> Link Tab. This will not give you the option to have a Icon, so i will not continue with that method.


The next step is to design your PDF icon, now because everyone is a unique flower, and you will want your Icon to be part of your site, i can’t really explain how to make your design. So we’ll be working with one of the designs in the downloadable file, which is the recreation of the Xara PDF icon, but in much higher quality. So, design your icon, and group it as one group. Right click the group >> Web Properties >> Image Tab, and select the radio button “PNG (Best for Graphics)”.
Custom PDF Icon for TutorialThis ensures Xara exports your design as a PNG.
Now right click the group again and go to “Names…”, and apply the following name: filename=”pdfIconName”. Replace pdfIconName with what you want to name it (this is case sensitive), mine will export the PDF icon as “pdfIconName” and I already set it to export as a PNG, so my filename will be “pdfIconName.png”. Now position the icon itself, on another layer, or off the page, or behind another object, so it can’t be seen. This makes sure it isn’t visible to your users, but also it will definitely get exported.


Now that the Icon is there, your icon is designed and will be exported and published, it’s time to explain the icon. It’s a placeholder; this is a rectangle which is actually saving a spot for some Code. In this case the code is:


Xara PDF Placeholder Example Code

Xara PDF Placeholder Example Code

So where the code is grey and boring colour, you don’t need to worry about, it’s good to know, but you don’t need it for this article. The purple here is just giving you a bit of excess knowledge, you never know when you might need it. The red is what we’re changing. The red is the icon, it’s where the icon is on the internet, we simply put in the new icons address and your new icon is being shown! So the address will be, .

So in this for this, the website is, and my Icons name was “pdfIconName” (this is case sensitive), and so my code, is changed from:  to

Now, just press OK, apply and publish! You will not see the icon in website preview or page preview until you have published your whole site. Currently the icon is in the Xara file, when you publish your website, the icon is published, when you then preview your site in Xara, you will see the icon, but you must publish first, otherwise you’ll get a symbol missing resource symbol.


You’re done! Now view your site and your updated PDF Icon!

Custom PDF Icon for Tutorial

Custom PDF Icon for Tutorial

 Click to download Premade Custom PDF Icons


One thought on “Custom PDF Icons for your Xara Designer Website”

Write a Comment

Product Categories