Titanic
A set of animated icons + code to insert them into the webpages
Install / Use
/learn @icons8/TitanicREADME
Titanic
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.rawgit.com/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 flag -
titanic.items-- list of titanic items -
titanic.items[index].on(), titanic.items[index].off(), titanic.items[index].play()-- play animations of the titanic item by index -
titanic.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.rawgit.com/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>
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.
Related Skills
node-connect
351.4kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
110.7kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
351.4kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
351.4kQQBot 富媒体收发能力。使用 <qqmedia> 标签，系统根据文件扩展名自动识别类型（图片/语音/视频/文件）。
