---
title: "System instructions animated icon"
description: "System instructions animated icon (AI · Conversation). The root issues a new rule and it is written into the tree. Light: the root node presses and sends; the spine runs on below the last rule and the new rule writes out to the right, overshoots its length a little and settles; the root springs back as the rule lands. Strong: the root presses harder, the instruction ripples down the existing rules in turn (each stretches out from the spine and springs back), then the new rule writes out, overshoots further and settles twice. Rules never leave the spine."
canonical: https://generativeicons.com/icons/system-instructions/
---

# System instructions animated icon

The root issues a new rule and it is written into the tree. Light: the root node presses and sends; the spine runs on below the last rule and the new rule writes out to the right, overshoots its length a little and settles; the root springs back as the rule lands. Strong: the root presses harder, the instruction ripples down the existing rules in turn (each stretches out from the spine and springs back), then the new rule writes out, overshoots further and settles twice. Rules never leave the spine.

- Id: `system-instructions`
- Category: AI · Conversation
- Search terms: system prompt, custom instructions, rules, ruleset, ai guidelines, directives, base prompt, ai rules, preamble, behavior rules, behaviour rules
- 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/system-instructions.lottie (dotLottie, 7499 bytes, sha256 720e59c2668f3acc86c2324ad046811a17ccca90bf724326c3f522a3d545ba76)
- License: MIT

## Install

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

## React

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

export function SystemInstructionsIcon() {
  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/system-instructions.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/system-instructions/ · https://generativeicons.com/api/icons/system-instructions