How to prepare small icons for an internal dashboard

Icons that look crisp in a design file can turn blurry, oversized, or hard to see once they appear in a dashboard. The right preparation depends on the dashboard’s display size, accepted file types, and whether the icon needs a transparent background.

Check those requirements first, then use the Image Converter to make supported image files into the format your dashboard accepts. Conversion changes the file format, not the amount of detail in a small image, so start with a source that is large and clear enough.

Prepare the icons

1. Check the dashboard requirements. Find out the accepted file formats, maximum file size, and displayed width and height. If the instructions say an icon displays at 24 by 24 pixels, use that as the target display size. Some dashboards accept larger source images for high-density screens, so check whether they want a 2x version, such as 48 by 48 pixels for a 24-pixel display.
2. Choose a suitable source image. Use a clean icon that already has enough pixels for the target size. Enlarging a tiny image does not restore missing detail. If you have an SVG or another format the dashboard needs, export it to an accepted image format with suitable dimensions before using the converter. The Image Converter supports JPG, PNG, WEBP, GIF, BMP, ICO, and TIFF.
3. Check the background. If the dashboard places icons on different colored surfaces, use a source with transparency. A white rectangle behind an icon may disappear on a white panel but stand out on a dark or colored one. Keep a copy of the original file before converting.
4. Convert the files if needed. Open the Image Converter, select your image files, choose an output format the dashboard accepts, and convert them. You can process up to 50 images at once. The converter is for changing formats, not a replacement for exporting the artwork at the required pixel dimensions.
5. Check the converted files. Confirm the file extension and open each image to check that it looks as expected. If the dashboard specifies exact dimensions, check the image dimensions too. Conversion does not add resolution or make a soft source sharp.
6. Preview icons in the dashboard. Upload one or two representative files first. Look at them at the actual display size, on every background color the dashboard uses, and in a high-density display if that matters to your team. Then convert and upload the rest of the set.

Choose a format that fits the dashboard

PNG for a dependable transparent icon

PNG is a practical choice for many dashboard icons, especially flat shapes, line art, and images that need a transparent background. It avoids the blocky edges and color smudging that can appear when small graphics are saved as a lossy format. Check that the dashboard accepts PNG before preparing a full set.

WEBP when the dashboard supports it

WEBP can keep file sizes small and supports transparency, which is useful when a dashboard limits upload size. Do not assume every internal system accepts it. Confirm support in the dashboard’s instructions or test one file before converting the whole collection.

JPG for icons that are really photographs

JPG is usually better suited to photographic images than to simple symbols. It does not preserve transparency, and compression can create fuzzy edges around small shapes or text. If the icon needs a clear outline or transparent background, choose another accepted format.

ICO only when the system asks for it

ICO is mainly associated with icons used by operating systems and websites. Use it for a dashboard only when its requirements specifically request ICO. For more on choosing among common formats, see JPG vs PNG vs WEBP: which format should you use?

Fix common icon problems

1. Start with a larger, cleaner source. If the icon looks jagged or blurry at its display size, find a higher-resolution original or export it again at the required dimensions. Converting the same small file to another format will not recover detail.
2. Use a transparent source for changing backgrounds. If a pale or white box appears around the icon, the source may have a solid background. Return to the original artwork and export it with transparency in a format the dashboard supports, such as PNG or WEBP.
3. Reduce detail in tiny icons. Fine strokes and small lettering can disappear when an image is displayed at 16 or 24 pixels wide. Use a simpler version with thicker shapes, and preview it at the dashboard’s actual size rather than judging it when enlarged.
4. Match the dashboard’s required dimensions. If the icon appears cropped, stretched, or misaligned, check its pixel width and height against the dashboard specification. A square source is often suitable for a square icon slot, but follow the system’s stated dimensions rather than guessing.
5. Check the accepted format and file limit. If upload fails, confirm both the file type and maximum size. Convert to another supported format if needed, or return to the source and export a smaller file. Changing formats alone may not make a large image small enough.

Keep the set consistent

A dashboard can look uneven when icons have different visual sizes, even if their files use identical pixel dimensions. One symbol may fill most of its canvas while another has wide empty margins. Compare the visible shapes, not just the file dimensions, and adjust the artwork so the icons feel balanced beside one another.

Also check contrast in both light and dark areas of the interface. A thin gray symbol may be easy to see on a white panel but nearly disappear on a muted background. If teammates use the dashboard at different screen sizes, test at the smallest size they are likely to see.

The Image Converter processes images in your browser, and the files stay on your device.