Airship

Build responsive, mobile-first location intelligence apps on the web with our front-end component library.

This library is still under support but it will not be further developed. We don’t recommend starting new projects with it as it will eventually become deprecated. Instead, learn more about our current CARTO for React library here

Icons

Airship comes with a pack of icons that can be used in any type of web application.

All icons are on SVG format which means that they will always have the best quality regardless of the size of the icon or the resolution of the screen.

Usage from CDN

You can use the icons directly from our CDN in an img tag.

1

<img src="https://libs.cartocdn.com/airship-icons/v2.4.1/icons/twitter.svg" alt="Twitter logo">

You can check the full list of icons in the GitHub repo

Usage as web font

You can put icons on your app as a web font.

First, you need to include our icons.css file in the head of your app.

1
2
3
4
5
6
7
8
9

<head>
  <!-- Include Icons -->
  <link rel="stylesheet" href="https://libs.cartocdn.com/airship-icons/v2.4.1/icons.css">
</head>

Then you can use the icons inside an `i` tag by adding the `as-icon` class, and also the `as-icon-` class followed by the icon name you want to use.

```html
<i class="as-icon as-icon-twitter"></i>

This method allows styling easily through CSS

1
2

<!-- Change color and icon size -->
<i style="color:red; font-size: 20px;" class="as-icon as-icon-twitter"></i>

Icons can be used inside elements, like a button.

1
2
3
4

 <button class="as-btn as-btn--primary">
  <i class="as-icon as-icon-plus"></i>
  <p>Icon button</p>
</button>