How to change the size of your logo on an invoice

This article explains how to increase or decrease the size of the logo that appears on your invoices in FreeAgent.

To change the size of your logo to a specific size, you’ll need to follow the steps below to add a line of basic CSS code to a custom invoice theme.

Alternatively, you can increase or decrease the size of your logo using our customisation designer.

1. Upload a large logo

First, you will need to upload a large (e.g. 1000px wide) PNG, GIF or JPEG image file. Please note that the file must be 1MB or less in size.

To do this, select ‘Settings' from the drop-down menu in the top-right corner and then select 'Company Logo’.


Next, choose 'Select a file' and select the file you’d like to upload from your computer. Finally, select ‘Upload’ to complete the process.


2. Create a custom invoice theme using CSS

Next, you will need to create a custom invoice theme using CSS.

To do this, select ‘Settings' from the drop-down menu in the top-right corner of the screen and then select 'Theme Gallery’.


Select ‘Create’ below the 'Custom CSS Theme' thumbnail.


You can either create a custom invoice theme from scratch or choose to pre-populate the CSS from one of our pre-designed invoice themes.

To pre-populate the CSS, select the theme you’d like to use from the drop-down menu and select ‘Generate CSS’.


3. Set the logo size

Once you have generated the CSS from your chosen theme, enter the following snippet of code at the bottom of the pre-generated code.

#invoice-header .logo { height:auto !important; width:300px !important; padding:10px !important;}

The snippet dictates a width of 300 pixels (width:300px), which means that when the logo is viewed on screen, the maximum width of the logo is 300 pixels. Edit the '300' figure to increase or decrease your logo width. The logo height will increase or decrease automatically, maintaining the logo’s proportions.


Select ‘Save Invoice Theme’ to complete the process.

4. Apply the custom theme to invoices

To apply this custom theme to your invoices, navigate back to the 'Theme Gallery' in ‘Settings’ and select 'Make Default' under ‘Custom CSS Theme'.


Your custom theme will be applied to all current draft invoices and any future invoices. Find out more about how to customise an invoice theme using CSS.

If you require more in-depth assistance with CSS, you may want to speak to a web developer.

Did you find this article useful?