Icons

Icons are essential in creating a clear and intuitive user interface. They help simplify navigation by providing visual representations of actions or elements. You can import icons as traditional image files such as PNG or JPG, or in vector format (SVG).

For your PandaSuite projects, here are some popular sites where you can find quality icons, often available in PNG, JPG, and SVG formats:

• Flaticon: A vast collection of icons available in various formats.
• Icons8: Free and premium icons, with online editing options.
• The Noun Project: Stylized icons created by designers worldwide.
• FontAwesome: A library of icons that can be used directly in code or downloaded as SVG.
• SVGrepo: More than 500,000 vector files and icons.

Importing an icon in PNG or JPG format

• In the PandaSuite interface, click on the Files icon in the top menu.
• Import your PNG or JPG files from your computer.
• Drag and drop them onto your screen.
• Adjust the size and position of the icon on your screen.

However, these formats may result in a loss of quality when resized and are not editable (e.g., changing the color). This is where the SVG (vector) format shines.

Importing an icon in vector format

SVG (Scalable Vector Graphics) files are vector graphic files that offer a major advantage: they can be resized to any size without losing quality. Unlike standard image formats, SVG icons are made of geometric shapes rather than pixels, making them ideal for responsive interfaces and high-resolution screens.

The benefits of the SVG format:

• Quality: SVG icons remain sharp regardless of the zoom level.
• Reduced file size: They are generally lighter than bitmap images.
• Easy to edit: They can be easily modified by changing their source code or using design tools.

Learn more: Importing an SVG

Copy-paste the SVG file directly

Simply copy your SVG file and paste it directly into your PandaSuite project. The editor will automatically recognize the format and integrate it into your interface. You can then resize, animate, or use it as needed.

Copy-pasting an SVG from an icon site

PandaSuite also allows you to import SVG files directly by copying and pasting their code. Here's how to do it:

1. Go to a site offering SVG icons (such as Flaticon or Icons8).
2. Select the desired icon, then copy the SVG code (usually accessible via a button or by viewing the icon's source code).
3. Open PandaSuite Studio.
4. Paste the SVG code into the window.

The icon will be directly integrated into your project, and you can adjust its size, color, and even animate it using CSS or JS code. This process offers extra flexibility, especially if you want to adapt the icon to fit the needs of your interface.