Skip to content

Icons

Ionicons

Ionicons is the primary source of icons. Search for an icon you want to use through the external Ionicons library and copy the web component code. For example:

<ion-icon name="alarm-outline"></ion-icon>

The icon size is set automatically based on the area it is being displayed. For use in rich text, the icon can be enlarged by setting the size attribute to large. Example:

<ion-icon name="alarm-outline" size="large"></ion-icon>

Custom SVG Icons

For consistency, the Ionicon SVGs can be downloaded as a zip file to look at how they're created. Their icons are 512x512 and use a 32px stroke.

Requirements

  • Vector editing tool that supports SVG (e.g. Illustrator, Figma)
  • Plain text editor (e.g. Notepad, Notepad++, TextEdit)

Steps

  1. Download an SVG or other vector icon file and open it in a vector editing tool.
  2. Convert all strokes to paths.
  3. For the site to appropriately apply color to the icon (based on themes), paths must be filled with pure black (#000000). When saving the SVG, most tools will ignore pure black and the site’s CSS is able to apply color to the icon. This will be verified in steps 8 and 9.
  4. Clean up the icon as needed and set the artboard size to match the icon with no extra space around the edges.
    Icon sized to match the artboard with no extra space around the edges.
  5. Save the file as an SVG. Some tools will prompt you for settings. For example, these are the important settings in Illustrator:
    Illustrator settings
    • SVG Profile: SVG 1.1
    • Type: SVG
    • More Options
      • CSS Properties: Presentation Attributes
      • Decimal Places: 2
      • Responsive: Unchecked
  6. Open your new SVG file in a plain text editor.
  7. If there is a <style> tag in the code, verify that no colors have been specified, including pure black. Remove any fill: styles.
    Style tag with fill color specified
  8. Verify that there are no fill or style attributes anywhere in the code that specify a color, including pure black. Remove any fill attributes and fill: styles.
    "Fill" Presentation Attribute
    "Fill" Style Attribute
  9. Verify that width and height attributes exist on the <svg> element and contain appropriate values for the area of the site where the icon will display. The viewbox attribute shows the value for the “artboard” size. To scale the icon up or down, maintain the aspect ratio of the viewbox. For example, if the icon is saved out at 100x125, the viewbox attribute should show 0 0 100 125 as the value so the icon can be scaled proportionally at the 100:125 ratio. The width and height do not need to match the viewbox, but the aspect ratio should be maintained. Note that SVGs should not distort or stretch when scaling.
  10. Some vector editing tools (e.g. Illustrator) add data that is unnecessary for the web. Copy the entire <svg></svg> element and ignore anything outside of it.
    SVG element selected
  11. Paste the SVG code into the “Icon (Ionicon Embed Code)” field and publish.
  12. If necessary, experiment with the width and height attributes on the <svg> element to size the icon appropriately.
    Ionicon Embed Code field