How to Convert SVG to Icon Fonts with Fontello

Converting SVG vector files into custom icon fonts is an efficient way to reduce HTTP requests, maintain crisp visuals across high-resolution displays, and style icons dynamically using standard CSS properties. This guide outlines the entire conversion workflow, starting from preparing clean SVG assets, importing and configuring them within Fontello, and ultimately embedding the compiled font files and stylesheets into your web project.

Step 1: Prepare Your SVG Files

Before uploading graphics to Fontello, ensure your SVGs meet basic font generation standards to avoid rendering artifacts:

Use Single Paths: Outline all strokes and merge overlapping vector shapes into a single compound path using vector software like Adobe Illustrator, Figma, or Inkscape.
Remove Colors and Fills: Eliminate gradients, embedded raster images, and multiple color layers. Icon fonts only render single-color glyphs determined by CSS.
Standardize the Canvas: Use a square artboard (such as 512×512 or 1000×1000 pixels) with the graphic centered and properly scaled to fill the boundaries.
Clean the Code: Run the SVG through an optimizer like SVGO to remove unnecessary metadata, hidden layers, and inline styling.

Step 2: Upload SVGs to Fontello

Open the Fontello web interface in your browser.
Drag and drop your prepared .svg files directly into the Custom Icons section at the top of the interface.
Click on the uploaded icons to select the ones you want to include in your font package. Selected icons will be highlighted with a red border.
Optionally, select additional standard icons from the pre-existing libraries available on the Fontello dashboard to bundle them into the same build.

Step 3: Configure Character Codes and Class Names

Navigate to the configuration tabs at the top right of the Fontello screen:

Customize Names: Switch to this tab to edit the CSS class name for each icon (e.g., changing icon-vector1 to icon-user).
Customize Codes: Switch to this tab to assign or verify the specific Unicode code points assigned to each glyph.
Font Settings: Click the wrench icon next to the download button to define the CSS prefix (default is icon-) and assign a unique font family name to prevent conflicts with other fonts.

Step 4: Download and Extract the Font Package

Click the Download webfont button in the top right corner.
Extract the downloaded ZIP archive. The extracted directory will contain:
- A font/ directory containing .woff2, .woff, and .ttf formats.
- A css/ directory with pre-built stylesheets, including [font-name].css and animation helper classes.
- A config.json file that saves your project state.

Keep the config.json file in your source control. If you need to add, remove, or modify icons later, drag this file back onto the Fontello homepage to restore your exact configuration.

Step 5: Implement the Icon Font in HTML and CSS

Move the generated font/ and css/ folders into your project structure, maintaining their relative paths.

Link the generated stylesheet within your HTML <head>:

<link rel="stylesheet" href="css/my-icons.css">

Render an icon in your HTML markup using an inline element containing the assigned class name:

<i class="icon-user"></i>

You can now style the icon using standard CSS font properties:

.icon-user {
  font-size: 24px;
  color: #0070f3;
  transition: color 0.2s ease;
}

.icon-user:hover {
  color: #0051b3;
}