Devicon Icon Integration Guide

Learn how to add Devicon programming‑language icons to a web page using a CSS stylesheet, proper class names, and verification steps.

Desired outcome

Display a programming‑language logo (e.g., Python, JavaScript) inline with text by using the Devicon icon set via CSS classes.

An HTML file that you can edit (or a template in your web project).
Access to the internet to load the Devicon stylesheet from a CDN, or a local copy if you prefer to self‑host.
Basic familiarity with editing HTML and opening browser developer tools.

Include the Devicon stylesheet. Add one of the following lines inside the <head> section of your HTML. Use the exact version shown or a newer release if available.
```
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/devicon@2.15.1/devicon.min.css">
```
If you manage dependencies with npm, you can install the package and import its CSS:
```
npm install devicon@2.15.1
# then in your build step import "devicon/devicon.min.css"
```
Place an inline element for the icon. Choose the appropriate class name for the language you want. For a plain‑style Python icon use devicon-python-plain; for the standard JavaScript logo use devicon-javascript. Insert an  or  where you want the icon to appear.
```
 Python
 JavaScript
```
Adjust size or color (optional). Devicon provides utility classes for size, e.g., devicon-lg for a larger icon. You can also override with custom CSS.
```

```
Or set color directly:
```

```
Save and reload the page. The icon should appear next to the accompanying text.

Open the page in a browser and visually confirm that each icon renders with the correct logo and colors.
Open Developer Tools (usually F12) and select the icon element. In the "Computed" tab verify that the font-family includes "Devicon". In the "Styles" pane you should see a ::before pseudo‑element whose content matches the Unicode glyph for the chosen icon.
Check the Network tab: the request for devicon.min.css should return status 200, and any font files (e.g., devicon.woff2) should also load with 200 responses. No 404 errors for the stylesheet or fonts should be present.

Verify the stylesheet loaded: look for a 200 response for the Devicon CSS URL in the Network tab. If you see a 404, correct the CDN link or local path.
Confirm class names are spelled exactly as documented, noting they are case‑sensitive (e.g., devicon-python-plain, not Devicon-Python-Plain).
Clear the browser cache and reload; a stale CSS version can cause missing glyphs.
If your site’s base CSS resets font-family or overrides pseudo‑elements, add a rule to preserve the Devicon font for the icon elements:
```
.devicon { font-family: "Devicon" !important; }
```
Remember that the plain‑variant classes (*-plain) rely on the font‑based icons. If you need SVG icons, use the devicon-svg package or inline SVG instead of the CSS font approach.