atlas-icons

Beautiful icon font with 107 carefully crafted icons

107
Total Icons
5
Font Formats
atlas-icons
Font Family
502.4KB
Total Size

Generated Files & Sizes

39.3KB atlas-icons.caca649c.ttf
26.2KB atlas-icons.caca649c.woff
22.9KB atlas-icons.caca649c.woff2
39.5KB atlas-icons.caca649c.eot
365.1KB atlas-icons.caca649c.svg
6.1KB atlas-icons.css
3.3KB types.ts
Copied!
apartment
.atlas-icons-apartment
U+ea01
Copied!
arrow-down-md
.atlas-icons-arrow-down-md
U+ea02
Copied!
arrow-down
.atlas-icons-arrow-down
U+ea03
Copied!
arrow-left-md
.atlas-icons-arrow-left-md
U+ea04
Copied!
arrow-left
.atlas-icons-arrow-left
U+ea05
Copied!
arrow-right-md
.atlas-icons-arrow-right-md
U+ea06
Copied!
arrow-right-with-line
.atlas-icons-arrow-right-with-line
U+ea07
Copied!
arrow-right
.atlas-icons-arrow-right
U+ea08
Copied!
arrow-up-md
.atlas-icons-arrow-up-md
U+ea09
Copied!
arrow-up
.atlas-icons-arrow-up
U+ea0a
Copied!
arrows-down
.atlas-icons-arrows-down
U+ea0b
Copied!
arrows-left-right
.atlas-icons-arrows-left-right
U+ea0c
Copied!
arrows-left
.atlas-icons-arrows-left
U+ea0d
Copied!
arrows-right
.atlas-icons-arrows-right
U+ea0e
Copied!
arrows-up
.atlas-icons-arrows-up
U+ea0f
Copied!
bag
.atlas-icons-bag
U+ea10
Copied!
bank-card-check
.atlas-icons-bank-card-check
U+ea11
Copied!
bank-card
.atlas-icons-bank-card
U+ea12
Copied!
bed
.atlas-icons-bed
U+ea13
Copied!
bell
.atlas-icons-bell
U+ea14
Copied!
blog
.atlas-icons-blog
U+ea15
Copied!
book
.atlas-icons-book
U+ea16
Copied!
breakfast
.atlas-icons-breakfast
U+ea17
Copied!
cabin-baggage
.atlas-icons-cabin-baggage
U+ea18
Copied!
calendar
.atlas-icons-calendar
U+ea19
Copied!
call-phone
.atlas-icons-call-phone
U+ea1a
Copied!
car
.atlas-icons-car
U+ea1b
Copied!
change
.atlas-icons-change
U+ea1c
Copied!
chat
.atlas-icons-chat
U+ea1d
Copied!
checked-baggage
.atlas-icons-checked-baggage
U+ea1e
Copied!
checkmark
.atlas-icons-checkmark
U+ea1f
Copied!
chevron-down-md
.atlas-icons-chevron-down-md
U+ea20
Copied!
chevron-down
.atlas-icons-chevron-down
U+ea21
Copied!
chevron-left-md
.atlas-icons-chevron-left-md
U+ea22
Copied!
chevron-left
.atlas-icons-chevron-left
U+ea23
Copied!
chevron-right-md
.atlas-icons-chevron-right-md
U+ea24
Copied!
chevron-right
.atlas-icons-chevron-right
U+ea25
Copied!
chevron-up-md
.atlas-icons-chevron-up-md
U+ea26
Copied!
chevron-up
.atlas-icons-chevron-up
U+ea27
Copied!
circle-close
.atlas-icons-circle-close
U+ea28
Copied!
close
.atlas-icons-close
U+ea29
Copied!
confounded-face
.atlas-icons-confounded-face
U+ea2a
Copied!
contacts-3
.atlas-icons-contacts-3
U+ea2b
Copied!
copy
.atlas-icons-copy
U+ea2c
Copied!
counter-clock
.atlas-icons-counter-clock
U+ea2d
Copied!
default
.atlas-icons-default
U+ea2e
Copied!
delete
.atlas-icons-delete
U+ea2f
Copied!
discount
.atlas-icons-discount
U+ea30
Copied!
document
.atlas-icons-document
U+ea31
Copied!
dollar-refresh
.atlas-icons-dollar-refresh
U+ea32
Copied!
dollar
.atlas-icons-dollar
U+ea33
Copied!
download
.atlas-icons-download
U+ea34
Copied!
edite
.atlas-icons-edite
U+ea35
Copied!
error-circle
.atlas-icons-error-circle
U+ea36
Copied!
error
.atlas-icons-error
U+ea37
Copied!
feedback
.atlas-icons-feedback
U+ea38
Copied!
filter
.atlas-icons-filter
U+ea39
Copied!
flight-header-currency
.atlas-icons-flight-header-currency
U+ea3a
Copied!
flight-header-more
.atlas-icons-flight-header-more
U+ea3b
Copied!
flight-header-one-way
.atlas-icons-flight-header-one-way
U+ea3c
Copied!
flight-header-round-trip
.atlas-icons-flight-header-round-trip
U+ea3d
Copied!
flight-header-share
.atlas-icons-flight-header-share
U+ea3e
Copied!
food
.atlas-icons-food
U+ea3f
Copied!
group-tour
.atlas-icons-group-tour
U+ea40
Copied!
gym
.atlas-icons-gym
U+ea41
Copied!
headphone
.atlas-icons-headphone
U+ea42
Copied!
heart
.atlas-icons-heart
U+ea43
Copied!
helmet
.atlas-icons-helmet
U+ea44
Copied!
help
.atlas-icons-help
U+ea45
Copied!
home
.atlas-icons-home
U+ea46
Copied!
hotel
.atlas-icons-hotel
U+ea47
Copied!
info-circle
.atlas-icons-info-circle
U+ea48
Copied!
info-menu
.atlas-icons-info-menu
U+ea49
Copied!
info
.atlas-icons-info
U+ea4a
Copied!
journey
.atlas-icons-journey
U+ea4b
Copied!
language
.atlas-icons-language
U+ea4c
Copied!
location
.atlas-icons-location
U+ea4d
Copied!
logout
.atlas-icons-logout
U+ea4e
Copied!
map-search
.atlas-icons-map-search
U+ea4f
Copied!
map
.atlas-icons-map
U+ea50
Copied!
minus
.atlas-icons-minus
U+ea51
Copied!
money-paper-send
.atlas-icons-money-paper-send
U+ea52
Copied!
money
.atlas-icons-money
U+ea53
Copied!
neighborhood
.atlas-icons-neighborhood
U+ea54
Copied!
passengers
.atlas-icons-passengers
U+ea55
Copied!
plane-take-off
.atlas-icons-plane-take-off
U+ea56
Copied!
planee
.atlas-icons-planee
U+ea57
Copied!
plus
.atlas-icons-plus
U+ea58
Copied!
privacy
.atlas-icons-privacy
U+ea59
Copied!
refresh
.atlas-icons-refresh
U+ea5a
Copied!
search
.atlas-icons-search
U+ea5b
Copied!
seat
.atlas-icons-seat
U+ea5c
Copied!
setting
.atlas-icons-setting
U+ea5d
Copied!
shield-done
.atlas-icons-shield-done
U+ea5e
Copied!
simcard
.atlas-icons-simcard
U+ea5f
Copied!
smart-phone
.atlas-icons-smart-phone
U+ea60
Copied!
smiling-face
.atlas-icons-smiling-face
U+ea61
Copied!
sort
.atlas-icons-sort
U+ea62
Copied!
spoon-and-fork
.atlas-icons-spoon-and-fork
U+ea63
Copied!
star-fill
.atlas-icons-star-fill
U+ea64
Copied!
star
.atlas-icons-star
U+ea65
Copied!
swap
.atlas-icons-swap
U+ea66
Copied!
train
.atlas-icons-train
U+ea67
Copied!
user
.atlas-icons-user
U+ea68
Copied!
visa
.atlas-icons-visa
U+ea69
Copied!
wallet
.atlas-icons-wallet
U+ea6a
Copied!
whatsapp
.atlas-icons-whatsapp
U+ea6b

How to Use

1. Include the CSS file in your HTML:

<link rel="stylesheet" href="atlas-icons.css">

2. Use icons with CSS classes:

<i class="atlas-home"></i> <span class="atlas-search"></span>

3. Customize with CSS:

.atlas-home { font-size: 24px; color: #667eea; } .my-icon { font-size: 2rem; color: red; margin-right: 8px; }

4. Available font formats:

atlas-icons.ttf - TrueType Font atlas-icons.woff - Web Open Font Format atlas-icons.woff2 - Web Open Font Format 2.0 atlas-icons.eot - Embedded OpenType atlas-icons.svg - SVG Font

5. Framework Integration Examples:

Pure HTML Project

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My HTML Project</title>
  <!-- Include Atlas Icons CSS -->
  <link rel="stylesheet" href="atlas-icons.css">
</head>
<body>
  <i class="atlas-home"></i>
  <i class="atlas-search"></i>
</body>
</html>

Note: For projects without bundlers, consider adding a version query parameter (e.g., atlas-icons.css?v=1.2.3) to bust cache when updating the icon library.

Vue 3 Project

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import 'atlas-icons.css'; // Global import for bundler

const app = createApp(App);
app.mount('#app');

// App.vue
<template>
  <i class="atlas-home"></i>
  <i class="atlas-search"></i>
</template>

Important: Import CSS globally in main.ts. The icon library already generates hashed font filenames for optimal caching.

Nuxt 4 Project

// nuxt.config.ts
export default defineNuxtConfig({
  css: [
    'atlas-icons.css' // Global import for bundler
  ],
});

// app.vue
<template>
  <i class="atlas-home"></i>
  <i class="atlas-search"></i>
</template>

Important: Add CSS to nuxt.config.ts. The icon library already generates hashed font filenames for optimal caching.

Cache Busting Strategies

For Bundled Projects (Vue, Nuxt):
Import CSS globally in your main entry file. The icon library automatically generates hashed font filenames, and the bundler will process the CSS to ensure proper font loading.

For Static HTML Projects:
The icon library automatically generates hashed font filenames, but you may want to manually update the version query parameter in your HTML file after each icon library update to bust CSS cache:
<link rel="stylesheet" href="atlas-icons.css?v=1.2.3">
Note: Font files are automatically hashed by the icon library, so only CSS cache busting is needed.