In this article, users will learn how to prepare icons or logos so that they can be uploaded into PAM.
...
2. How to upload icons and logos into PAM
...
How to prepare logos for PAM
When icons are set to ‘Display in High Definition’ you will need to upload PNG at 2x the expected display size.
For example: Icons uploaded at 48 x 48px will be displayed at 24 x 24px
PAM requires both .SVG and .PNG file logos when uploading an icon or logo.
| Info |
|---|
1. SVG file - This file type is required for the main icon or logo which will be used for Tenant detail cards. If you are using a normal font for your logo, you are required to convert it into a path or outline the stroke. Not doing this will cause your web browser to use a random system font. |
| Info |
|---|
2. 2x .PNG files - This file type is required for the dark and light mode map icon or logo. When dark mode map is active, the icon or logo for dark mode will appear and when light mode is active, the icon or logo for light mode will be shown on the map. Standard map icon size is 24 x 24px maximum(48 x 48px in high definition). If larger size is required for map tenant logos, you can go to ‘Edit Icon Category’ settings and enable oversized icons or logos up to 200 400 x 200px 400px maximum. [This will be shown on the next tutorial 'How to upload icons and logos into PAM']. |
...
How to prepare icons or logos
Icons or Logos are typically created as a vector file. A vector file is a scalable and editable image that is commonly used in graphic design and illustration software programs. The common vector file types include .SVG, .ai, and .eps. You need to import icons or logos that support any of these 3 vector file types before proceeding.
| Tip |
|---|
Note: Use vector file to create SVG & PNG icons or logos. Do not use raster images such as .PNG or .JPG as it will result in blurry or distorted icons or logos. |
| Info |
|---|
Recommended* standard map icon size:
Recommended tenant logo size:(Please see example below)
|
...
Maximum size
|
You can prepare icons or logos in any 'editor' of your choice. A good example would be Adobe XD, Adobe Illustrator or Figma.
...
12. Select format as an .SVG file
13. Click on Export
...
Video reference
| Widget Connector | ||||||
|---|---|---|---|---|---|---|
|
...
| Tip |
|---|
Next direct article |
| Info |
|---|
Related articles |
...