Icon set:
Firefox OS Emoji
Apache 2.0

How to add fxemoji-babyangel to your website:

To embed fxemoji-babyangel in your page add following code:

Show other HTML syntax

Do not forget to add this to <head> section (preferred method to load icons faster) or before </body>:

SVG code for fxemoji-babyangel.

Use it to embed SVG directly in page or to paste it in UI editor application, such as Sketch, Adobe XD, Affinity Designer or Figma.

Most editors ignore SVG viewBox attribute. Because of that when you paste SVG in editor, dimensions often don't match, making it hard to align icon. Code below includes extra transparent rectangle that matches viewBox, so if you paste icon in editor it will have same dimensions as in HTML:

Or click this link to download SVG.

Add code below to your stylesheet to use fxemoji-babyangel as background:

Add code below to your stylesheet to use fxemoji-babyangel as pseudo element's content:

Avoid using Iconify in CSS if you can. Images are loaded one by one, which might affect performance if there are too many images. Monotone images cannot inherit color from stylesheet, so you must set color attribute.

Add code below to your script to use fxemoji-babyangel as React component.



Customize fxemoji-babyangel appearance:

Iconify icons can behave like images or like glyphs. Difference is very small, but important.

If you want it for decoration, select "block" option, if you want image to be placed in middle of text, such as placing emoji in text, select "inline" option.

You have selected a monotone icon.

Monotone icons do not have hardcoded colors, which means you can set any color.

By default color for monotone icons is the same as text color, which means you can style icons using css like this:

.iconify { color: red; }

Monotone icons when used as external resources cannot inherit color from stylesheet, therefore you must specify color. If possible use icon in HTML, not in CSS.

Set custom color:

By default height is set to "1em", width is automatically adjusted for each icon.

If you want to, you can set custom width and/or height. Unlike other images, SVG doesn't squish content when width/height ratio is wrong, so you can set any width and height you want.

You can use stylesheet to set custom dimensions like this:

.iconify { width: 24px; height: 24px; }
Set custom width:
Set custom height:

You can flip and rotate icon. Transformations are done using SVG transformations, not CSS. This ensures image content remains within its bounding box and allows you to apply additional CSS transformations.

Flip icon:
Rotate icon:

Unified icon framework

Iconify is a modern open source icon framework that can be used with over 50 icon sets, offering over 40,000 icons.

Iconify is designed to replace outdated glyph fonts and offer huge choice of icons. Unlike other SVG frameworks, Iconify only loads icons that are displayed on page. That means your visitors will not have to load multiple fonts to display icons from different icon sets, you are no longer limited to icons available in 1 icon set.

See how to use Iconify for details. Iconify is currently available as SVG framework for browsers, as React component and as Angular component.

Browse 50+ icon sets that offer over 40,000 well designed icons to find perfect icons for your project!

If you are using Sketch, check out Iconify plug-in for Sketch to speed up design process.

See about page to learn more about Iconify and project goals.