Frequently Asked Questions about the icon pack

Your question is not in the list?

If your question does not appear in the FAQ, if you don't find an answer on this page as well as in the docs page or if you have found an error on our site, you can contact us via our contact page.

If the question and answer are relevant, they will be added to this page.

Do you have a question about buying, paying, refunding, downloading and other actions related to the e-commerce aspect of the pack?

For all questions of this type, we invite you to consult directly the help of the external service dedicated to this part : Gumroad (help center).

What are raster and vector formats?

On the web, an image can be in two formats: raster (png, jpg, gif,...) and vectorial (svg, pdf, ...).

A raster image (also called bitmap) is composed of a multitude of squares called "Pixels".
Unfortunately, when zoomed, the pixels enlarge and give a blurry appearance to the image, which loses sharpness.

A vector image is composed of a set of vectors (points and segments linked together by mathematical formulas).
Regardless of the size of the image, the vectors keep their proportions and therefore the image quality does not decrease.

All icons in the pack are provided in both formats: the original svg and png (in 4 sizes and 3 colors).

How to integrate the font into your project?

For all information on how to use the pack in your projects, see the dedicated documentation page: docs.

What is the license for the icon pack?

Two licenses are available: the "Standard License" and the "Extended license".

They are very permissive and allow great freedom for all your projects.

The differences between both are: the maximum number of authorized users and the authorizations to use icons on Merchandises for sale and mass distributed digital Products.
More information: Standard License page and Extended License page.

How to modify SVG icons?

The SVG (Scalable Vector Graphics) file format is a vector drawing format (see above for the difference between vector and raster format) based on XML language and allows the creation of images as vector graphics.

As with all SVG files, you can:
  • Modify the XML directly by opening the file with a classic text editor
  • Modify the vector graphic by opening the file with a vector editor such as Inkscape (free software)

Why does Iconsbag use Icomoon?

To facilitate the use of the icons of the ICONSBAG bundle in your various projects, ASYMOV has chosen to use the Icomoon application to generate the different elements and files needed :

  • Icon font files
  • Style files (CSS, SASS, LESS, STYLUS)

How to customize the icon font?

If you want to customize the font content (for example, integrate only the icons you need), you can create your adapted content by directly using the Icomoon application.

You will find more information on the use of the Icommon application on the Icomoon documentation and the Icomoon FAQ.

To compose your custom icon font, the ICONSBAG bundle contains the folder iconsbag/icons-for-font. This folder contains all icons prepared for use in a font/font.

Why "prepared"? See the following answer.

Why a svg file prepared to be used as a font?

The folder iconsbag/icons-for-font contains all icons prepared for use in a font/font.

As noted in the Icomoon documentation, imported icons should not be composed of strokes (because they will be ignored when generating font) but only "fills".
As it is a relatively long and tedious work to do on all icons..... ASYMOV has done it for you, for all the icons and puts them at your disposal in the folder icons-for-font of the ICONSBAG bundle.

What is an icon font?

A icon font is a font whose glyphs are icons instead of letters.

What is a CSS toolkit?

The CSS toolkit of the pack is a set of files allowing a simple use of the icon font in your project.

In practice, it is all the style files (CSS, SASS, LESS, STYLUS) present in the folder iconsbag/font-and-toolkit.

Why are the icons not in PSD, CSH and AI formats?

ASYMOV uses almost exclusively free tools/open source (FLOSS) to realize its projects and products.

As far as icon creation is concerned, ASYMOV uses exclusively free software Inkscape

  • The PSD (PhotoShop Document) file format is a proprietary (non-free) format developed by Adobe.
  • The CSH (Photoshop Custom Shapes File) file format is a proprietary (non-free) format developed by Adobe.
  • The AI (Adobe Illustrator) file format is a proprietary (non-free) format developed by Adobe.

This is why these file formats are not in the ICONSBAG bundle.

Why does the font folder not contain the WOFF 2.0 file?

As noted in the FAQ of Icomoon, the Icomoon application only generates the file in WOFF 2.0 format by default.

If you have an Icomoon premium account, follow the instructions in the question "How to customize the icon font?" to create a custom icon font.

How to integrate SVG icons directly into HTML?

We invite you to consult Mozilla's very complete article on the subject:
Add vector images to a web page (Mozilla).

Why are there no other colors and sizes for the images?

Since there are an infinite number of colors and image sizes, it would be impossible to put all the file variations in the icon pack.

This is why the pack only contains the standard colours (white, grey, black) and sizes (32px, 64px, 128px, 256px).

How to generate images in another color and/or size?

You can freely modify the shape and color of the source file .SVG of each icon.
Once modified, you can generate a new image .PNG in a custom size.

To do this, follow these steps:

  1. Download and install vector image editing software, i.e.: Inkscape (free)
  2. Open the source image .SVG corresponding to the icon you want to modify
  3. Select all elements with Ctrl+A (or in the menu with Edit>Select all)
  4. Change the color of the strokes with Shift+Click (on the new color you have chosen from the list of colors at the bottom of the window)

If you need to put different colors on different elements:

  1. Select all elements with Ctrl+A (or in the menu with Edit>Select all)
  2. Ungroup all selected elements with Shift+Ctrl+G (or in the menu with Object>Ungroup). This operation must be repeated if there are several groups of elements.
  3. Click on the element to be modified
  4. Change the color of the strokes with Shift+Click (on the new color you have chosen from the list of colors at the bottom of the window)

Export the file to .PNG image:

  1. Open the export menu with Shift+Ctrl+E (or in the menu with File>Export PNG image...).
  2. In the menu Export PNG image, select the Export area -> Page, enter the Image size desired, click on Filename to choose the name of the future file and its location.
  3. Finally, click on Export.