diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html
index f03469e..67116a7 100644
--- a/demo/src/app/app.component.html
+++ b/demo/src/app/app.component.html
@@ -561,6 +561,20 @@ <h1 class="demo-title">
 
 <section>
   <nes-container title="Nintendo-characters">
-    Soon to come...
+    <div class="flex-row flex-wrap">
+
+      <i nes-character character="mario"></i>
+      <i nes-character character="ash"></i>
+      <i nes-character character="pokeball"></i>
+      <i nes-character character="bulbasaur"></i>
+      <i nes-character character="charmander"></i>
+      <i nes-character character="squirtle"></i>
+      <i nes-character character="kirby"></i>
+
+      <div nes-text color="error">
+        Nintendo owns the copyright of these characters. Please comply with the Nintendo guidelines and laws of the applicable jurisdiction.
+      </div>
+
+    </div>
   </nes-container>
 </section>
diff --git a/lib/src/character/character.directive.spec.ts b/lib/src/character/character.directive.spec.ts
new file mode 100644
index 0000000..bdf230f
--- /dev/null
+++ b/lib/src/character/character.directive.spec.ts
@@ -0,0 +1,8 @@
+import { NesCharacterDirective } from './character.directive';
+
+describe('CharacterDirective', () => {
+  it('should create an instance', () => {
+    const directive = new NesCharacterDirective();
+    expect(directive).toBeTruthy();
+  });
+});
diff --git a/lib/src/character/character.directive.ts b/lib/src/character/character.directive.ts
new file mode 100644
index 0000000..e8c6097
--- /dev/null
+++ b/lib/src/character/character.directive.ts
@@ -0,0 +1,20 @@
+import { Directive, Input } from '@angular/core';
+
+export type NesCharacter
+  = 'mario'
+  | 'ash'
+  | 'pokeball'
+  | 'bulbasaur'
+  | 'charmander'
+  | 'squirtle'
+  | 'kirby';
+
+@Directive({
+  selector: '[nes-character]',
+  host: {
+    '[class]': "character ? 'nes-' + character : ''",
+  },
+})
+export class NesCharacterDirective {
+  @Input() character?: NesCharacter;
+}
diff --git a/lib/src/character/character.module.ts b/lib/src/character/character.module.ts
new file mode 100644
index 0000000..bc327de
--- /dev/null
+++ b/lib/src/character/character.module.ts
@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { NesCharacterDirective } from './character.directive';
+
+const SHARED_DECLARATIONS = [
+  NesCharacterDirective,
+];
+
+@NgModule({
+  declarations: [
+    ...SHARED_DECLARATIONS,
+  ],
+  imports: [
+    CommonModule,
+  ],
+  exports: [
+    ...SHARED_DECLARATIONS,
+  ],
+})
+export class NesCharacterModule { }
diff --git a/lib/src/character/index.ts b/lib/src/character/index.ts
new file mode 100644
index 0000000..fab16f4
--- /dev/null
+++ b/lib/src/character/index.ts
@@ -0,0 +1,2 @@
+export * from './character.directive';
+export * from './character.module';
diff --git a/lib/src/index.ts b/lib/src/index.ts
index cbbb42d..72a8581 100644
--- a/lib/src/index.ts
+++ b/lib/src/index.ts
@@ -2,6 +2,7 @@ export * from './avatar';
 export * from './badge';
 export * from './balloon';
 export * from './button';
+export * from './character';
 export * from './checkbox';
 export * from './container';
 export * from './dialog';
diff --git a/lib/src/nes.module.ts b/lib/src/nes.module.ts
index bacdc85..e336c2d 100644
--- a/lib/src/nes.module.ts
+++ b/lib/src/nes.module.ts
@@ -3,6 +3,7 @@ import { NesAvatarModule } from './avatar';
 import { NesBadgeModule } from './badge';
 import { NesBalloonModule } from './balloon';
 import { NesButtonModule } from './button';
+import { NesCharacterModule } from './character';
 import { NesCheckboxModule } from './checkbox';
 import { NesContainerModule } from './container';
 import { NesDialogModule } from './dialog';
@@ -23,6 +24,7 @@ const SHARED_IMPORTS = [
   NesBadgeModule,
   NesBalloonModule,
   NesButtonModule,
+  NesCharacterModule,
   NesCheckboxModule,
   NesContainerModule,
   NesDialogModule,