Icon Basics

Main goal of Iconify is to make icons easy to use.

This requires modifying icons, so they can be used the same way regardless of icon set. This means icons are not always identical to source.

Icon names

To make icons easy to use regardless of their source, all icons follow the same naming convention.

Allowed characters in icon names are "a-z", numbers and "-". Hyphen cannot be used at start or end of name, 2 hyphens in a row "--" are not allowed.

Examples of valid icon names: "home-outline", "1st-place-medal", "camera-with-flash".

Colors

There are 2 types of icons in Iconify ecosystem:

• Icons with hardcoded palette, such as emojis. Colors cannot be changed.
• Monotone icons. They have only one color that can be changed.

Hardcoded palette

Colors in icons with hardcoded palette cannot be changed.

Examples:

twemoji:clapper-board

twemoji:loudspeaker

Monotone icons

All monotone icons use currentColor for color.

This makes it easy to change icon color by changing text color in CSS, similar to how icon fonts behave.

Examples:

bi:bell-fill

line-md:beer-alt-twotone-loop

mdi:material-design

Hover samples above to see color change.

Why not fill? Main reason is because many icons use stroke for color. Using fill to set color is bad practice because it limits your icons to only icons that use fill. It also prevents icons from being used as mask images because background color cannot be set to fill color.

Mixing currentColor and custom colors

While it is possible to mix monotone and hardcoded palette, it is a very bad idea. Icon with mix of currentColor and hardcoded colors is unusable because:

• It cannot be used in CSS. If it is used as a background image, currentColor becomes black. If it is used as a mask image, custom palette disappears.
• It works only with a specific color scheme, usually designed only for white background.

Bad elements

Icons that contain the following are not allowed:

• Scripts and event listeners. They can be harmful or badly coded, thus they do not belong in public icons.
• Raster images. They don't scale, so they do not belong in vector icons.
• External resources. Icon should not rely on something hosted elsewhere.
• Text. Texts are rendered differently in different browsers and operating systems. Icons should look identical to all visitors. Convert text to shapes.

Additionally, everything that does not affect icon rendering is removed. Many bad editors leave a lot of junk code in generated SVG, all of that is removed.

This is done during import process for open source icon sets using Iconify Tools. Custom icon sets might not follow same guidelines.

Icon cleanup

For more details about icon cleanup and code samples, see icons clean up process.

Padding

There is also visual difference between many icon sets. Main difference is padding: some icon sets have padding, some don't.

The purpose of padding is to make different shapes visually similar.

Examples:

Icons with padding

Icons with no or very little padding

Well designed icons do have padding because:

• It makes icons visually look similar.
• Allows variations of icons, such as sliced icon, without resizing main shape.
• In some applications pixels at icon edges might render incorrectly or be cut by overflow. Padding prevents icon from breaking.

When designing such icons, designers usually follow an icon grid. Consider using similar grid if you are creating your own icons.

Example grid used by Material Design Icons:

Grid is pixel perfect, edges of all shapes and curves are placed on pixels. When shapes are pixel perfect, icon looks sharp.

Format

Data for icons is extracted from icon sets in IconifyIcon format.