---
title: "Logs animated icon"
description: "Logs animated icon (Developer & version control). A new entry streams into the log. Light: the log lines scroll up one row, the oldest line fading out at the top, and the new entry's timestamp pops in at the bottom while its message types out after it. Strong: the lines scroll up with a hit and a small rebound, the new timestamp blinks twice like a live indicator and the message types out faster. The new entry stays until the preview reset."
canonical: https://generativeicons.com/icons/logs/
---

# Logs animated icon

A new entry streams into the log. Light: the log lines scroll up one row, the oldest line fading out at the top, and the new entry's timestamp pops in at the bottom while its message types out after it. Strong: the lines scroll up with a hit and a small rebound, the new timestamp blinks twice like a live indicator and the message types out faster. The new entry stays until the preview reset.

- Id: `logs`
- Category: Developer & version control
- Search terms: logging, log file, log stream, event log, system log, syslog, console, console output, stdout, activity log, tail
- Two states: prepared to result, played forward and back
- Styles: outline, solid, duotone; outline weights 1.5, 2, 2.5 (any from 1 to 3); motion light or strong
- File: https://generativeicons.com/assets/logs.lottie (dotLottie, 7256 bytes, sha256 4c7c2ee9b43a0f09508535c7d989e41d1d8487ab6cb5d1d9061624f38851e4c4)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add logs
```

## React

```tsx
// npm install @lottiefiles/generative-icons-react
'use client';
import { AnimatedIcon } from '@lottiefiles/generative-icons-react';
import icon, { src } from './generative-icons/logs.mjs';

export function LogsIcon() {
  return <AnimatedIcon icon={icon} src={src} size={32}
    color="#ffffff" variant="outline" weight={2}
    motion="light" theme="dark" />;
}
```

## JavaScript

```js
import { createIcon } from '@lottiefiles/generative-icons-runtime';
import icon, { src } from './generative-icons/logs.mjs';

const handle = await createIcon(canvas, {
  icon, src,
  color: '#ffffff', style: 'outline', weight: 2,
  motion: 'light', theme: 'dark'
});
button.addEventListener('click', () => handle.play());
// On removal: handle.destroy();
```

More: https://generativeicons.com/icons/logs/ · https://generativeicons.com/api/icons/logs