atlas-icons

Beautiful icon font with 40 carefully crafted icons

40
Total Icons
5
Font Formats
atlas-icons
Font Family
149.2KB
Total Size

Generated Files & Sizes

12.8KB atlas-icons.9e2b2c9d.ttf
8.7KB atlas-icons.9e2b2c9d.woff
7.6KB atlas-icons.9e2b2c9d.woff2
13.0KB atlas-icons.9e2b2c9d.eot
103.1KB atlas-icons.9e2b2c9d.svg
2.6KB atlas-icons.css
1.4KB types.ts
Copied!
arrow-down
.atlas-icons-arrow-down
U+ea01
Copied!
arrow-left
.atlas-icons-arrow-left
U+ea02
Copied!
arrow-right
.atlas-icons-arrow-right
U+ea03
Copied!
arrow-up
.atlas-icons-arrow-up
U+ea04
Copied!
bag
.atlas-icons-bag
U+ea05
Copied!
bank-card
.atlas-icons-bank-card
U+ea06
Copied!
bell
.atlas-icons-bell
U+ea07
Copied!
calendar
.atlas-icons-calendar
U+ea08
Copied!
checkmark
.atlas-icons-checkmark
U+ea09
Copied!
chevron-down-1
.atlas-icons-chevron-down-1
U+ea0a
Copied!
chevron-down
.atlas-icons-chevron-down
U+ea0b
Copied!
chevron-left-1
.atlas-icons-chevron-left-1
U+ea0c
Copied!
chevron-left-2
.atlas-icons-chevron-left-2
U+ea0d
Copied!
chevron-left
.atlas-icons-chevron-left
U+ea0e
Copied!
chevron-right-1
.atlas-icons-chevron-right-1
U+ea0f
Copied!
chevron-right
.atlas-icons-chevron-right
U+ea10
Copied!
chevron-up
.atlas-icons-chevron-up
U+ea11
Copied!
circle-close
.atlas-icons-circle-close
U+ea12
Copied!
close
.atlas-icons-close
U+ea13
Copied!
counter-clock
.atlas-icons-counter-clock
U+ea14
Copied!
default
.atlas-icons-default
U+ea15
Copied!
error
.atlas-icons-error
U+ea16
Copied!
group-tour
.atlas-icons-group-tour
U+ea17
Copied!
helmet
.atlas-icons-helmet
U+ea18
Copied!
home
.atlas-icons-home
U+ea19
Copied!
hotel
.atlas-icons-hotel
U+ea1a
Copied!
info-circle
.atlas-icons-info-circle
U+ea1b
Copied!
journey
.atlas-icons-journey
U+ea1c
Copied!
location
.atlas-icons-location
U+ea1d
Copied!
minus
.atlas-icons-minus
U+ea1e
Copied!
money
.atlas-icons-money
U+ea1f
Copied!
planee
.atlas-icons-planee
U+ea20
Copied!
plus
.atlas-icons-plus
U+ea21
Copied!
search
.atlas-icons-search
U+ea22
Copied!
sindibad-assistant-1
.atlas-icons-sindibad-assistant-1
U+ea23
Copied!
train
.atlas-icons-train
U+ea24
Copied!
user
.atlas-icons-user
U+ea25
Copied!
vector-1
.atlas-icons-vector-1
U+ea26
Copied!
vector
.atlas-icons-vector
U+ea27
Copied!
world-network
.atlas-icons-world-network
U+ea28

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.

React Project

// App.tsx
import React from 'react';
import 'atlas-icons.css'; // Global import for bundler

function App() {
  return (
    <div>
      <i className="atlas-home" />
      <i className="atlas-search" />
    </div>
  );
}

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

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.

Next.js Project

// _app.tsx or layout.tsx
import type { AppProps } from 'next/app';
import 'atlas-icons.css'; // Global import for bundler

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

// Any component
<i className="atlas-home" />
<i className="atlas-search" />

Important: Import CSS globally in _app.tsx or layout.tsx. The icon library already generates hashed font filenames for optimal caching.

Cache Busting Strategies

For Bundled Projects (React, Vue, Nuxt, Next.js):
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.