Skip to content Skip to sidebar Skip to footer
Home / Can You Upload Own Vectors to Fontawesome

Can You Upload Own Vectors to Fontawesome

Post a Comment

To help your icons brandish nicely alongside official Font Crawly icons, follow these requirements when preparing your SVGs for upload.

Advertisement

Remove ads with a Pro plan!

Using this requires Font Awesome Pro

A subscription to a Pro-level programme will remove all third-political party advertisments on fontawesome.com.

And of course Pro-level plans come up with…

  • All 16,083 Icons in Font Awesome
  • Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands
  • A Perpetual License to Apply Pro
  • Services and Tools to Make Easy Work of Using Icons
  • Fresh Icons, Features, and Software Updates
  • Plus Support From Existent Humans

Already have a Pro Plan? Sign in

Help Us Aid You!

We'll practice our all-time to process and prepare the SVGs you provide, including automagically applying best practices and requirements below for you lot when possible. But the closer you follow these guidelines below, the more we tin help along the way.

Valid SVGs

We only accept SVG files when uploading icons to a kit. These SVGs must exist valid and well-formed. If nosotros can't parse through your SVG to empathize its content, then we can't confidently interpret information technology into an icon.

Only upload SVG files

You tin only upload SVG files as icons to a kit

To exist valid, SVGs must have the following:

Requirements Why
One path element We'll be using this one path, which represents your icon's shape, to create an icon from. Multiple paths are non accepted.
a viewBox attribute The viewbox attribute acts similar (and is often derived from) an artboard in pattern software. It defines the physical width and height an icon will have up when rendered digitally.
an xmlns="http://www.w3.org/2000/svg" attribute This official XML namespace value is needed to help validate your SVG against the general schema, or rulebook, for the file type.
a viewbox with a min-y and min-ten value of 0 Your SVG's viewbox cannot start offset horizontally or vertically. Your icon's path, however, tin can be placed anywhere inside of the viewbox
a viewbox with a width value This holding tells u.s. how wide your icon is
a viewbox with a height value This property tells united states how tall your icon is

  Here's our solid circle icon's valid SVG code…

Remove ads with a Pro programme!

Using this requires Font Crawly Pro

A subscription to a Pro-level plan volition remove all third-political party advertisments on fontawesome.com.

And of course Pro-level plans come with…

  • All xvi,083 Icons in Font Crawly
  • Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands
  • A Perpetual License to Utilise Pro
  • Services and Tools to Make Easy Work of Using Icons
  • Fresh Icons, Features, and Software Updates
  • Plus Support From Real Humans

Already have a Pro Plan? Sign in

Use a Viewbox (a.1000.a. Artboard)

A viewbox is the canvas an icon is set on. Both an icon'southward size and alignment are informed by its viewbox. The path representing your icon must exist placed completely in a viewbox with no points lying outside of its boundaries. We'll ignore whatsoever paths or shapes that are outside of the viewbox.

If yous're using pattern software to create icons, the viewbox attribute can be taken directly from the dimensions of your file's artboard when exporting SVGs.

SVG artboard viewbox

The width and elevation of an artboard is straight translated into an SVG's minX and minY values

Need a spring start or template to become going?

Use the Font Crawly Icon Design Templates for Adobe Illustrator or Figma (opens new window) to get started with a proper viewbox (a.k.a. artboard), icon filigree guides, and examples.

Use a Unmarried Path

Official Font Awesome icons are created from i single path. If your icon is visually comprised of multiple paths (e.g. a radio and broadcast waves or a square with a plus visually knocked out of information technology), you'll need to join them into i compound path.

Paths that overlap each other In the case that paths overlap each other, you'll need to combine the paths into one path using the marriage, subtract, intersect, or exclude tools that come with your blueprint software. Adobe Illustrator bundles these in their pathfinder tool.

Combine overlapping paths

Combine paths that overlap each other on an icon grid

Options for combining paths

And hither are outcomes when combining paths using Unite, Minus Front, Intersect, and Exclude respectively

Combination Blazon Outcome
"Union" or "Unite" Takes all selected shapes and turns them into a single path.
"Subtract Selection" or "Minus Front end" Volition remove whatsoever shape overlaps in front end.
"Intersect" Will keep whatsoever overlap between the two original shapes.
"Exclude" The exact inverse of "Intersect". Any overlap between the two original shapes will exist removed

Paths that do not overlap In the case of an icon with two or more separate paths, you'll need to select all of the paths and cull the "Object → Compound Path → Make" in Adobe Illustrator.

Combining shapes into a compound path

Left: four distinct paths (for each shape). Right: those same iv paths joined into ane compound path.

Expand All Strokes to Paths

Strokes that you've placed on paths won't scale properly when icons are resized throughout your UI. They as well cause legibility issues at certain scales and aren't great at supporting pixel-perfect rendering on the web.

In Adobe Illustrator, you can utilize the "Object → Path → Outline Stroke" command to catechumen a stroke into its ain path. In other vector editing apps, this can be washed by selecting the paths and choosing "Convert to Outlines".

Create outlines for strokes

Left: a path with a stroke. Right: The same path with the stroke expanded.

Remove ads with a Pro plan!

Using this requires Font Crawly Pro

A subscription to a Pro-level programme will remove all tertiary-party advertisments on fontawesome.com.

And of grade Pro-level plans come with…

  • All 16,083 Icons in Font Awesome
  • Solid, Regular, Lite, Thin, and Duotone Styles for Each Icon + Brands
  • A Perpetual License to Use Pro
  • Services and Tools to Make Easy Work of Using Icons
  • Fresh Icons, Features, and Software Updates
  • Plus Support From Existent Humans

Already accept a Pro Plan? Sign in

Convert All Typefaces to Paths

Typefaces referenced in SVGs depend on the system rendering them to provide the typeface. You can't expect your project's users to have the typefaces yous're using available on their system. In improver typefaces won't scale properly when icons are resized throughout your UI and hit the same legibility and pixel-perfect rendering woes as noted above.

In Adobe Illustrator and many vector editing apps, you tin can select a text layer or path and use the "Type → Create Outlines" control.

Convert typefaces to outlines

Left: A type layer. Right: The same blazon layer converted to a path.

Don't Apply SVG Shapes

SVG supports drawing some shapes (opens new window) by name (e.g. circle, rectangle, line, polygon). Shapes that are converted into paths mean all SVG content is consistent and easier to work with.

In Adobe Illustrator, you lot tin utilize the "Object → Compound Path → Brand" carte to catechumen a shape into a path.

Convert shapes to compound paths

Left: SVG shapes in Adobe Illustrator's layers menu. Right: Those shapes converted to a chemical compound path.

Don't Include Raster Images

SVGs are the ideal medium for icons on the web because they scale very well in almost any context. Conversely, raster images such equally PNGs, JPGs, and GIFs, practise non. Additionally, raster images that are referenced in an SVG cause extra file size and are prone to scaling and rendering problems.

Remove ads with a Pro program!

Using this requires Font Awesome Pro

A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.

And of class Pro-level plans come up with…

  • All 16,083 Icons in Font Awesome
  • Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands
  • A Perpetual License to Use Pro
  • Services and Tools to Make Easy Work of Using Icons
  • Fresh Icons, Features, and Software Updates
  • Plus Back up From Real Humans

Already take a Pro Plan? Sign in

Ungroup All Paths

SVGs back up grouping paths (using the <thousand> element). For the purposes of icons, this can cause unnecessary complexity and rendering issues if there is excessive grouping.

Be sure to ungroup all paths, fifty-fifty when you lot are at the indicate of having a single path. Most vector editing apps allow you to exercise this with an "Ungroup" command. By using the "Object → Compound Path → Brand" command in Illustrator, all groups will automatically exist removed from your SVG.

Apply a Single Color to Fill Paths

Uploaded icons currently only allow a single color. The fill or color of your icon nor its opacity do not matter at the time of upload - we'll only be looking at and translating the path of the SVG.

Stick to a single color when designing icons. If you often too employ opacity to confirm that paths take been joined properly, just e'er prepare it dorsum to 100% earlier moving frontwards with uploading.

We've got colour covered later!

Use Precise Measurements

Icons that render pixel-perfectly have their path's points set deliberately on an icon grid. They too use consistent values for shapes, angles, and edges. All of this information is somewhen communicated through points (or coordinates) an SVG'south viewbox.

As such, make sure the points of your path are exactly where you want them. Double-check that the 10 and Y coordinates of each betoken on your path are correct. Also, confirm that any border radius numbers along the edges of your path are using the verbal values you've set. When exporting from blueprint software (see beneath), brand sure you lot've set your decimal precision to at least iii places to maintain that level of detail.

Remove ads with a Pro plan!

Using this requires Font Awesome Pro

A subscription to a Pro-level programme volition remove all third-political party advertisments on fontawesome.com.

And of course Pro-level plans come with…

  • All sixteen,083 Icons in Font Awesome
  • Solid, Regular, Calorie-free, Thin, and Duotone Styles for Each Icon + Brands
  • A Perpetual License to Employ Pro
  • Services and Tools to Make Easy Work of Using Icons
  • Fresh Icons, Features, and Software Updates
  • Plus Back up From Real Humans

Already have a Pro Plan? Sign in

Exporting SVGs from Design Software

When exporting vectors equally SVGs from design software such as Adobe Illustrator, you'll want to make sure you do the following in any menus or export settings:

  • Set any styling to be "Internal CSS". Improve even so, remove styling all together if you can.
  • Prepare your vector'due south precision values to include at to the lowest degree 3 decimal places
  • Remove whatsoever id or class attributes if possible. They're not needed.
  • Remove whatsoever fill attributes.
  • Select any "minify" or "optimize" flags to produce an SVG as lean and simple as possible.

Afterwards you've exported your icon as an SVG, we recommend opening it in a code or text editor to see the details of your software'due south export. You lot can manually tackle any of the suggestions above that your software didn't embrace.

Running into problem uploading or using your own icons?

dominguezbefousball.blogspot.com

Source: https://fontawesome.com/docs/web/add-icons/upload-icons/prep-icons

Post a Comment for "Can You Upload Own Vectors to Fontawesome"