E-book Download Icons

E-book icons example

An example of the e-book icon set in use for a book available in PDF, EPUB, and Mobi formats.

I recently set up a web page for downloading an e-book that is available in multiple formats. I had already been using a small document icon to decorate PDF download links, and now I wanted matching icons for the mobi and EPUB format too.

A Google search didn’t turn up what I was looking for so I created my own based on the PDF icon from the Fugue Icons set by Yusuke Kamiyamane. He so kindly released his icons under a Creative Commons attribution license and now I’m doing the same with the extra two icons.

Download the e-book icons (including the original PDF icon)

Displaying the Icons

A few simple CSS rules are all it takes to automatically display the icons on the appropriate links across an entire website. Here is what I used to produce what you see in the example image above. It also works well for links within a block of text.

.pdf, a[href $=".pdf"], 
.epub, a[href $=".epub"], 
.mobi, a[href $=".mobi"], 
.azw, a[href $=".azw"] {
	padding: 0 0 1px 20px;
	min-height:16px;
}
 
.pdf, a[href $=".pdf"] {
	background: url(icons/document-pdf.png) no-repeat 0 50%;
	}
 
.epub, a[href $=".epub"] {
	background: url(icons/document-epub.png) no-repeat 0 50%;
	}
 
.mobi, .azw, a[href $=".mobi"], a[href $=".azw"] {
	background: url(icons/document-mobi.png) no-repeat 0 50%;
}

Any link ending in .pdf, .epub, .mobi, or .azw will automatically get the appropriate icon applied to the left of it. For example:

<a href="/downloads/myfile.epub">Download my EPUB book</a>

There may be times were an icon needs to be applied manually, for example if the download is wrapped in a zip file. In that case, just apply the appropriate class to the <a> tag. For example:

<a class="epub" href="/downloads/myfile.zip">Download my EPUB book</a>

Making ePub and Kindle File Downloads Work

By the way, I try to stay away from wrapping my e-book downloads in a zip file to make it easier for people with mobile devices to download the file directly on their device. For example, if someone tries to download a zip file on an iPad, it will only work if they have an app installed that knows how to unpack the zip and then offer the option to send that file to iBooks or some other app.

On the other hand, if the download is simply an EPUB file then it automatically opens in iBooks. It cuts down the number of steps, there is much less confusion, and there is certainly less tech support for me that way.

If you try directly linking to those files and it doesn’t work, it may be because your server doesn’t know about those file types. All it takes is a few lines in your .htaccess file to fix it.

AddType application/epub+zip .epub
AddType application/x-mobipocket-ebook .mobi
AddType application/vnd.amazon.ebook .azw

So now you have a set of e-book icons and tips on making them work. I hope you find them useful.

2 thoughts on “E-book Download Icons

  1. Doug,

    We use the Fugue icon set and also have the desire to expand our selection of electronic document formats. Thank you for doing some of my work for me!

    Not only have you provided useful images, but you’ve also reinforced some best practices and offered tips that will likely save someone hours of frustration.

    Keep up the great work!

  2. [...] ePub and mobi icons by Doug Smith, also released under a Creative Commons attribution license [...]

Leave a Reply