Scaling Devicon Icons with Built-in Size Modifier Classes

Devicon's font-based icons can be resized without writing custom CSS: the library ships with size modifier classes (devicon-lg, devicon-2x through devicon-5x) that scale an icon by multiplying the element's font-size in em units. Add the class to the same element that carries the icon, and the glyph scales relative to the base size defined in the devicon stylesheet.

How the size classes work

Devicon's font icons are rendered as text glyphs, so the size modifiers work by setting font-size on the icon element. devicon-2x applies font-size: 2em, devicon-3x applies 3em, and so on, up to devicon-5x. Because the unit is em, the final size is relative to the inherited font size, not absolute pixels. If the icon sits inside a container with a larger font-size, the icon inherits that context before the multiplier applies.

A worked example

First include the stylesheet (CDN link for devicon 2.15.1 or your local copy), then apply the size class alongside the base devicon class and the language-specific class:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/devicon@2.15.1/devicon.min.css">

<i class="devicon devicon-github devicon-3x"></i>

This renders the GitHub icon at three times the default size. The class must sit on the same element as the icon classes; adding it to a wrapper div alone does nothing because the glyph-rendering classes are missing.

Limits and common mistakes

• Font icons only. These classes have no effect on the SVG sprite or inline SVG versions. For SVG, set width and height explicitly (e.g., .devicon-svg { width: 1.5em; height: 1.5em; }).
• Missing stylesheet. If the devicon CSS is not loaded, the classes are undefined and you see plain text or nothing.
• Typos. The class is devicon-2x with a hyphen; devicon2x or devicon 2x will silently fail.
• Relative sizing surprises. Because the unit is em, a devicon-3x icon inside a parent with font-size: 20px renders at 60px, not 3× the browser default.

Verifying the result

Open browser DevTools, select the <i> element, and check the computed font-size — it should be a multiple of the base size. Visually compare the icon with and without the modifier; devicon-3x should appear roughly three times larger in both dimensions.