Skip to content

CSS for icons without coding

You can generate CSS for icons without writing any code, using Iconify API.

If you would rather generate CSS programmatically, consider using Iconify Utils.

API

Iconify API is an open source hosted (or self-hosted) service for developers. Public Iconify API servers host over 200,000 icons from more than 150 open source icon sets.

Public API is available at https://api.iconify.design.

Among other features, it can generate CSS for icons. Query for CSS is /{prefix}.css?icons={icons}, where:

  • "{prefix}" is icon set prefix. To generate CSS for icons from multiple icon sets, send separate queries for each icon set.
  • "{icons}" is list of icon names, separated by comma.

Usage

Getting CSS is easy:

  • In your browser, create URL for Iconify API with the correct list of icons, as described above (see examples below).
  • Select all generated CSS, copy it to clipboard, paste it to a .css file.

To use those icons in HTML, use <span> elements with 2 class names: class name for the icon set, class name for the icon.

html<span class="icon--mdi-light icon--mdi-light--alert-circle"></span>

There is a bit of duplication in class names, as both the icon set and the icon contain the same first part. You can change it with options. See below.

Examples

/mdi-light.css?icons=alert-circle,circle,help-circle:

css.icon--mdi-light {
   display: inline-block;
   width: 1em;
   height: 1em;
   background-color: currentColor;
   -webkit-mask: no-repeat center / 100%;
   mask: no-repeat center / 100%;
   -webkit-mask-image: var(--svg);
   mask-image: var(--svg);
}

.icon--mdi-light--alert-circle {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M11.5 3a9.5 9.5 0 0 1 9.5 9.5a9.5 9.5 0 0 1-9.5 9.5A9.5 9.5 0 0 1 2 12.5A9.5 9.5 0 0 1 11.5 3m0 1A8.5 8.5 0 0 0 3 12.5a8.5 8.5 0 0 0 8.5 8.5a8.5 8.5 0 0 0 8.5-8.5A8.5 8.5 0 0 0 11.5 4M11 17v-2h1v2h-1m0-4V8h1v5h-1Z'/%3E%3C/svg%3E");
}

.icon--mdi-light--circle {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M11.5 3a9.5 9.5 0 0 1 9.5 9.5a9.5 9.5 0 0 1-9.5 9.5A9.5 9.5 0 0 1 2 12.5A9.5 9.5 0 0 1 11.5 3m0 1A8.5 8.5 0 0 0 3 12.5a8.5 8.5 0 0 0 8.5 8.5a8.5 8.5 0 0 0 8.5-8.5A8.5 8.5 0 0 0 11.5 4Z'/%3E%3C/svg%3E");
}

.icon--mdi-light--help-circle {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M11.5 4A8.5 8.5 0 0 0 3 12.5a8.5 8.5 0 0 0 8.5 8.5a8.5 8.5 0 0 0 8.5-8.5A8.5 8.5 0 0 0 11.5 4m0-1a9.5 9.5 0 0 1 9.5 9.5a9.5 9.5 0 0 1-9.5 9.5A9.5 9.5 0 0 1 2 12.5A9.5 9.5 0 0 1 11.5 3M11 17h1v2h-1v-2m.5-11A3.5 3.5 0 0 1 15 9.5c0 .9-.7 1.5-1.44 2.18l-.93.9c-.59.67-.66 1.95-.63 2.39V15h-1c0-.05-.1-1.96.87-3.08l1.03-.99c.6-.53 1.1-.98 1.1-1.43A2.5 2.5 0 0 0 11.5 7A2.5 2.5 0 0 0 9 9.5H8A3.5 3.5 0 0 1 11.5 6Z'/%3E%3C/svg%3E");
}
/mdi-light.css?icons=alert-circle,circle,help-circle

/openmoji.css?icons=axe,balance-scale:

css.icon--openmoji {
   display: inline-block;
   width: 1em;
   height: 1em;
   background: no-repeat center / 100%;
}

.icon--openmoji--axe {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' width='72' height='72'%3E%3Cpath fill='%239b9b9a' d='m7.95 17.47l18.13-4.237s.217 2.51.541 4.237a19.196 19.196 0 0 0 3.561 6.474c.756.54-7.482 11.88-10.24 12.42c-4.92.954-13.4-18.33-11.99-18.89z'/%3E%3Cpath fill='%23a57939' d='M36.41 23.25c-1.189.792-2.352.923-1.771 2.228a7.128 7.128 0 0 1 .434 1.297c.501 2.172 1.503 3.675 5.345 5.847c3.412 1.929 10.38 15.58 11.9 18.61a2.94 2.94 0 0 1 .31 1.257l.13 5.842a2.963 2.963 0 0 0 .663 1.803l1.863 2.293a2.963 2.963 0 0 0 4.132.46l3.502-2.757a2.963 2.963 0 0 0 .703-3.86l-21.27-35.2c-.873-1.445-.81-1.416-2.215-.48z'/%3E%3Crect width='13.63' height='13.53' x='14.18' y='24.84' fill='%23d0cfce' rx='2.359' ry='2.359' transform='rotate(-30)'/%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M34.66 24.76c-.04.204-.002.45.138.767a7.1 7.1 0 0 1 .432 1.29c.499 2.163 1.495 3.659 5.317 5.82c3.394 1.919 10.32 15.51 11.83 18.53c.195.388.3.816.31 1.25l.128 5.815a2.95 2.95 0 0 0 .66 1.794l1.852 2.283a2.946 2.946 0 0 0 4.11.457l3.483-2.744a2.95 2.95 0 0 0 .7-3.842L42.48 21.44c-.315-.52-.525-.808-.732-.918'/%3E%3Crect width='13.56' height='13.46' x='14.32' y='25.04' rx='2.359' ry='2.359' transform='rotate(-30.014) skewX(-.028)'/%3E%3Cpath d='m31.02 24.98l-9.465 11.24c-3.463 4.049-17.14-17.64-12.65-19.27l17.34-3.026'/%3E%3C/g%3E%3C/svg%3E");
}

.icon--openmoji--balance-scale {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' width='72' height='72'%3E%3Cpath fill='%239B9B9A' d='M48.063 62.92c0-3.314-5.597-6-12.5-6s-12.5 2.686-12.5 6h25z'/%3E%3Cpath fill='%23D0CFCE' d='M24.9 46.966c0 2.193-2.198 3.972-4.91 3.972s-4.91-1.779-4.91-3.972h9.82zm33-.041c0 2.194-2.198 3.972-4.91 3.972s-4.91-1.778-4.91-3.972h9.82z'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='2' d='M16 25.17c2.666 0 8.954-5.334 20-5.334s14.667 4 20 5.334m-20-1.264v28'/%3E%3Ccircle cx='36' cy='13.895' r='3'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='2' d='M48 61.906c0-3.313-5.596-6-12.5-6s-12.5 2.687-12.5 6m3-16a6 6 0 0 1-12 0h12zm-6-18l-5 18h10zm0 0v18m39 0a6 6 0 0 1-12 0h12zm-6-18l-5 18h10zm0 0v18'/%3E%3C/svg%3E");
}
/openmoji.css?icons=axe,balance-scale

/mdi.css?icons=account-box,account-cash,account,home:

css.icon--mdi {
   display: inline-block;
   width: 1em;
   height: 1em;
   background-color: currentColor;
   -webkit-mask: no-repeat center / 100%;
   mask: no-repeat center / 100%;
   -webkit-mask-image: var(--svg);
   mask-image: var(--svg);
}

.icon--mdi--account-box {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M6 17c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6m9-9a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3a3 3 0 0 1 3 3M3 5v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2Z'/%3E%3C/svg%3E");
}

.icon--mdi--account-cash {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M11 8c0 2.21-1.79 4-4 4s-4-1.79-4-4s1.79-4 4-4s4 1.79 4 4m0 6.72V20H0v-2c0-2.21 3.13-4 7-4c1.5 0 2.87.27 4 .72M24 20H13V3h11v17m-8-8.5a2.5 2.5 0 0 1 5 0a2.5 2.5 0 0 1-5 0M22 7a2 2 0 0 1-2-2h-3c0 1.11-.89 2-2 2v9a2 2 0 0 1 2 2h3c0-1.1.9-2 2-2V7Z'/%3E%3C/svg%3E");
}

.icon--mdi--account {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4Z'/%3E%3C/svg%3E");
}

.icon--mdi--home {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5Z'/%3E%3C/svg%3E");
}
/mdi.css?icons=account-box,account-cash,account,home

Options

API query has optional params that you can use to get different results.

See API query documentation for more details.

Released under the Apache 2.0 License.