Titanic: animated icons wired up by CSS class and a bodymovin runtime

A div with a class, and that is the integration

The whole mechanism fits in one element. You write a div with the titanic class and a second class naming the animation, and the library finds it:

<div class='titanic titanic-chat'></div>

No JavaScript call references that specific icon. There is no list to register, no id to look up, nothing to initialise per icon. A single constructor call at the end of the body starts them all.

That design is what makes the library pleasant to use inside a content system. If an icon is chosen by a template or a content editor, the choice is a string in an HTML attribute rather than a JavaScript expression, and the same markup works in a static page and in a generated one.

The project describes itself as a collection of animated icons plus a javascript library, and the README credits bodymovin as the underlying technology, saying in plain terms that JavaScript is basically bodymovin plus a few lines of code. That framing is accurate. The genuinely original contribution is the class-based lookup and the convenience wrapper, not the animation engine.

Three lines of installation, with a pin worth noticing

The CDN path inserts two script tags into the document 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>

Then one constructor before the body closes:

<script>
    var titanic = new Titanic();
</script>

The first script is the library itself, the second is the animation runtime it depends on, and the order matters because Titanic expects bodymovin to already be there. The npm route is shorter still, since the published package bundles the dependency:

npm install titanic-icons --save

Two details in those tags deserve attention. The jsDelivr URL points at the master branch rather than a tag or a version number, so the file that loads can change without your deploy changing. The bodymovin tag does pin a version, 4.5.9, from cdnjs. The version asymmetry is in the original README, and if you copy it as given you are accepting an unpinned dependency on the icon library in exchange for a pinned one on the runtime.

The package name is also not the repository name. The repository is icons8/titanic; the npm package is titanic-icons.

Nineteen icons, all listed in the README

The available animations are enumerated rather than demonstrated, which makes this one of the few READMEs where you can check the whole surface by reading. The list is caps, chat, checkbox, expand, cheap, expensive, idea, mailbox, mic, no-mic, online, pause, power, shopping, smile, stop, unlock and zoom.

Nineteen in total, and the list has character. Cheap and expensive sit next to each other as a price pair. Mic and no-mic are separate assets rather than one animated toggle. Caps is there, so somebody needed a capitalisation affordance badly enough to animate it. Unlock covers a padlock opening, which is the kind of thing that is tedious to draw and pleasant to see move.

The gaps are as informative as the entries. There is no generic play, pause-with-a-triangle distinction beyond the plain pause, no arrow, no checkmark for a completed task, no spinner and no download glyph. For a set of nineteen hand-authored animations aimed at interface moments rather than navigation, that is a coherent scope, but it means the library cannot cover a general interface.

The README links a live preview of every icon, hosted as a rendered demo page, which is the fastest way to see what the JSON actually looks like in motion.

Four methods and one constructor option that matters

The API section is a list of four capabilities. There is an isInitialized() function that returns a true or false flag. There is an items property holding the list of Titanic items, and each item exposes on(), off() and play() by index. The same three verbs also work by token, meaning by the animation name, through top-level on(), off() and play().

That is the entire surface: three verbs, two addressing schemes, one readiness check. The practical difference between index and token addressing is that the index depends on the order icons were discovered in the document, which changes as you edit the page, while the token is the class name and stays stable.

The constructor accepts options, and one of them changes behaviour meaningfully:

var titanic = new Titanic({
  hover: true, // auto animated on hover (default true)
  click: true  // auto animated on click/tap (default false)
});

Hover defaults to on and click defaults to off. So by default an icon animates when the pointer enters it and then stops, which is a hover reveal rather than a continuous loop. Enabling click makes taps also start the animation, which is what you want for a checkbox-style icon where the state change should be visible. Turning both off, which the documentation does not spell out as a case but the defaults imply, gives you an icon that only moves when you drive it through the API.

The drive path is shown in the README's worked example, where a button calls titanic.on() with a value from an element, and the comment in that example says clicking turns the icon on.

Where the animation files come from at runtime

By default the icon data is fetched over the network rather than bundled, and there is one configuration hook for that. If you host the files yourself, pass a base directory:

titanic.begin('/my/base/directory/');

The README explains the lookup rule: for a div with the id chat, Titanic will look for chat.json in the directory you gave it. That is the entire mapping, a name to a JSON file with the same name, and it means self hosting is a matter of copying the animation files somewhere and pointing the library at them.

The reason this option exists is worth naming. The default location is a raw file host rather than a package registry, and a library that fetches its assets from a third-party URL at page load has an availability dependency on someone else's infrastructure. Hosting the files yourself removes both the network round trip and that dependency, at the cost of shipping the JSON in your own build.

The repository tree shows a small project: src/, dist/, demo/, docs/, a gulpfile.js, two JSON files at the root that look like animation data and a menu definition, and a visual-studio-code-snippet.json. There is a demo directory with an index.html and a styles folder, which is what the live preview renders.

Provenance, licensing and the limits of the project

The credits section is unusually generous for a repository of this size and names four people or projects. bodymovin is credited as the underlying JavaScript library with an appreciative note about the name. The icons themselves are credited to Margarita Ivanchikova, a designer at Icons8, with a link to her portfolio. The code is credited to Denis Alexanov, described as the author's teacher, and the README carries his name explicitly. The author signs off as Ivan Braun, from an Argentinian shelter.

That is a small project with a clear lineage, and it explains the shape of the code: a thin layer over someone else's engine, with the interesting decisions made upstream.

On licensing, the repository page does not state a licence, but the package manifest in the repository declares ISC, and the package author is listed as Icons8. If the licence matters to you, that manifest is the place to confirm it rather than the repository header.

The commercial context is also stated plainly. Icons8 sells icons, illustrations, photos, music and AI tools, and the README advertises the company's animated icon catalogue at more than 4,500 icons in Lottie JSON, GIF and After Effects formats, plus a much larger static icon library and illustration library. Titanic is the free demonstration of that catalogue, and it ships a subset of nineteen. The last push to the repository was on 2026-06-30.

Editorial conclusion

Titanic does one narrow thing and documents it in a single page, which is a reasonable trade for what it is. If you want a specific Icons8 animation on a page, the class name is the whole integration: no configuration object, no import, no build step. Where it stops is just as clear. It assumes bodymovin is already loaded, it fetches animation JSON at runtime from a base URL you either leave at the default or override, and it ships no way to author new animations. For anything beyond a set of icons you did not draw, Lottie players with a proper asset pipeline are the more durable choice. Start by copying the three-line CDN install, then check whether the icons you actually need are among the nineteen listed before you commit to the approach.

Frequently asked questions

Official sources

1. icons8/titanic on GitHub
2. Issues
3. Project website
4. README