diff --git a/demo/pages/elements/radio/RadioDemo.ts b/demo/pages/elements/radio/RadioDemo.ts
index 505363b85..9eca48cac 100644
--- a/demo/pages/elements/radio/RadioDemo.ts
+++ b/demo/pages/elements/radio/RadioDemo.ts
@@ -4,6 +4,7 @@ import { Component } from '@angular/core';
 let BasicRadioTpl = require('./templates/BasicRadio.html');
 let VerticalRadioTpl = require('./templates/VerticalRadio.html');
 let ButtonRadioTpl = require('./templates/ButtonRadio.html');
+let IconRadioTpl = require('./templates/IconRadio.html');
 
 const template = `
 <div class="container">
@@ -21,6 +22,11 @@ const template = `
     <h5>Button Radio</h5>
     <div class="example radio-demo">${ButtonRadioTpl}</div>
     <code-snippet [code]="ButtonRadioTpl"></code-snippet>
+
+
+    <h5>Icon Radio</h5>
+    <div class="example radio-demo">${IconRadioTpl}</div>
+    <code-snippet [code]="IconRadioTpl"></code-snippet>
 </div>
 `;
 
@@ -32,6 +38,7 @@ export class RadioDemoComponent {
     BasicRadioTpl: string = BasicRadioTpl;
     VerticalRadioTpl: string = VerticalRadioTpl;
     ButtonRadioTpl: string = ButtonRadioTpl;
+    IconRadioTpl: string = IconRadioTpl;
 
     onChangeVertical(change) {
         console.log('Vertical Radio Change:', change); // tslint:disable-line
@@ -44,4 +51,8 @@ export class RadioDemoComponent {
     onChangeButton(change) {
         console.log('Button Radio Change:', change); // tslint:disable-line
     }
+
+    onChangeIcon(change) {
+        console.log('Button Icon Radio Change:', change); // tslint:disable-line
+    }
 }
diff --git a/demo/pages/elements/radio/templates/IconRadio.html b/demo/pages/elements/radio/templates/IconRadio.html
new file mode 100644
index 000000000..c8c42f82a
--- /dev/null
+++ b/demo/pages/elements/radio/templates/IconRadio.html
@@ -0,0 +1,5 @@
+<novo-radio-group>
+    <novo-radio button="true" theme="icon" icon="checkbox-filled" name="icon" value="one" (change)="onChangeIcon($event)"></novo-radio>
+    <novo-radio button="true" theme="icon" icon="checkbox-indeterminate" name="icon" value="two" (change)="onChangeIcon($event)"></novo-radio>
+    <novo-radio button="true" theme="icon" icon="checkbox-add" name="icon" value="three" (change)="onChangeIcon($event)"></novo-radio>
+</novo-radio-group>
\ No newline at end of file
diff --git a/src/elements/radio/Radio.scss b/src/elements/radio/Radio.scss
index bcfa231cb..a29bd9a6b 100644
--- a/src/elements/radio/Radio.scss
+++ b/src/elements/radio/Radio.scss
@@ -7,6 +7,9 @@ novo-radio-group {
             &.unchecked {
                 opacity: .5;
             }
+            &[theme="icon"] i {
+                margin-right: 0;
+            }
         }
         &:first-child {
             button {
@@ -20,6 +23,9 @@ novo-radio-group {
                 border-bottom-right-radius: 3px;
                 border-right-width: 1px !important;
                 border-right-style: solid !important;
+                &[theme="icon"] {
+                    border-right-width: 0px !important;
+                }   
             }
         }
     }
diff --git a/src/elements/radio/Radio.spec.ts b/src/elements/radio/Radio.spec.ts
index 8f4941b7b..ddda97caf 100644
--- a/src/elements/radio/Radio.spec.ts
+++ b/src/elements/radio/Radio.spec.ts
@@ -2,6 +2,7 @@
 import { TestBed, async } from '@angular/core/testing';
 // App
 import { NovoRadioElement } from './Radio';
+import { NovoButtonModule } from '../button/Button.module';
 
 describe('Elements: NovoRadioElement', () => {
     let fixture;
@@ -11,6 +12,9 @@ describe('Elements: NovoRadioElement', () => {
         TestBed.configureTestingModule({
             declarations: [
                 NovoRadioElement
+            ],
+            imports: [
+                NovoButtonModule
             ]
         }).compileComponents();
         fixture = TestBed.createComponent(NovoRadioElement);
diff --git a/src/elements/radio/Radio.ts b/src/elements/radio/Radio.ts
index 04ed9ac04..4f518ebd0 100644
--- a/src/elements/radio/Radio.ts
+++ b/src/elements/radio/Radio.ts
@@ -23,7 +23,7 @@ export class NovoRadioGroup { }
     template: `
         <input [name]="name" type="radio" [checked]="checked" [attr.id]="name" #radio>
         <label [attr.for]="name" (click)="select($event, radio)">
-            <button *ngIf="button" [ngClass]="{'unchecked': !radio.checked, 'checked': radio.checked}" theme="secondary">{{ label }}</button>
+            <button *ngIf="button" [ngClass]="{'unchecked': !radio.checked, 'checked': radio.checked}" [theme]="theme" [icon]="icon">{{ label }}</button>
             <div *ngIf="!button">
                 <i [ngClass]="{'bhi-radio-empty': !radio.checked, 'bhi-radio-filled': radio.checked}"></i>
                 {{ label }}
@@ -42,6 +42,8 @@ export class NovoRadioElement implements ControlValueAccessor {
     @Input() vertical: boolean;
     @Input() label: string;
     @Input() button: boolean = false;
+    @Input() theme: string = 'secondary';
+    @Input() icon: string;
 
     @Output() change: EventEmitter<any> = new EventEmitter();