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:
Add code below to your stylesheet to use heroicons-outline:camera as background:
Add code below to your stylesheet to use heroicons-outline:camera 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.
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.
Iconify is the most versatile icon framework available. It offers one syntax for over 80 popular icon sets that include over 60,000 icons. It can also be used with custom icons.
Iconify SVG framework 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.