icons8/titanic
icons8/titanic has 2,435 GitHub stars and 213 forks. GitHot measured 0 stars in 24 hours. Last checked 2026-11-06 21:48 UTC. Last push 2026-06-30.
A set of animated icons + code to insert them into the webpages
Measured star growth
- in 24h
- 0
- in 7 days
- Collecting history
- in 15 days
- Collecting history
- in 1 month
- Collecting history
Net star changes over overlapping periods, not daily totals. Missing measurements are left blank. Stars measure attention, not software quality.
README.md
OriginalTitanic
A collection of animated icons + javascript library.
Installation
You can install it either via CDN or npm.
CDN
Insert this string to your HTML head:
<script src="https://cdn.jsdelivr.net/gh/icons8/titanic@master/dist/js/titanic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.5.9/bodymovin.min.js"></script>
And initialize it before the body closes:
<script>
var titanic = new Titanic();
</script>
This way, you can add icons anywhere in your HTML using this tag:
<div class='titanic titanic-chat'></div>
Where chat can be any of these:
- caps
- chat
- checkbox
- expand
- cheap
- expensive
- idea
- mailbox
- mic
- no-mic
- online
- pause
- power
- shopping
- smile
- stop
- unlock
- zoom
Hosting your images
If you'd like to host your images on your server instead of rawgit, pass the base URL with the init() function:
titanic.begin('/my/base/directory/');
Then, if you have a div with id="chat", Titanic will search for icons in /my/base/directory/chat.json.
npm
npm install titanic-icons --save
API
titanic.isInitialized()-- just true/false flagtitanic.items-- list of titanic itemstitanic.items[index].on(), titanic.items[index].off(), titanic.items[index].play()-- play animations of the titanic item by indextitanic.on(token), titanic.off(token), titanic.play(token)-- play animations of the titanic item by token (name)
Example
<head>
<!--Inserting the scripts once for the whole page-->
<script src="https://cdn.jsdelivr.net/gh/icons8/titanic@master/dist/js/titanic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.5.9/bodymovin.min.js"></script>
</head>
<body>
<!--Inserting an icon-->
<div class='titanic titanic-checkbox'></div>
<!--Initializing-->
<script>
var titanic = new Titanic({
hover: true, // auto animated on hover (default true)
click: true // auto animated on click/tap (default false)
});
</script>
<!--Clicking turns this icon on-->
<button onclick="titanic.on(getElementById('checkbox').value)">On</button>
</body>
About Icons8
Titanic is made by Icons8 — icons, illustrations, photos, music, and AI tools for designers and developers.
- Animated icons — 4,500+ animated icons crafted by our in-house motion team, in Lottie JSON, GIF, and After Effects. The same library that powers Titanic.
- Icons — 1,500,000+ icons in 132 consistent styles, from iOS 27 and Windows 11 to Material and Glyph Neue. Pixel-perfect, recolorable, in SVG and PNG.
- Illustrations — 108,000+ illustrations in 338 styles: flat, 3D, hand-drawn, and animated. SVG and PNG.
Credits
JavaScript is basically bodymovin plus few lines of my code. It's a solid library with an awesome name. Thank you, guys.
Icons are created by Margarita Ivanchikova from Icons8. She has many more awesome animations in her portfolio.
The code rewritten by Denis Alexanov, my teacher and guru. Thank you!
Project is produced by Icons8, author of the famous icon library, IconPharm, and Sleek Logos.
Yours, Ivan Braun from Argentinian shelter.
Explore related projects
freeCodeCamp/freeCodeCamp
freeCodeCamp.org's open-source codebase and curriculum. Learn math, programming, and computer science for free.
458,691 starsdonnemartin/system-design-primer
Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards.
377,182 starsreact/react
The library for web and native user interfaces.
252,332 starsvuejs/vue
This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
212,626 stars